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

هل ترغب في إنشاء ملف نموذج الاتصال في Divi التي تظهر بعد النقر على زر؟

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

اقرأ أيضًا دليلنا على: ديفي: كيفية إنشاء تذييل لاصق بتأثير "كشف"

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

مسح

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

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

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

قم بإنشاء صفحة جديدة بتخطيط محدد مسبقًا

لنبدأ باستخدام تخطيط محدد مسبقًا من مكتبة Divi. في هذا المثال ، سنستخدم صفحة الاتصال الخاصة بـ حزمة تخطيط منتجات التجميل .

أضف صفحة جديدة إلى ملف موقع انترنت ومنحه عنوانًا ، ثم حدد الخيار استخدام Divi Builder.

سنستخدم تخطيطًا مُعد مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد "اختر التخطيط".

ابحث عن الصفحة الرئيسية للتخطيط وحددها "شركة تصميم داخلي".

يختار 'اختر التخطيط"لإضافة التخطيط إلى صفحتك.

نحن الآن جاهزون لمواصلة برنامجنا التعليمي.

قم بإنشاء قسم باستخدام وحدة الزر

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

انظر أيضا: ديفي: كيفية إنشاء تذييل مخصص

فقط قم بإضافة قسم قياسي

بعد ذلك ، حدد صفًا من عمود واحد. 

بمجرد القيام بذلك ، أضف وحدة زر إليها.

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

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

• فئة CSS: زر

قم بإنشاء نموذج اتصال خاص بإصدار الكمبيوتر الشخصي

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

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

ابدأ بإضافة قسم قياسي جديد إلى الصفحة التي تعمل عليها. في إعدادات القسم ، انتقل إلى علامة التبويب خيارات متقدمة ، وأضف "نافذة منبثقة" إلى حقل فئة 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;

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

أضف صفًا إلى عمودين

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

• استخدام عرض مزراب مخصص: نعم
• أقصى عرض: 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
• رأس خفيف خفيف: نص غامق
• محاذاة النص: غامق
• لون نص الرأس: # 002282
• حجم نص الرأس: 37 بكسل
• ارتفاع خط الرأس: 1,7 em

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

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

• محاذاة النص: الوسط
• خط النص: Arial
• حجم نص النص: 13 بكسل
• نص لون النص: # 002282
• ارتفاع سطر النص: 1,7 م

أضف وحدة "تابعنا على الشبكات الاجتماعية"

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

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

padding-left: 40%;

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

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

في هذا المثال ، اخترنا حقلين فقط ؛ الاسم والبريد الإلكتروني. 

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

• حقول لون النص: # 002282

• حقول حجم النص: # 002282
• ارتفاع خط المجال: 1,7 م

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

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

انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI

• عرض حد الزر: 2
• زر Border Radius: 3

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

أضف وحدة الملخص

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

ثم انتقل إلى علامة التبويب خيارات متقدمة واكتب "إغلاق" كفئة CSS. 

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

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

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

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

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

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

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

المقطع السابق مكرر

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

قم بتعديل كود CSS لوحدة الملخص

بدلاً من استخدام رمز سطح المكتب ، استخدم ما يلي بدلاً من ذلك:

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

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

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

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

أضف كود jQuery

آخر شيء يتعين علينا القيام به في هذا البرنامج التعليمي هو إضافة كود jQuery. أضف وحدة Code وأدخل رمز 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>

نتيجة

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

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

تحميل DIVI Now !!!

وفي الختام

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...