عند إنشاء رأس مخصص لملف موقع انترنت، باستخدام منشئ سمات Divi ، ستجد نفسك تبحث عن الطريقة المثلى لإضافة AAL (عبارة تحث المستخدم على اتخاذ إجراء). طريقة واحدة للقيام بذلك هي إضافة نموذج الاتصال التمرير. سيساعدك هذا في الحفاظ على المظهر العام لعنوانك نظيفًا مع توفير القدرة على الدخول التواصل معك ، دون الحاجة إلى التمرير لأسفل. في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء ملف نموذج الاتصال القائمة المنسدلة باستخدام كود Divi و JQuery & CSS. ستتمكن أيضًا من تنزيل ملف JSON مجانًا!
دعونا نذهب.
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.
1. انتقل إلى Divi Theme Builder وابدأ في إنشاء رأس عالمي
انتقل إلى Divi Theme Builder
ابدأ بالانتقال إلى Divi Theme Builder في الجهة الخلفية لموقع WordPress الخاص بك.
إنشاء رأس عالمي
انقر على "إضافة رأس عالمي" وحدد "إنشاء رأس عالمي" لبدء إنشاء رأس عالمي مخصص.
2. بناء تصميم الرأس
إعدادات القسم
لون الخلفية
بمجرد دخولك إلى قالب الرأس العام ، ستلاحظ قسمًا. افتح هذا القسم واستخدم لون خلفية بيضاء.
- لون الخلفية: #FFFFFF
مباعدة
ثم أزل الحشوة العلوية والسفلية الافتراضية من القسم.
- الحشو العلوي: 0px
- الحشو السفلي: 0px
صندوق الظل
أيضا تطبيق الظل مربع خفية.
- مربع الظل طمس القوة: 50px
- لون الظل: rgba (0,0,0,0,15،XNUMX،XNUMX،XNUMX،XNUMX)
أضف سطرًا جديدًا
هيكل العمود
استمر في إضافة سطر جديد إلى القسم باستخدام بنية العمود التالي:
التحجيم
بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط وقم بتعديل معلمات تغيير الحجم كما يلي:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- معادلة ارتفاع العمود: نعم
- العرض: 95٪
- أقصى عرض: 100 ٪
مباعدة
ثم أضف الحشو العلوي والسفلي المخصص.
- الحشو العلوي: 1vw
- الحشو السفلي: 1vw
العنصر الرئيسي
وقم بمحاذاة محتوى العمود بالكامل عن طريق إضافة سطر واحد من كود CSS إلى العنصر الرئيسي للصف.
align-items: center;
مؤشر العمود Z 2
نتأكد أيضًا من أن العمود الثاني يحتوي على قيمة مؤشر z أعلى للأغراض التفاعلية.
- مؤشر Z: 12
أضف وحدة صورة إلى العمود 1
تنزيل الشعار
حان الوقت لبدء إضافة الوحدات! ابدأ بوحدة صورة في العمود 1. قم بتحميل شعار.
انحياز
ثم قم بتغيير محاذاة الوحدة النمطية.
- محاذاة الصورة: المركز
التحجيم
أيضا تغيير العرض.
- العرض: 3vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي) ، 7vw (الهاتف)
إضافة وحدة نمطية القائمة إلى العمود 2
اختر القائمة
في العمود الثاني ، سنضيف وحدة قائمة.
توفير
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير نمط التخطيط.
- نمط: توسيط
إعدادات نص القائمة
ثم قم بتغيير إعدادات النص في قائمة الوحدة النمطية.
- خط القائمة: فتح بدون
- وزن خط القائمة: نصف جريئة
- لون نص القائمة: # 000000
- حجم نص القائمة: 0.8vw (سطح المكتب) ، 2vw (قرص) ، 3vw (هاتف)
- تباعد خطاب القائمة: 1px
إعدادات نص القائمة المنسدلة
ثم قم بتغيير لون الخط في القائمة المنسدلة.
- لون سطر القائمة المنسدلة: # 007 dff
الرموز
مع لون رمز القائمة همبرغر.
- لون رمز قائمة همبرغر: # 007dff
إضافة الوحدة النمطية للنص 1 إلى عمود 3
أضف نسخة
دعنا ننتقل إلى الوحدة الثالثة! أضف وحدة نصية بنسخة من اختيارك.
لون الخلفية
ثم أضف لون الخلفية.
- لون الخلفية: # 007dff
إعدادات النص
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:
- خط النص: فتح بلا
- وزن الخط للنص: غامق
- لون النص: #ffffff
- حجم النص: 0.8vw (سطح المكتب) ، 2vw (قرص) ، 3vw (الهاتف)
- محاذاة النص: المركز
التحجيم
ثم قم بتعديل معلمات تغيير حجم الوحدة.
- العرض: 33٪
- محاذاة الوحدة: المركز
مباعدة
ثم أضف الحشو العلوي والسفلي المخصص.
- الحشو العلوي: 0.8vw (سطح المكتب) ، 2vw (الجهاز اللوحي والهاتف)
- الحشو السفلي: 0.8vw (مكتب) ، 2vw (الكمبيوتر اللوحي والهاتف)
الحدود
واستكمال المعلمات وحدة عن طريق إضافة دائرة نصف قطرها الحدود.
- جميع الزوايا: 100 بكسل
إضافة الوحدة النمطية للنص 2 إلى عمود 3
أضف رمزًا إلى منطقة المحتوى
دعنا ننتقل إلى الوحدة التالية ، وهي وحدة نصية أخرى. أضف السهم التالي في منطقة المحتوى: "▼".
إعدادات النص
قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات النص وفقًا لذلك:
- خط النص: فتح بلا
- لون النص: # 007fff
- حجم النص: 3vw
- ارتفاع سطر النص: 0em
- محاذاة النص: المركز
مؤشر Z
نقوم أيضًا بزيادة فهرس z للوحدة.
- مؤشر Z: 11
إضافة الوحدة النمطية للنموذج جهة الاتصال إلى العمود 3
يمكنك الآن إضافة أ نموذج الاتصال فقط في الجزء السفلي من وحدة النص التي تحتوي على السهم. هذه الوحدة سهلة الاستخدام للغاية، لذا ستحتاج إلى تخصيص الحقول التي تريد جعلها مرئية.
3. تخصيص العناصر لإنشاء نموذج الاتصال في نقرة واحدة
أضف ارتفاع العمود 3
بمجرد أن تصبح جميع التعديلات في مكانها الصحيح ، فقد حان الوقت لإنشاء التأثير. تتمثل الخطوة الأولى نحو تحقيق النتيجة المرجوة في فتح الإعدادات في العمود 3 وإضافة ارتفاع مخصص سريع الاستجابة في علامة التبويب "خيارات متقدمة".
مكتب:
height: 3vw;
قرص:
height: 5vw;
الهاتف:
height: 6vw;
أضف فئة CSS إلى الزر والسهم
بعد ذلك ، سنضيف فئة CSS نفسها إلى أول وحدتين نصيتين في العمود 3.
- فئة CSS: عرض-التواصل
إضافة فئة CSS إلى نموذج الاتصال
سنحتاج أيضًا إلى فئة CSS مخصصة لوحدة نموذج الاتصال.
- فئة CSS: التواصل-نموذج الوحدة
إخفاء وحدة نموذج الاتصال
تابع عن طريق إضافة سطر إضافي من كود CSS إلى العنصر الرئيسي لوحدة نموذج الاتصال. سيسمح لنا هذا بإخفاء الوحدة قبل النقر فوقها.
display: none;
إضافة وحدة نمطية للتعليمات البرمجية إلى العمود 3 مع JQuery و CSS code
ولإنشاء وظيفة النقر ، سنحتاج إلى بعض كود JQuery. سنستخدم أيضًا كود CSS المخصص. أضف وحدة رمز جديدة إلى العمود 2 مع الرمز. تأكد من وضع كود JQuery بين علامات البرنامج النصي ورمز CSS بين علامات النمط.
jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});});
.show-contact {cursor: pointer;} .et-menu>li {padding-left: 0.7vw !important;padding-right: 0.7vw !important;}
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
مكتب
ما يجب تذكره
في هذه المقالة ، أوضحنا لك كيفية إضافة نموذج اتصال منسدلة إلى رأسك المخصص. إنها طريقة رائعة لبدء العمل مبكرًا.
