يُعدّ إضافة نموذج تسجيل دخول إلكتروني إلى رأس موقعك الإلكتروني طريقة رائعة لتحسين تجربة المستخدم. وهي مثالية لمواقع العضوية والمتاجر الإلكترونية لأنها تتيح للمستخدمين تسجيل الدخول في أي وقت ومن أي مكان على الموقع.
في هذا الدرس، سنوضح لك كيفية تصميم نموذج تسجيل دخول مضمّن باستخدام رأس مخصص في أداة إنشاء قوالب Divi. سنبدأ بإنشاء رأس عام بسيط ومتجاوب، ثم نصمم نموذج تسجيل دخول مضمّنًا في الزاوية العلوية اليمنى من الرأس باستخدام وحدة تسجيل الدخول في Divi. يتطلب هذا التصميم بعض أكواد CSS المخصصة، ولكن بمجرد الانتهاء من ذلك، سيكون من السهل تخصيص نموذج تسجيل الدخول المضمّن ليتناسب مع أي تصميم رأس باستخدام خيارات التصميم المدمجة في Divi.
نظرة عامة على النتيجة
إليكم نظرة عامة موجزة على رأس الصفحة المخصص مع نموذج تسجيل الدخول عبر الإنترنت الذي سنقوم بإنشائه في هذا البرنامج التعليمي.
وهنا نموذج تسجيل الدخول عبر الإنترنت على شاشة الجهاز اللوحي والهاتف.
هذه هي الرسالة ورابط تسجيل الخروج اللذان سيتم عرضهما عند تسجيل دخول المستخدمين.
ما تحتاجه للبدء
إذا لم تكن قد فعلت ذلك بالفعل، تثبيت وتفعيل موضوع ديفي هذا كل ما تحتاجه تقريبًا للبدء. سنقوم بإنشاء تصميم قالب رأس جديد من الصفر باستخدام أداة إنشاء قوالب Divi.
تمت إضافة رأسية عامة جديدة
لتحريك الأمور إلى الأمام، نحتاج إلى إنشاء رأس عالمي جديد لموقع الويب الخاص بنا. للقيام بذلك، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi > Theme Builder.
في قالب موقع الويب الافتراضي، انقر فوق "إضافة رأس عالمي"، ثم "إنشاء رأس عالمي".
بعد ذلك، حدد خيار "البناء من الصفر".
صمم رأس Divi بالكامل مع نموذج تسجيل دخول عبر الإنترنت
قسم التخصيص
من خلال محرر تخطيط رأس الصفحة العام، يمكنك إنشاء رأس صفحة مخصص لموقعك بالكامل. للبدء، افتح إعدادات القسم العادي وقم بتحديث العناصر التالية:
- تدرج لون الخلفية اليسرى:
- تدرج لوني للخلفية اليمنى:
- اتجاه التدرج: 48 درجة
- الحشو: 10 بكسل في الأعلى ، 10 بكسل في الأسفل ، 20 بكسل في اليسار ، 20 بكسل في اليمين
لجعل رأس الصفحة المخصص لدينا أكثر استجابة، سنضيف CSS المخصص التالي إلى العنصر الرئيسي للقسم.
display:flex;justify-content:center;align-items:center;
تمت إضافة شعار العنوان إلى السطر الأول
الآن بعد أن أصبح القسم جاهزًا ، يمكننا إضافة السطر الأول.
أضف صف
أضف صفًا إلى عمود في القسم.
أضف وحدة صورة تحتوي على صورة شعار
في الصف ذي العمود الواحد، أضف وحدة صورة. هنا سنضيف شعار رأس الصفحة.
قم بتحديث صورة وهامش وحدة الصورة
قم بتحديث إعدادات الصورة كما يلي:
- الصورة: [أضف شعارًا (حوالي 64 بكسل × 64 بكسل)]
- الهامش: 20px الصحيح
تحديث معلمات الخط
قبل المتابعة، افتح إعدادات الخط وقم بتحديث ما يلي:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 25٪
- محاذاة الصف: اليسار
- الحشو: 0px عالية ، 0px منخفضة
إضافة نموذج تسجيل الدخول عبر الإنترنت إلى السطر الثاني
أضف صف
الآن وقد أصبح السطر الأول جاهزًا، ستلاحظ في المحرر أنه يشغل 25% من القسم الأيسر. هذا السطر مخصص لشعار رأس الصفحة. نحتاج إلى إنشاء سطر قسم لنموذج وقائمة تسجيل الدخول على الجانب الأيمن.
أضف صفًا ثانيًا بهيكل إلى عمود في القسم.
إضافة نموذج تسجيل الدخول
أضف وحدة اتصال إلى صف في عمود.
إزالة المحتوى الافتراضي
ضمن إعدادات تسجيل الدخول ، احذف العنوان المزيف والمحتوى الأساسي.
إضافة نموذج تسجيل دخول وفئة CSS مخصصة
قبل أن نتعمق في تصميم نموذج تسجيل الدخول الإلكتروني، دعونا نضيف أولاً ملفات CSS وفئات CSS المخصصة إلى وحدة تسجيل الدخول. سيتيح لنا ذلك إنشاء البنية الأساسية للنموذج قبل إضافة اللمسات التصميمية النهائية باستخدام خيارات Divi المدمجة.
ضمن علامة التبويب "متقدم"، أضف فئة CSS التالية:
- فئة CSS: نموذج تسجيل الدخول
أضف CSS المخصص التالي في وصف CSS area:
margin-bottom: 0px !important
ثم أضف CSS المخصص التالي في منطقة CSS في نموذج تسجيل الدخول:
width: 100%;
أضف CSS المخصص التالي إلى مربع CSS Connection Fields:
padding: 5px 4% !important
أضف CSS مخصصًا إلى إعدادات تخطيط رأس الصفحة
نظرًا لأننا قمنا بإضافة فئة CSS المخصصة الخاصة بنا إلى وحدة نموذج تسجيل الدخول ، يمكننا إضافة CSS المخصص لدينا الذي سيستهدف نموذج تسجيل الدخول هذا فقط.
افتح إعدادات تخطيط رأس الصفحة وأضف CSS المخصص التالي:
.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}
سيؤدي هذا الكود البرمجي CSS إلى جعل حقول تسجيل الدخول والزر يظهران بشكل مضمن (أفقيًا)، وإخفاء رابط "هل نسيت كلمة المرور؟"، وإضافة هامش صغير بين الحقول.
إعدادات الخط
قبل وضع اللمسات الأخيرة على نموذج تسجيل الدخول عبر الإنترنت ، دعونا نقوم بتحديث معلمات الخط كما يلي:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- خط المحاذاة: مستقيم
- الحشو: 0px عالية ، 0px منخفضة
إعدادات التصميم لنموذج تسجيل الدخول
نحن الآن جاهزون لتحديث إعدادات نموذج تسجيل الدخول. افتح إعدادات وحدة نموذج تسجيل الدخول وقم بتحديث ما يلي:
- استخدام لون الخلفية: لا
حقل وربط النص
- خلفية الحقل: اللون: rgba (255,255,255,0.2،XNUMX،XNUMX،XNUMX)
- لون نص الحقل: #ffffff
- الشرطة الميدانية: لاتو
- حجم نص الحقل: 14 بكسل
- محاذاة النص: صحيح
- خط الرابط: لاتو
- نمط الخط الرابط: مسطر
- لون نص الرابط: # ff3190
تصميم زر
- حجم نص الزر: 15px
- لون خلفية الزر: #ff3190
- عرض حد الزر: 0px
- خط الزر: لاتو
- زر الحشو: 2px في الأعلى ، 2px في الأسفل
- الهامش: 15px منخفضة
- الحشو: 0px في الأعلى ، 0px في الأسفل ، 0px في اليسار ، 0px في اليمين
إضافة القائمة إلى السطر الثاني
وحدة القائمة
من خلال نموذج تسجيل الدخول عبر الإنترنت الخاص بنا ، يمكننا إضافة القائمة أدناه مباشرة.
إضافة وحدة نمطية القائمة تحت وحدة نموذج تسجيل الدخول.
إعدادات وحدة القائمة
تحديث إعدادات القائمة على النحو التالي:
- لون الخلفية: rgba (0,0,0,0)
- خط القائمة: لاتو
- وزن خط القائمة: جريئة
- لون نص القائمة: #ffffff
- حجم نص القائمة: 16px
- محاذاة النص: صحيح
- لون خلفية القائمة المنسدلة: #ffffff
- لون الخط في القائمة المنسدلة: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- لون نص القائمة المنسدلة: # 000000
- لون خلفية قائمة الهاتف المحمول: #ffffff
- لون نص قائمة المحمول: # 000000
- لون أيقونة سلة التسوق: #ffffff
- لون أيقونة البحث: #ffffff
- لون رمز قائمة الهامبرغر: #ffffff
حفظ رأس نموذج تسجيل الدخول
تأكد من حفظ التصميم قبل الخروج من محرر تصميم رأس الصفحة.
ثم احفظ أيضًا إعدادات مولد السمة.
النتائج النهائية
هذا هو!
والآن دعونا نرى النتيجة النهائية. لرؤية النتيجة النهائية، قم بزيارة صفحة على موقع الويب الخاص بك.
هذا هو العنوان الموجود على شاشة سطح المكتب.
هذا هو عنوان نموذج تسجيل الدخول عبر الإنترنت على شاشة الجهاز اللوحي.
وهذه هي استمارة تسجيل الدخول عبر الإنترنت على شاشة الهاتف. لاحظ أيضاً قائمة الهاتف المحمول.
وهذا ما سيراه المستخدم بمجرد تسجيل الدخول.
الأفكار النهائية
يُعدّ هذا الرأس العالمي المُخصّص، المُزوّد بنموذج تسجيل دخول إلكتروني، إضافةً قيّمةً لأي موقع عضوية أو متجر إلكتروني. بفضل بعض التعديلات البسيطة على CSS، تمكّنا من تحويل وحدة تسجيل الدخول في Divi إلى نموذج تسجيل دخول أنيق يُضفي لمسةً جماليةً على رأس أي موقع ويب. نأمل أن تجدوه مفيدًا في مشروعكم القادم.
أتطلع إلى سماع تعليقاتكم.
لصحتك!