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

يمكن أن يكون إنشاء نموذج تسجيل دخول مضمن لرأسك بمثابة دفعة رائعة لتجربة المستخدم. إنها مثالية لمواقع العضوية والمتاجر عبر الإنترنت لأنها تجعل من السهل حقًا على المستخدمين تسجيل الدخول في أي وقت أو في أي صفحة من صفحات الموقع. في هذا البرنامج التعليمي ، سوف نوضح لك كيفية تصميم نموذج تسجيل دخول مضمن لمستخدم رأس مخصص ، Divi Theme Builder. للقيام بذلك ، سنقوم ببناء رأس عالمي سريع الاستجابة ثم نصمم نموذج تسجيل دخول مضمن مدمج في الجزء العلوي الأيمن من الرأس باستخدام وحدة تسجيل الدخول الخاصة بـ Divi. يتطلب التصميم القليل من CSS المخصص ، ولكن بمجرد أن يصبح كل شيء في مكانه ، سيكون من السهل تخصيص نموذج تسجيل الدخول المضمن لمطابقة أي تصميم رأس بسهولة باستخدام خيارات التصميم المضمنة في Divi.

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على العنوان المخصص باستخدام نموذج تسجيل الدخول المضمّن الذي سنقوم ببنائه في هذا البرنامج التعليمي.

وهنا نموذج تسجيل الدخول المضمن على شاشة الكمبيوتر اللوحي والهاتف.

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

قم بتنزيل تخطيط رأس نموذج تسجيل الدخول المضمن مجانًا

لوضع يديك على التخطيط من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن تكون مشتركًا أو تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط وإضافة أحد ملفات json إلى Divi Theme Builder باستخدام خيار Theme Builder Portability.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme. هذا كل ما تحتاجه للبدء. سننشئ تخطيط قالب رأس جديد من البداية باستخدام Divi Theme Builder.

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

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

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

ثم حدد خيار البناء من الصفر.

تصميم Divi Global Header باستخدام نموذج تسجيل الدخول المضمن

تخصيص القسم

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

• لون يسار متدرج للخلفية:
• لون خلفية متدرج لليمين:
• اتجاه التدرج: 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 المضمنة.

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

• فئة CSS: header-login-form

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

margin-bottom: 0px !important

بعد ذلك ، أضف CSS المخصص التالي إلى مربع نموذج تسجيل الدخول CSS:

width: 100%;

قم بإضافة CSS المخصص التالي إلى مربع Login Fields CSS:

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
• محاذاة الصف: صحيح
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

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

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

نص الحقل والارتباط

• خلفية الحقول: اللون: rgba (255،255،255،0.2)
• لون نص الحقول: #ffffff
• خط الحقول: Lato
• حجم نص الحقول: 14 بكسل
• محاذاة النص: صحيح
• خط الارتباط: Lato
• نمط خط الارتباط: تسطير
• لون نص الرابط: # ff3190

تصميم زر

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

إضافة القائمة إلى الصف الثاني

وحدة القائمة

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

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

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

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

• لون الخلفية: rgba (0،0،0،0)
• خط القائمة: Lato
• وزن خط القائمة: غامق
• لون نص القائمة: #ffffff
• حجم نص القائمة: 16 بكسل
• محاذاة النص: صحيح
• لون خلفية القائمة المنسدلة: #ffffff
• لون خط القائمة المنسدلة: rgba (0،0،0،0)
• لون نص القائمة المنسدلة: # 000000
• لون خلفية قائمة الجوال: #ffffff
• لون نص قائمة الجوال: # 000000
• لون أيقونة عربة التسوق: #ffffff
• لون رمز البحث: #ffffff
• لون أيقونة قائمة همبرغر: #ffffff

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

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

ثم احفظ إعدادات Theme Builder أيضًا.

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

هذا كل شيء!

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

هذا هو العنوان على شاشة سطح المكتب.

هنا هو رأس نموذج تسجيل الدخول المضمن على شاشة الكمبيوتر اللوحي.

وهنا نموذج تسجيل الدخول المضمن على شاشة الهاتف. لاحظ قائمة الجوال أيضًا.

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

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!