كيفية إنشاء نموذج اتصال عند النقر مع Divi

في هذا البرنامج التعليمي Divi ، سوف نوضح لك كيفية إنشاء نموذج اتصال يظهر بعد النقر فوق زر (كتراكب) باستخدام أي شيء آخر غير Divi وبعض كود jQuery ورمز CSS.

هذه طريقة رائعة للحفاظ على تركيز زوار موقعك على الإجراء الذي التزموا به عن طريق النقر فوق الزر. لا يأخذهم ذلك إلى صفحة مختلفة ولكنه يقفلهم في هذا الإجراء حتى يتم ذلك.

يمكنك أدناه إلقاء نظرة سريعة على ما سننشئه ثم الانتقال إلى البرنامج التعليمي!

النتيجة على سطح المكتب

النتيجة على الهاتف والكمبيوتر اللوحي

إلهام

مصدر إلهام هذا المنشور يأتي من طلب تعليق وموجود على B3multimedia. على الرغم من أنهم يستخدمون طريقة أخرى لإنجاز هذا العمل ، إلا أن لديهم أيضًا طريقة رائعة لإنشاء نموذج اتصال عند النقر. ألق نظرة على النتيجة:

إنشاء قسم مع وحدة الزر

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

حسنًا ، دعنا ندخل في هذا البرنامج التعليمي!

اشترك في قناتنا على اليوتيوب

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

يمكنك تصميم الزر كيفما تريد ولكن عليك التأكد من أن عنوان URL للزر يبدأ بـ "#" متبوعًا بشيء آخر. لا يمكنك تركه فارغًا أو استخدام الحرف "#" فقط. بإضافة "#" وبعض النصوص ، لن تتحرك الصفحة بمجرد النقر فوق الزر. إذا تركته فارغًا ، فسيتم تحديث الصفحة عند النقر. وإذا كنت تستخدم "#" فقط ، فسيتم إرسالك إلى أعلى الصفحة.

الشيء المهم التالي الذي يتعين علينا القيام به هو تعيين فئة CSS للزر. سنستخدم فئة CSS هذه لاحقًا في هذا المنشور في كود jQuery للتأكد من ظهور نموذج الاتصال بعد النقر. الفصل الذي سنحتاج إلى تخصيصه للزر هو ببساطة "زر".

قم بإنشاء نموذج اتصال سطح المكتب عند النقر

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

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

إضافة قسم قياسي جديد

ابدأ بإضافة قسم قياسي جديد إلى الصفحة التي تعمل عليها. انتقل إلى علامة التبويب خيارات متقدمة في القسم الذي أضفته للتو وأضف "نافذة منبثقة" إلى حقل فئة CSS. قم بالتمرير لأسفل علامة التبويب نفسها وضع الأسطر التالية من كود CSS في الحقل Before من فئة CSS الفرعية المخصصة:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

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

display: none;

آخر شيء يتعين علينا القيام به في علامة التبويب خيارات متقدمة هو تعطيل القسم الموجود على الهاتف والجهاز اللوحي في فئة الرؤية الفرعية.

إضافة صف عمودين

تابع عن طريق إضافة صف من عمودين وانتقل إلى علامة التبويب تصميم. ابدأ بتعديل عرض الصف في الفئة الفرعية Sizing. في هذا المثال ، استخدمنا عرضًا مخصصًا يبلغ 1291 بكسل.

قم بالتمرير لأسفل علامة تبويب التصميم واستخدم "30 بكسل" للحشو العلوي واليسار واليمني لكلا العمودين داخل فئة التباعد الفرعية.

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

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

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

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

• اتجاه النص: الوسط
• خط النص: Lobster
• نمط الخط: جريء
• حجم خط النص: 37
• لون النص: # 002282
• ارتفاع خط النص: 1.7em

أضف وحدة نصية ثانية

تابع عن طريق إضافة وحدة نصية جديدة واكتب النص الذي تريده أن يظهر في علامة التبويب المحتوى. انتقل إلى علامة التبويب التصميم وقم بإجراء الإعدادات التالية على فئة النص الفرعية:

• اتجاه النص: الوسط
• خط النص: Arial
• حجم خط النص: 13
• لون النص: # 002282
• ارتفاع خط النص: 1.7em

إضافة وحدة متابعة وسائل التواصل الاجتماعي

للمضي قدمًا ، سنضيف وحدة متابعة الوسائط الاجتماعية إلى العمود الأول أيضًا. في هذه الحالة ، اخترنا ثلاثة رموز اجتماعية ؛ Facebook و Twitter و Instagram. بمجرد إضافة هذه الرموز الاجتماعية في علامة التبويب "المحتوى" ، قم بتغيير شكل الرابط إلى "دائرة" في فئة الرموز الفرعية.

آخر شيء يتعين علينا القيام به هو إضافة حشوة يسرى إلى هذه الوحدة في علامة التبويب خيارات متقدمة. أضف السطر التالي من كود CSS إلى العنصر الرئيسي:

padding-left: 40%;

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

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

• حجم خط حقل النموذج: 15
• لون نص حقل النموذج: # 002282
• ارتفاع خط حقل النموذج: 1.7em

ضمن علامة التبويب نفسها ، قم بإجراء التغييرات التالية على فئة الأزرار الفرعية:

• استخدام نمط مخصص للزر: نعم
• حجم نص الزر: 20
• لون نص الزر: #FFFFFF
• لون خلفية الزر: # 0086c4
• عرض حد الزر: 2
• نصف قطر الزر: 3

انتقل إلى علامة التبويب خيارات متقدمة وأضف حشوة علوية بنسبة 5٪.

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

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

الانتقال ، انتقل إلى علامة التبويب خيارات متقدمة واكتب "إغلاق" كفئة CSS. ضمن علامة التبويب نفسها ، أضف سطور التعليمات البرمجية التالية إلى العنصر الرئيسي لفئة CSS الفرعية المخصصة:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

تطبيق خلفية متدرجة على الصف

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

• لون التدرج الأول: #FFFFFF
• لون التدرج الثاني: # 0c71c3
• نوع التدرج: خطي
• اتجاه التدرج: 124 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

قم بإنشاء نموذج اتصال على الجهاز اللوحي والهاتف بالنقر فوق

الآن بعد أن أنشأنا إصدار سطح المكتب ، سيصبح إصدار الجهاز اللوحي والهاتف أسرع كثيرًا. معظم الوحدات التي استخدمناها لإصدار سطح المكتب هي نفسها بالنسبة لإصدار الهاتف المحمول. تبدو النتيجة النهائية على الهاتف المحمول كما يلي:

إضافة قسم قياسي جديد

ابدأ بإضافة قسم قياسي آخر. سيحتاج هذا القسم إلى نفس إعدادات القسم الذي أنشأناه من قبل. أضف "popup" إلى فئة CSS وأضف الأسطر التالية من كود CSS إلى الحقل Before:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

أضف السطر التالي من كود CSS إلى العنصر الرئيسي أيضًا:

display: none;

بدلاً من تعطيله للهاتف والجهاز اللوحي ، كما فعلنا مع إصدار سطح المكتب ، سنقوم بتعطيله على سطح المكتب في فئة الرؤية الفرعية:

أضف صف عمود واحد

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

سنحتاج أيضًا إلى التأكد من إضافة الأسطر التالية من كود CSS إلى العنصر الرئيسي في فئة CSS الفرعية المخصصة:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

استنساخ وحدة نموذج النص واتباع وسائل التواصل الاجتماعي والاتصال

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

استنساخ وحدة Blurb وتغيير كود CSS في علامة تبويب متقدمة

يمكنك أيضًا استنساخ الوحدة النمطية Blurb التي تم استخدامها لإصدار سطح المكتب ولكن يجب أن يكون هناك تغيير بسيط في كود CSS. بدلاً من استخدام الرمز لسطح المكتب ، استخدم ما يلي بدلاً من ذلك:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

تأكد من استخدام فئة CSS "الإغلاق" لوحدة Blurb Module أيضًا.

تطبيق خلفية متدرجة على الصف

بالنسبة لإصدار الهاتف المحمول ، نستخدم إعدادات مختلفة لخلفية التدرج للصف:

• لون التدرج الأول: #FFFFFF
• لون التدرج الثاني: # 0c71c3
• نوع التدرج: خطي
• اتجاه التدرج: 180 درجة
• موقف البداية: 40٪
• موضع النهاية: 40٪

أضف كود jQuery إلى خيارات النسق

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

للقيام بذلك ، انتقل إلى WordPress Dashboard> Divi> Theme Options> Integration> والصق الأسطر التالية من كود jQuery داخل رأس موقع الويب الخاص بك:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

نتيجة

إذا اتبعت المنشور ، خطوة بخطوة ، فيجب أن تكون قادرًا على تحقيق النتيجة التالية على سطح المكتب:

والنتيجة التالية على الأجهزة اللوحية والهواتف:

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة La1n / shutterstock.com