هل تحتاج إلى إنشاء رأس عالمي بنموذج تسجيل الدخول في DIVI؟

إن إنشاء نموذج تسجيل دخول في رأس الصفحة قد يكون بمثابة دفعة قوية لـ تجربة المستخدم. 

وهي مثالية لمواقع الاشتراك والمتاجر عبر الإنترنت لأنها تسمح للمستخدمين بتسجيل الدخول في أي وقت على أي صفحة من صفحات الموقع. 

في هذا البرنامج التعليمي، سنوضح لك كيفية تصميم نموذج تسجيل دخول مستخدم عبر الإنترنت على رأس صفحة مخصص. لنبدأ!

مسح

فيما يلي معاينة سريعة للرأس المخصص مع نموذج تسجيل الدخول الذي سننشئه في هذا البرنامج التعليمي.

هذه هي رسالة "تسجيل الخروج" والرابط الذي سيظهر عندما يقوم المستخدمون بتسجيل الدخول.

إضافة رأس عام جديد

للمضي قدمًا، نحتاج إلى إنشاء رأس عام جديد لموقعنا. للقيام بذلك، انتقل إلى لوحة تحكم ووردبريس، ثم انتقل إلى Divi > Theme Builder.

في قالب موقع الويب الافتراضي، انقر فوق "إضافة رأس عالمي"، ثم "إنشاء رأس عالمي".

تصميم رأس عالمي Divi مع نموذج تسجيل دخول أفقي

تخصيص القسم

من محرر تخطيط الرأس العالمي، يمكنك إنشاء رأس مخصص لموقعك الإلكتروني من الصفر. للبدء، افتح إعدادات قسم "عادي" وحدّث ما يلي:

• لون التدرج للخلفية اليسرى:
• لون التدرج للخلفية اليمنى:
• اتجاه التدرج: 48 درجة

• الهامش الداخلي: 10 بكسل للأعلى ، 10 بكسل للأسفل ، 20 بكسل لليسار ، 20 بكسل لليمين

من أجل جعل رأسنا أكثر استجابة ، سنضيف CSS المخصص التالي إلى عنصر القسم الرئيسي.

display:flex;
justify-content:center;
align-items:center;

أضف شعار الرأس إلى السطر الأول

الآن بعد أن أصبح القسم جاهزًا ، يمكننا إضافة السطر الأول.

أضف خطًا

أضف صفًا إلى عمود في القسم.

أضف وحدة صورة مع صورة شعار

في صف العمود الواحد ، أضف وحدة صورة. سيكون هذا هو المكان الذي نضيف فيه شعار الرأس.

تحديث هامش وحدة الصورة والصورة

قم بتحديث إعدادات الصورة كما يلي:

• الصورة: [أضف شعار (64 × 64 بكسل تقريبًا)]

• الهامش: 20 بكسل يمين

تحديث معلمات الخط

قبل المضي قدمًا ، افتح إعدادات الخط وقم بتحديث ما يلي:

• استخدام عرض هامش مخصص: نعم
• تباعد العمود: 1
• أقصى عرض: 25٪
• المحاذاة: اليسار

• الهامش الداخلي: 0 بكسل للأعلى ، 0 بكسل للأسفل

تمت إضافة نموذج تسجيل الدخول الأفقي إلى الصف الثاني

أضف خطًا

الآن بعد أن أصبح الصف الأول جاهزًا ، ستلاحظ في المحرر أن الصف الأول سيشغل 25٪ من القسم الأيسر. سيكون هذا هو السطر المخصص لشعار الرأس الخاص بنا. نحتاج إلى إنشاء صف قسم لنموذج تسجيل الدخول والقائمة على الجانب الأيمن.

أضف صفًا ثانيًا بهيكل إلى عمود في القسم.

إضافة نموذج تسجيل الدخول

داخل الصف المكون من عمود واحد ، أضف وحدة "Connect".

إزالة المحتوى الافتراضي

ضمن إعدادات وحدة تسجيل الدخول ، قم بإزالة العنوان المزيف ومحتوى الجسم.

إضافة فئة مخصصة لنموذج تسجيل الدخول و CSS

قبل أن نذهب بعيدًا في تصميم نموذج تسجيل الدخول ، دعنا أولاً نضيف فئة CSS و CSS المخصص إلى وحدة تسجيل الدخول. سيؤدي هذا إلى إعداد الهيكل الأساسي عبر الإنترنت للنموذج قبل وضع اللمسات الأخيرة على تصميم النموذج مع خيارات Divi المدمجة.

انظر أيضا دليلنا على كيفية إنشاء قائمة جانبية منزلقة وسريعة الاستجابة في DIVI

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية:

• فئة CSS: header-login-form

أضف CSS المخصص التالي إلى مربع CSS لوصف الاتصال:

margin-bottom: 0px !important

ثم أضف CSS المخصص التالي في منطقة CSS من نموذج تسجيل الدخول:

width: 100%;

أضف CSS المخصص التالي إلى منطقة CSS لحقول تسجيل الدخول:

padding: 5px 4% !important

إضافة CSS مخصص لإعدادات تخطيط الرأس

نظرًا لأننا أضفنا فئة CSS المخصصة الخاصة بنا إلى وحدة نموذج تسجيل الدخول ، يمكننا إضافة CSS المخصص الذي سيستهدف نموذج تسجيل الدخول هذا فقط.

اقرأ أيضًا البرنامج التعليمي الخاص بنا كيفية إنشاء صفحة المدونة باستخدام وحدة المدونة باستخدام DIVI

افتح إعداد تخطيط الرأس وأضف 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
• المحاذاة: صحيح

• الهامش الداخلي: 0 بكسل للأعلى ، 0 بكسل للأسفل

إعدادات التصميم لنموذج تسجيل الدخول

نحن الآن جاهزون لتحديث إعدادات نموذج تسجيل الدخول. افتح إعدادات وحدة الاتصال وقم بتحديث ما يلي:

• استخدام لون الخلفية: لا

حقل وربط النص

• حقول لون الخلفية: rgba (255,255,255,0.2،XNUMX،XNUMX،XNUMX)
• حقول لون النص: #ffffff

• خط الحقول: Lato
• حقول حجم النص: 14 بكسل
• محاذاة النص: صحيح

تصميم زر

• استخدام الأنماط المخصصة للزر: لا
• حجم نص الزر: 15 بكسل
• زر الخلفية: # ff3190
• زر عرض الحدود: 0 بكسل

• خط الزر: Lato
• زر الهامش: 2 بكسل للأعلى و 2 بكسل للأسفل
• زر الحشو: 15 بكسل من الأسفل

• الهامش الداخلي: 0 بكسل للأعلى ، 0 بكسل للأسفل ، 0 بكسل لليسار ، 0 بكسل لليمين

إضافة القائمة إلى السطر الثاني

وحدة القائمة

من خلال نموذج تسجيل الدخول الخاص بنا ، يمكننا إضافة القائمة أدناه مباشرة.

أضف وحدة قائمة ضمن وحدة تسجيل الدخول.

إعدادات وحدة القائمة

قم بتحديث إعدادات القائمة كما يلي:

• الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)

• قائمة الخط: Lato
• قائمة Soft Light: جريئة
• لون نص القائمة: #ffffff
• حجم نص القائمة: 16 بكسل
• محاذاة النص: صحيح

• لون خلفية القائمة المنسدلة: #ffffff
• لون صف القائمة المنسدلة: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
• لون نص القائمة المنسدلة: # 000000
• لون خلفية قائمة الجوال: #ffffff
• لون نص قائمة الجوال: # 000000

• لون رمز سلة التسوق: #ffffff
• لون رمز البحث: #ffffff
• لون أيقونة قائمة همبرغر: #ffffff

حفظ رأس نموذج تسجيل الدخول

تأكد من حفظ التخطيط قبل الخروج من محرر الرأس.

بعد ذلك ، احفظ إعدادات Theme Builder أيضًا.

النتائج النهائية

لقد تم !

الآن دعونا نرى النتيجة النهائية. لرؤية النتيجة النهائية ، كل ما عليك فعله هو زيارة صفحة على موقع الويب الخاص بك.

وهذا ما سيراه المستخدم عند تسجيل الدخول.

تحميل DIVI Now !!!

الخاتمة

سيكون هذا العنوان العالمي المخصص مع نموذج تسجيل الدخول مفيدًا بالتأكيد لأي موقع ويب اشتراك أو متجر عبر الإنترنت. 

باستخدام القليل من CSS المخصص ، تمكنا من تحويل وحدة تسجيل دخول Divi إلى نموذج تسجيل دخول أنيق يتناسب تمامًا مع رأس أي موقع ويب. 

آمل أن يكون هذا مفيدًا لمشروعك التالي. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...