كيفية إضافة نموذج اتصال منسدلة إلى العنوان العام الخاص بك

عندما تقوم بإنشاء رأس مخصص لموقع الويب الخاص بك ، باستخدام أداة إنشاء السمات Divi ، ستجد نفسك تبحث عن الطريقة المثالية لإضافة CTA. إحدى الطرق التي يمكنك اتباعها هي إضافة نموذج اتصال منسدلة. سيساعدك هذا في الحفاظ على المظهر العام والشعور بالرأس نظيفًا مع الاستمرار في توفير إمكانية الاتصال دون الحاجة إلى التمرير. في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء نموذج اتصال منسدلة باستخدام Divi وبعض أكواد JQuery & CSS. ستتمكن من تنزيل ملف JSON مجانًا أيضًا!

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل قالب Global Header مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. انتقل إلى Divi Theme Builder وابدأ في إنشاء رأس عام

انتقل إلى Divi Theme Builder

ابدأ بالانتقال إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك.

بناء رأس عام

انقر فوق "إضافة رأس عام" وحدد "إنشاء رأس عام" لبدء إنشاء رأس عام مخصص.

2. بناء تصميم الرأس

إعدادات القسم

لون الخلفية

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

• لون الخلفية: #FFFFFF

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية للقسم بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

مربع الظل

قم بتطبيق ظل مربع دقيق أيضًا.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.15)

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 95٪
• العرض الأقصى: 100٪

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة بعد ذلك.

• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw

العنصر الرئيسي

وقم بمحاذاة محتوى العمود بالكامل عن طريق إضافة سطر واحد من كود CSS إلى العنصر الرئيسي للصف.

align-items: center;

العمود 2 Z الفهرس

نحن نتأكد أيضًا من احتواء العمود الثاني على قيمة فهرس z أعلى لأغراض الاستجابة.

• الفهرس Z: 12

أضف وحدة الصورة النمطية إلى العمود 1

تحميل الشعار

حان الوقت لبدء إضافة الوحدات! البدء بوحدة صورة في العمود 1. قم بتحميل شعار.

انتقام

قم بتغيير محاذاة الوحدة بعد ذلك.

• محاذاة الصورة: المركز

تحجيم

تعديل العرض أيضا.

• العرض: 3vw (كمبيوتر مكتبي) ، 5vw (جهاز لوحي) ، 7vw (هاتف)

إضافة وحدة قائمة إلى العمود 2

اختر قائمة

في العمود الثاني ، سنضيف وحدة قائمة.

تخطيط

انتقل إلى علامة تبويب تصميم الوحدة وتغيير نمط التخطيط.

• النمط: توسيط

إعدادات نص القائمة

عدّل إعدادات نص قائمة الوحدة بعد ذلك.

• خط القائمة: افتح Sans
• وزن خط القائمة: شبه عريض
• لون نص القائمة: # 000000
• حجم نص القائمة: 0.8vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• تباعد أحرف القائمة: 1 بكسل

إعدادات نص القائمة المنسدلة

بعد ذلك ، قم بتغيير لون خط القائمة المنسدلة.

• لون خط القائمة المنسدلة: # 007dff

الأيقونات

جنبًا إلى جنب مع لون رمز قائمة الهامبرغر.

• لون أيقونة قائمة همبرغر: # 007dff

أضف وحدة نصية 1 إلى العمود 3

أضف نسخة

إلى الوحدة الثالثة! أضف وحدة نصية مع نسخة من اختيارك.

لون الخلفية

أضف لون الخلفية بعد ذلك.

• لون الخلفية: # 007dff

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: Open Sans
• وزن خط النص: غامق
• لون النص: #ffffff
• حجم النص: 0.8vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• محاذاة النص: الوسط

تحجيم

قم بتعديل إعدادات تحجيم الوحدة بعد ذلك.

• العرض: 33٪
• محاذاة الوحدة: المركز

تباعد

ثم أضف بعض المساحة المتروكة العلوية والسفلية المخصصة.

• الحشوة العلوية: 0.8vw (سطح المكتب) ، 2vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 0.8vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي والهاتف)

الحدود

وأكمل إعدادات الوحدة بإضافة بعض نصف قطر الحدود.

• جميع الزوايا: 100 بكسل

أضف وحدة النص 2 إلى العمود 3

أضف رمزًا إلى Content Box

إلى الوحدة التالية ، وهي وحدة نصية أخرى. أضف رمز السهم التالي إلى مربع المحتوى: "▼".

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: Open Sans
• لون النص: # 007fff
• حجم النص: 3vw
• ارتفاع خط النص: 0em
• محاذاة النص: الوسط

فهرس Z.

نحن نقوم بزيادة فهرس z للوحدة أيضًا.

• الفهرس Z: 11

أضف وحدة نموذج الاتصال إلى العمود 3

أضف الحقول ذات العرض الكامل من الاختيار

الوحدة التالية والأخيرة التي نحتاجها في العمود الثالث هي وحدة نموذج الاتصال. أضف جميع الحقول ذات النطاق الكامل التي تحتاجها.

أضف عنوانا

استخدم عنوانًا أيضًا.

لون الخلفية

سنقوم بتغيير لون الخلفية بعد ذلك.

• لون الخلفية: # e7f2ff

إعدادات الحقول

بعد ذلك ، انتقل إلى علامة تبويب تصميم الوحدة وتغيير إعدادات الحقول.

• لون خلفية الحقول: #ffffff
• لون نص الحقول: #dddddd
• تركيز الحقول لون النص: # 007dff
• تعبئة الحقول العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• تعبئة أسفل الحقول: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• خط الحقول: Open Sans

• حجم نص الحقول: 0.7vw (سطح المكتب) ، 1.8vw (الجهاز اللوحي) ، 3vw (الهاتف)

إعدادات نص العنوان

قم بتعديل إعدادات نص العنوان بعد ذلك.

• مستوى عنوان العنوان: H3
• وزن خط العنوان: غامق
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 007dff
• حجم نص العنوان: 1vw (سطح المكتب) ، 2.5vw (جهاز لوحي) ، 3.5vw (هاتف)
• ارتفاع خط العنوان: 1.6em

إعدادات نص Captcha

جنبا إلى جنب مع إعدادات نص captcha.

• خط Captcha: Open Sans
• لون نص كلمة التحقق: # 007dff

إعدادات الزر

تواصل عن طريق تصميم الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.8vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 007dff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل

• خط الزر: فتح Sans
• وزن خط الزر: غامق

• الهامش العلوي للزر: 1vw
• ملء الزر العلوي: 1vw (سطح المكتب) ، 2vw (الجهاز اللوحي والهاتف)
• ملء الزر السفلي: 1vw (سطح المكتب) ، 2vw (الجهاز اللوحي والهاتف)
• الحشوة اليسرى للزر: 2vw (سطح المكتب) ، 7vw (الكمبيوتر اللوحي والهاتف)
• الحشوة اليمنى للزر: 2vw (سطح المكتب) ، 7vw (الكمبيوتر اللوحي والهاتف)

تباعد

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

• الحشوة العلوية: 4vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)
• الحشو السفلي: 4vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 2vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)
• الحشو الأيمن: 2vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)

الحدود

قم بتعديل إعدادات الحدود بعد ذلك.

• جميع الزوايا: 10 بكسل

العنصر الرئيسي وعنوان جهة الاتصال و Captcha CSS

أكمل إعدادات الوحدة بإضافة بعض تغييرات CSS الصغيرة إلى علامة التبويب المتقدمة.

العنصر الرئيسي:

border-radius: 20px;

عنوان الاتصال:

margin-bottom: 1vw;

كلمة التحقق:

margin-top: 1.5vw;

3. تخصيص العناصر لإنشاء نموذج اتصال عند النقر

أضف ارتفاع العمود 3

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

سطح المكتب:

height: 3vw;

لوح:

height: 5vw;

هاتف:

height: 6vw;

أضف فئة CSS إلى Button & Arrow

بعد ذلك ، سنضيف نفس فئة 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;
}

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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