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

هل تحتاج إلى إنشاء رأس عالمي بنموذج تسجيل الدخول في 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% من القسم الأيسر. هذا السطر مخصص لشعار رأس الصفحة. نحتاج إلى إنشاء سطر قسم لنموذج تسجيل الدخول والقائمة على الجانب الأيمن.

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

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

أضف وحدة "تسجيل الدخول" داخل الصف ذي العمود الواحد.

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

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

إضافة فئة مخصصة لنموذج تسجيل الدخول و 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)
• حقول لون النص: #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 إلى نموذج تسجيل دخول أنيق يتناسب تمامًا مع رأس أي موقع ويب. 

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

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

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

...