هل تريد معرفة كيفية إظهار المحتوى عند التمرير فوق فاصل القسم في Divi؟
Les séparateurs de section continuent d'être un élément de conception Divi populaire. Il existe de nombreux styles de séparateurs parmi lesquels choisir avec des options utiles qui facilitent l'ajout de transitions et d'arrière-plans uniques à votre page.
Dans ce tutoriel, nous allons utiliser les séparateurs de section un peu différemment. Divi vous permet d'ajuster la hauteur et la disposition de chaque séparateur. Cela nous permet de positionner des séparateurs au-dessus de certaines zones ou du contenu de la section.
En utilisant l'option de survol pour la hauteur du séparateur, nous pouvons ajouter des effets de survol uniques qui révèlent un contenu partiellement masqué. Cela fonctionne très bien pour attirer l'attention sur un appel à l'action ou un bouton particulier sur lequel vous souhaitez que les visiteurs cliquent.
مسح
تحميل DIVI Now !!!
قم بإنشاء صفحة جديدة باستخدام Divi Builder
من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder
ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
Conception de l'effet de survol du séparateur de section dans Divi
إنشاء القسم والخط
أنشئ قسمًا عاديًا بصف من عمودين.
Avant d'ajouter un module, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
تدرج الخلفية (يسار): # 73ba57
تدرج الخلفية (يمين): # 2a4c23
العرض: 80٪
العرض الأقصى: 1 بكسل
محاذاة القسم: المركز
أضف عنوان القسم
لإضافة عنوان القسم ، أنشئ وحدة نصية وأدخل النص التالي:
<h2>The Juice</h2>
بعد ذلك ، قم بتحديث التصميم على النحو التالي:
الخط: Lato
حجم النص: 80 بكسل
تباعد الأحرف: -5 بكسل
الهامش: -50 بكسل (أعلى) ، -40 بكسل (أسفل)
مؤشر Z: -1
La marge personnalisée et l'index z permettront au texte de rester derrière l'image que nous ajouterons à l'étape suivante.
Ajout de l'image
ضمن وحدة النص مع العنوان في العمود 1 ، أضف وحدة صورة. ثم قم بتحميل صورة بخلفية شفافة. نستخدم صورة من حزمة التخطيط محل عصير 240 × 300 بكسل.
Le réglage de l'alignement de l'image au centre.
Ajouter un module "Call To Action" dans la colonne 2
في العمود 2 ، أضف وحدة Call To Action.
Ajoutez une URL de lien de bouton pour vous assurer que le bouton s'affiche.
Style de l'arrière-plan CTA et du texte du titre
بعد ذلك ، قم بتحديث إعدادات التصميم التالية:
الخلفية: #ffffff
لون النص: غامق
خط العنوان: Lato
وزن خط العنوان: ثقيل
نمط الخط: TT
حجم نص العنوان: 18 بكسل
تخصيص زر الحث على الشراء
قم بتحديث تصميم الزر على النحو التالي:
- استخدام الأنماط المخصصة للزر: نعم
- لون نص الزر: #ffffff
- لون خلفية الزر: # 73ba57
- عرض الحدود: 0 بكسل
تخصيص حدود CTA Module
ثم أضف حدًا لتأطير الوحدة على النحو التالي:
عرض الحدود: 10 بكسل
لون الحدود: rgba (115,186,87,0.15،XNUMX،XNUMX،XNUMX)
Ajout de l'effet de survol au séparateur pour révéler le module "Call To Action"
Il est maintenant temps d'ajouter l'effet de survol au séparateur de section pour révéler le module "Call To Action". Pour ce faire, nous devons d'abord créer nos séparateurs de section.
اقرأ أيضا: Divi: كيفية الكشف عن المحتوى عند التمرير فوق علامات التبويب
إضافة الفاصل العلوي
افتح معلمات القسم والفاصل العلوي مع المعلمات التالية.
Top Divider Style : voir capture d'écran
لون الفاصل العلوي: # 73ba57
ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم)
الوجه الفاصل العلوي: أفقي
لاحظ أن ارتفاع الفاصل يبدأ بارتفاع افتراضي 70٪ ، ثم يتغير إلى ارتفاع 0٪ عند التمرير.
تمت إضافة الفاصل السفلي
ثم أضف فاصلًا أدنى مشابهًا للقسم مع المعلمات التالية.
- Bottom Divider Style : voir capture d'écran
- لون الحاجز السفلي: # 73ba57
- ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم)
- فاصل الوجه: أفقي
- الترتيب: فوق محتوى القسم
Ce diviseur inférieur commence également avec une hauteur de 70 % qui passe à 0 % en survol. Cependant, étant donné que l'option d'arrangement du séparateur est définie au-dessus du contenu, le séparateur de section masque la partie inférieure du module "Call To Action" dans la colonne 1. Ensuite, au survol, le reste du module est révélé.
Découvrez le résultat jusqu'à présent.
تحميل DIVI Now !!!
Ajout d'un effet de survol d'ombre de boîte pour une transition et un design uniques
Pour une transition et un design uniques au survol, nous pouvons ajouter un effet de survol d'ombre de boîte qui aura lieu simultanément avec l'effet de survol du séparateur. Pour ce faire, ajoutez l'ombre de la boîte suivante à la section.
- Box Shadow : voir capture d'écran
- الوضع الأفقي: 0 بكسل
- الوضع الرأسي: 0 بكسل
- قوة انتشار الظل المربع: 0 بكسل (افتراضي) ، 150 بكسل (تحوم)
- لون الظل: # 73ba57
إبطاء مدة الانتقال
لخطوة أخيرة ، دعنا نبطئ مدة الانتقال.
مدة الانتقال: 700 مللي ثانية
نتيجة نهائية
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نرى النتيجة النهائية.
تحميل DIVI Now !!!
الخاتمة
Nous espérons que cet article vous a donné un peu d'inspiration pour créer des effets de survol du séparateur de section uniques pour révéler le contenu.
في الواقع ، يمكن أن يكون ضبط مقسم التمرير عنصر تصميم رائعًا بمفرده. بالإضافة إلى ذلك ، يجب أن تساعدك تصميمات العينات على بدء الاستكشاف والتصميمات الخاصة بك.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...