Divi: كيفية إنشاء رأس عام باستخدام نموذج تسجيل الدخول

تحتاج إلى إنشاء رأس عام مع استمارتنا اتصال في DIVI؟

تم إنشاء ملف استمارتنا تسجيل الدخول على رأسك يمكن أن يكون دفعة كبيرة لـ تجربة المستخدم. 

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

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

مسح

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

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

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

لكي تسير الأمور ، نحتاج إلى إنشاء رأس عالمي جديد لملف موقع انترنت. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress وانتقل إلى 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 إلى نموذج تسجيل دخول أنيق يتناسب تمامًا مع رأس أي موقع ويب. 

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

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

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

...