هل تريد إنشاء نموذج اتصال في Divi يظهر بعد النقر فوق الزر؟
Dans ce tutoriel Divi, nous allons vous montrer comment créer un formulaire de contact qui apparaît après avoir cliqué sur un bouton en n'utilisant rien d'autre que Divi, du code jQuery et du code CSS.
اقرأ أيضًا دليلنا على: ديفي: كيفية إنشاء تذييل لاصق بتأثير "كشف"
C'est un excellent moyen de garder les visiteurs de votre site web concentrés sur l'action à laquelle ils se sont engagés en cliquant sur un bouton. Cela ne les amène pas à une page différente.
مسح
Ci-dessous, vous pouvez jeter un coup d'œil rapide sur ce que nous allons créer, puis vous lancer dans le tutoriel !
معاينة على جهاز الكمبيوتر
معاينة على الهاتف والجهاز اللوحي
قم بإنشاء صفحة جديدة بتخطيط محدد مسبقًا
لنبدأ باستخدام تخطيط محدد مسبقًا من مكتبة Divi. في هذا المثال ، سنستخدم صفحة الاتصال الخاصة بـ حزمة تخطيط منتجات التجميل .
أضف صفحة جديدة إلى موقع الويب الخاص بك وأعطها عنوانًا ، ثم حدد الخيار استخدام Divi Builder.
سنستخدم تخطيطًا مُعد مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد "اختر التخطيط".
ابحث عن الصفحة الرئيسية للتخطيط وحددها "شركة تصميم داخلي".
يختار 'اختر التخطيط"لإضافة التخطيط إلى صفحتك.
نحن الآن جاهزون لمواصلة برنامجنا التعليمي.
قم بإنشاء قسم باستخدام وحدة الزر
La première chose que nous devrons faire est d'ajouter une nouvelle section où nous plaçons le bouton qui permettra au formulaire de contact de s'afficher.
انظر أيضا: ديفي: كيفية إنشاء تذييل مخصص
فقط قم بإضافة قسم قياسي
بعد ذلك ، حدد صفًا من عمود واحد.
بمجرد القيام بذلك ، أضف وحدة زر إليها.
Vous pouvez personnaliser le bouton comme vous le souhaitez, mais vous devez vous assurer que l'URL du bouton commence par '#' suivi d'autre chose. Vous ne pouvez pas simplement le laisser vide ou utiliser uniquement le caractère '#'. En ajoutant '#' et du texte, la page ne bougera pas une fois que vous aurez cliqué sur le bouton. Si vous le laissez vide, la page se rafraîchira au clic. Et si vous n'utilisez que '#', vous serez envoyé en haut de la page.
La prochaine chose importante que nous devrons faire est d'attribuer une classe CSS au bouton. Nous utiliserons cette classe CSS plus tard dans cet article dans le code jQuery pour nous assurer que le formulaire de contact apparaît après avoir cliqué. La classe que nous devrons attribuer au bouton est simplement "button".
- فئة CSS: زر
قم بإنشاء نموذج اتصال خاص بإصدار الكمبيوتر الشخصي
La prochaine chose que nous devrons faire est de créer le formulaire de contact de bureau qui apparaîtra une fois que quelqu'un aura cliqué sur le bouton que nous avons créé dans la partie précédente de cet article. Plus tard dans cet article, nous vous montrerons également comment créer la version mobile.
إضافة قسم قياسي جديد
Commencez par ajouter une nouvelle section standard à la page sur laquelle vous travaillez. Dans les paramètres de la section, accédez à l'onglet Avancé ajoutez "popup" au champ Classe 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;
En ajoutant ceci, nous nous assurons que la section occupe tout l'onglet. Vous pouvez ajuster la couleur d'arrière-plan dans le code CSS pour créer la superposition d'arrière-plan souhaitée. Dans ce cas, nous utilisons la couleur noire avec une certaine transparence. Dans ce même onglet, ajoutez également la ligne de code CSS suivante à l'élément principal :
display: none;
La dernière chose que nous devrons faire dans l'onglet Avancé est de désactiver la section sur le téléphone et la tablette dans la sous-catégorie Visibilité.
أضف صفًا إلى عمودين
Continuez en ajoutant une ligne à deux colonnes et accédez à l'onglet الطراز.
- استخدام عرض مزراب مخصص: نعم
- أقصى عرض: 1291 بكسل
أدخل معلمات كل عمود.
Modifiez les marges internes (Sommet, Gauche et Droite) ainsi qu'il suit :
- الهامش الداخلي (أعلى ، يسار ، يمين): 30 بكسل
Terminez en allant dans l'onglet Avancé. Dans l'élément principal, ajoutez les lignes de code CSS suivantes :
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
أضف أول وحدة نصية
Une fois que vous avez apporté toutes les modifications à la section et à la ligne, il est temps d'ajouter les différents modules que vous souhaitez afficher.
La première chose que nous ajouterons est le titre qui apparaît. Commencez par ajouter un nouveau module Texte à la première colonne de la ligne, écrivez le texte dans l'onglet محتويات et passez à l'onglet الطراز.
Dans l'onglet Style, nous avons utilisé les paramètres suivants pour la sous-catégorie Texte :
- خط الرأس: Lobster
- رأس خفيف خفيف: نص غامق
- محاذاة النص: غامق
- لون نص الرأس: # 002282
- حجم نص الرأس: 37 بكسل
- ارتفاع خط الرأس: 1,7 em
أضف وحدة نصية ثانية
Continuez en ajoutant un nouveau module Texte et tapez le texte que vous souhaitez voir apparaître dans l'onglet Contenu. Passez à l'onglet Style et appliquez les paramètres suivants à la sous-catégorie Texte :
- محاذاة النص: الوسط
- خط النص: Arial
- حجم نص النص: 13 بكسل
- نص لون النص: # 002282
- ارتفاع سطر النص: 1,7 م
Ajouter un module 'Suivez-nous sur les réseaux sociaux'
Ensuite, nous allons également ajouter le module 'Suivez-nous sur les réseaux sociaux' à la première colonne. Dans ce cas, nous avons choisi trois icônes de réseaux sociaux ; Facebook, Twitter et Instagram.
La dernière chose que nous devrons faire est d'ajouter une marge interne (Gauche) à ce module dans l'onglet Avancé. Ajoutez la ligne de code CSS suivante à l'élément principal :
padding-left: 40%;
إضافة وحدة نموذج الاتصال
ثم يمكننا الانتقال إلى العمود الثاني في الصف. في هذا العمود ، أول شيء سنضعه هو وحدة نموذج الاتصال.
Pour cet exemple, nous n'avons choisi que deux champs ; le nom et l'e-mail.
Une fois que vous avez ajouté le module Formulaire de contact, accédez à l'onglet Style du module Formulaire de contact et apportez les modifications suivantes à la sous-catégorie Champs :
- حقول لون النص: # 002282
- حقول حجم النص: # 002282
- ارتفاع خط المجال: 1,7 م
في علامة التبويب نفسها ، قم بإجراء التغييرات التالية على فئة الأزرار الفرعية:
- استخدام الأنماط المخصصة للزر: نعم
- زر حجم النص: 20
- لون نص الزر: #FFFFFF
- زر الخلفية: # 0086c4
انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI
- عرض حد الزر: 2
- زر Border Radius: 3
Passez à l'onglet Avancé et ajoutez une marge de 5 %.
أضف وحدة الملخص
Une autre chose que nous devrons ajouter à la deuxième colonne est un module Résumé. La seule chose pour laquelle nous avons besoin de ce module est l'icône de sortie en haut à droite de la fenêtre contextuelle. Choisissez l'icône suivante dans la liste des icônes et laissez toutes les autres choses vides.
Ensuite, allez dans l'onglet Avancé et tapez "close" comme classe CSS.
Dans ce même onglet, ajoutez les lignes de code suivantes à l'élément principal de la sous-catégorie CSS personnalisée :
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
قم بتطبيق تعبئة متدرجة على الخط
Enfin, nous allons ajouter un joli fond dégradé à la ligne. Ouvrez les paramètres et appliquez les modifications suivantes à l'option d'arrière-plan dégradé :
- لون التدرج الأول: #FFFFFF
- لون التدرج الثاني: # 0c71c3
- نوع التدرج: خطي
- اتجاه التدرج: 124 درجة
- موقف البداية: 50٪
- المركز النهائي: 50٪
قم بإنشاء نموذج اتصال للجهاز اللوحي والهاتف
الآن بعد أن أنشأنا إصدار الكمبيوتر الشخصي ، ستعمل نسخة الجهاز اللوحي والهاتف بشكل أسرع. معظم الوحدات التي استخدمناها لإصدار الكمبيوتر الشخصي هي نفسها بالنسبة لإصدار الهاتف المحمول.
المقطع السابق مكرر
Au lieu de le désactiver pour le téléphone et la tablette, comme nous l'avons fait pour la version PC, nous allons désactiver la version PC dans la sous-catégorie Visibilité dans les paramètres du module :
قم بتعديل كود CSS لوحدة الملخص
Au lieu d'utiliser le code pour le bureau, utilisez plutôt ce qui suit :
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
قم بتطبيق تعبئة متدرجة على الخط
بالنسبة لإصدار الهاتف المحمول ، نستخدم إعدادات مختلفة لخلفية التدرج للخط:
- لون التدرج الأول: #FFFFFF
- لون التدرج الثاني: # 0c71c3
- نوع التدرج: خطي
- اتجاه التدرج: 180 درجة
- موقف البداية: 40٪
- المركز النهائي: 40٪
أضف كود jQuery
La dernière chose que nous devrons faire pour ce tutoriel est d'ajouter le code jQuery. Ajouter un module Code et insérer le code JQuery suivant :
<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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...