تم إنشاء ملف استمارتنا يمكن أن يكون تسجيل الدخول المضمن لرأسك بمثابة دفعة هائلة لتجربة المستخدم. إنها مثالية لمواقع العضوية والمتاجر عبر الإنترنت لأنها تسمح للمستخدمين بتسجيل الدخول في أي وقت وعلى أي صفحة من الموقع.
في هذا البرنامج التعليمي ، سنوضح لك كيفية تصميم ملف استمارتنا عبر الإنترنت باستخدام رأس مخصص في Divi Theme Builder. للقيام بذلك، سنقوم بإنشاء رأس عام سريع الاستجابة ثم نقوم بتصميم ملف استمارتنا تسجيل دخول مضغوط عبر الإنترنت في أعلى يمين الرأس باستخدام وحدة تسجيل الدخول Divi. يتطلب البناء القليل من كود CSS المخصص، ولكن بمجرد أن يكون كل شيء في مكانه الصحيح، سيكون من السهل تخصيص نموذج تسجيل الدخول عبر الإنترنت ليطابق بسهولة أي تصميم رأس باستخدام خيارات التصميم لخدمات Divi المتكاملة.
نظرة عامة على النتيجة
فيما يلي نظرة عامة سريعة على العنوان المخصص مع نموذج تسجيل الدخول عبر الإنترنت الذي سننشئه في هذا البرنامج التعليمي.
وهنا نموذج تسجيل الدخول عبر الإنترنت على شاشة الجهاز اللوحي والهاتف.
هذه هي رسالة تسجيل الخروج والرابط الذي سيتم عرضه عندما يقوم المستخدمون بتسجيل الدخول.
ما تحتاجه للبدء
إذا لم تكن قد فعلت بالفعل ، تثبيت وتفعيل موضوع ديفي . هذا كل ما تحتاجه للبدء. سننشئ تخطيطًا جديدًا لقالب الرأس من البداية باستخدام Divi Theme Builder.
إضافة رأس عام جديد
لكي تسير الأمور ، نحتاج إلى إنشاء رأس عالمي جديد لملف موقع انترنت. للقيام بذلك ، انتقل إلى لوحة معلومات 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،XNUMX،XNUMX،XNUMX)
- خط القائمة: لاتو
- وزن خط القائمة: جريئة
- لون نص القائمة: #ffffff
- حجم نص القائمة: 16px
- محاذاة النص: صحيح
- لون خلفية القائمة المنسدلة: #ffffff
- لون الخط في القائمة المنسدلة: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- لون نص القائمة المنسدلة: # 000000
- لون خلفية قائمة الجوال: #ffffff
- لون نص قائمة المحمول: # 000000
- لون أيقونة عربة التسوق: #ffffff
- لون رمز البحث: #ffffff
- لون رمز قائمة همبرغر: #ffffff
حفظ رأس نموذج تسجيل الدخول
تأكد من حفظ التخطيط قبل الخروج من محرر تخطيط الرأس.
ثم احفظ أيضًا إعدادات مولد السمة.
النتائج النهائية
هذا هو!
الآن دعونا نرى النتيجة النهائية. لرؤية النتيجة النهائية ، ما عليك سوى زيارة صفحة موقع انترنت.
هذا هو العنوان على شاشة سطح المكتب.
هذا هو رأس نموذج تسجيل الدخول عبر الإنترنت على شاشة الجهاز اللوحي.
وهنا نموذج تسجيل الدخول عبر الإنترنت على شاشة الهاتف. لاحظ أيضًا قائمة الأجهزة المحمولة.
وهذا ما سيراه المستخدم عند تسجيل الدخول.
الأفكار النهائية
سيكون هذا الرأس العام المخصص مع نموذج تسجيل الدخول عبر الإنترنت مفيدًا بالتأكيد لأي موقع عضوية أو متجر عبر الإنترنت. باستخدام القليل من CSS المخصص، تمكنا من تحويل وحدة تسجيل الدخول إلى Divi إلى نموذج تسجيل دخول أنيق عبر الإنترنت والذي سيبدو جيدًا في رأس أي موقع انترنت. آمل أن يكون هذا مفيدًا لمشروعك القادم.
لا أطيق الانتظار لسماع ردك في التعليقات.
لصحتك!
