كيفية إنشاء نافذة منبثقة لزاوية نموذج جهة اتصال ثابتة مع خيارات تحجيم Divi

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

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

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

معاينة

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

سطح المكتب

متحرك

1. قم بتحميل الصفحة المقصودة لحزمة تخطيط مقوم العظام

أضف صفحة جديدة

ابدأ بإنشاء صفحة جديدة. بمجرد تسمية الصفحة ونشرها ، قم بالتبديل إلى Visual Builder.

تحميل الصفحة المقصودة لحزمة تخطيط تقويم العمود الفقري

قم بتحميل الصفحة المقصودة لحزمة تخطيط العمود الفقري بعد ذلك. على الرغم من أننا سنستخدم هذا التصميم المحدد ، إلا أنه يمكنك جعل التقنية تعمل على أي صفحة تعمل عليها.

2. لنبدأ في إعادة التكوين!

إضافة قسم جديد إلى أسفل الصفحة

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

لون الخلفية

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

• لون الخلفية: rgba (255،255،255،0)

تحجيم

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

• العرض: 37٪ (كمبيوتر مكتبي) ، 95٪ (كمبيوتر لوحي) ، 100٪ (هاتف)
• محاذاة القسم: حق

تباعد

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

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

فئة CSS

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

• فئة CSS: قسم مفتوح

فهرس Z الافتراضي

للتأكد من ظهور القسم أعلى محتوى الصفحة بالكامل ، سنزيد فهرس القسم z في إعدادات الرؤية.

• الفهرس Z: 99

مؤشر تحوم Z.

أضف نفس قيمة الفهرس z عند التمرير أيضًا.

• الفهرس Z: 99

أضف الصف رقم 1

هيكل العمود

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

أضف الوحدة النمطية Blurb

اترك مربعات المحتوى فارغة

الوحدة الأولى والوحيدة التي نحتاجها في هذا الصف هي Blurb Module. تأكد من ترك العنوان ومربعات المحتوى فارغة.

حدد أيقونة

حدد رمزًا بعد ذلك.

لون الخلفية

تغيير لون الخلفية دعاية مغالى فيها أيضا.

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

إعدادات الرمز

انتقل إلى علامة تبويب التصميم وقم بتطبيق إعدادات الرمز التالية:

• لون الأيقونة: # ff5f24
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 46 بكسل (سطح المكتب) ، 30 بكسل (الجهاز اللوحي) ، 25 بكسل (الهاتف)

تحجيم

قم بعد ذلك بتعديل إعدادات التحجيم عبر أحجام الشاشات المختلفة.

• العرض: 140 بكسل (سطح المكتب) ، 105 بكسل (جهاز لوحي) ، 80 بكسل (هاتف)
• محاذاة الوحدة: صحيح

تباعد

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

• الحشوة العلوية: 50 بكسل (سطح المكتب) ، 35 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• الحشو السفلي: 20 بكسل (سطح المكتب) ، 10 بكسل (جهاز لوحي) ، 0 بكسل (هاتف)

الحدود

لإنشاء شكل دائري ، سنحتاج إلى إضافة قيمة عالية لكل زاوية في إعدادات الحدود. نحن نستخدم "500 بكسل".

مربع الظل

سنضيف أيضًا ظلًا مربعًا دقيقًا للسماح للشكل الدائري بالظهور.

• مربع قوة طمس الظل: 80 بكسل

حيوية

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

• الرسوم المتحركة للرمز: لا توجد رسوم متحركة

فئة CSS

أخيرًا وليس آخرًا ، أضف فئة CSS إلى الوحدة النمطية Blurb. لاحقًا في هذا المنشور ، سنستخدم فئة CSS هذه لجعل وظيفة النقر تعمل.

• فئة CSS: فتح الاتصال

أضف الصف رقم 2

هيكل العمود

إلى الصف الثاني! استخدم هيكل العمود التالي:

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لون خلفية أبيض.

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

الحدود

أضف نصف قطر حد "39 بكسل" لكل زاوية من الزوايا التالية.

مربع الظل

وأكمل إعدادات الصف بإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل

إضافة نموذج الاتصال

عناصر

الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة نموذج الاتصال. بمجرد إضافة الوحدة ، قم بتعطيل captcha في إعدادات العناصر.

• إظهار كلمة التحقق: لا

مجالات

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

• لون خلفية الحقول: rgba (0،126،255،0.13)

زر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: #FFFFFF
• لون خلفية الزر: # ff5f24
• عرض حد الزر: 2 بكسل
• لون حدود الزر: rgba (0،0،0،0)
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: كارلا
• وزن خط الزر: غامق
• زر أعلى الحشوة: 14 بكسل
• الحشوة السفلية للزر: 14 بكسل
• الحشوة اليسرى للزر: 20 بكسل
• الحشوة اليمنى للزر: 20 بكسل

تباعد

وأضف بعض قيم الحشو المخصصة.

• الحشوة العلوية: 30 بكسل
• الحشو السفلي: 30 بكسل
• الحشوة اليسرى: 40 بكسل
• الحشوة اليمنى: 40 بكسل

أضف وحدة التعليمات البرمجية

أدخل كود JQuery

بمجرد الانتهاء من وحدة نموذج الاتصال ، حان الوقت لجعل وظيفة النقر تعمل! أضف Code Module إلى الصف الثاني في القسم وأدخل الأسطر التالية من كود JQuery بين علامات البرنامج النصي كما ترى في شاشة الطباعة أدناه:

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

تغيير إعدادات القسم

ارتفاع

تابع عن طريق فتح إعدادات القسم. قم بتغيير الارتفاع عبر أحجام الشاشات المختلفة.

• الارتفاع: 190 بكسل (سطح المكتب) ، 140 بكسل (الجهاز اللوحي) ، 125 بكسل (الهاتف)

العنصر الأساسي الافتراضي

أضف بعض كود CSS المخصص إلى العنصر الرئيسي للقسم التالي لجعله ثابتًا في الزاوية اليمنى السفلية.

bottom: 0;
right: 0;
position: fixed;

تحوم العنصر الرئيسي

تأكد من إضافة الموضع الثابت إلى عنصر التمرير الرئيسي أيضًا.

position: fixed;

أضف كود CSS المخصص إلى الصفحة

افتح إعدادات الصفحة

لإكمال تأثير التبديل ، سنحتاج إلى إضافة القليل من كود CSS إلى الصفحة أيضًا. افتح إعدادات الصفحة.

أضف CSS مخصص

انتقل إلى علامة التبويب خيارات متقدمة وأضف الأسطر التالية من كود CSS:

.section-open-active {
height: auto !important;
}

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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