Divi: كيفية الكشف عن المحتوى عند المرور فوق مقسم القسم

هل ترغب في معرفة كيفية الكشف محتويات عند المرور فوق فاصل القسم في Divi ?

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

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

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

مسح

تحميل DIVI Now !!!

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

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

تصميم تأثير تحوم مقسم القسم في Divi

إنشاء القسم والخط

أنشئ قسمًا عاديًا بصف من عمودين.

قبل إضافة وحدة نمطية ، افتح إعدادات القسم وقم بتحديث ما يلي:

تدرج الخلفية (يسار): # 73ba57
تدرج الخلفية (يمين): # 2a4c23
العرض: 80٪
العرض الأقصى: 1 بكسل
محاذاة القسم: المركز

أضف عنوان القسم

لإضافة عنوان القسم ، أنشئ وحدة نصية وأدخل النص التالي:

<h2>The Juice</h2>

بعد ذلك ، قم بتحديث التصميم على النحو التالي:

الخط: Lato
حجم النص: 80 بكسل
تباعد الأحرف: -5 بكسل
الهامش: -50 بكسل (أعلى) ، -40 بكسل (أسفل)
مؤشر Z: -1

سيسمح الهامش المخصص وفهرس z للنص بالبقاء خلف الصورة التي سنضيفها في الخطوة التالية.

إضافة صورة

ضمن وحدة النص مع العنوان في العمود 1 ، أضف وحدة صورة. ثم قم بتحميل صورة بخلفية شفافة. نستخدم صورة من حزمة التخطيط محل عصير 240 × 300 بكسل.

ضبط محاذاة الصورة في المركز.

أضف وحدة "الحث على اتخاذ إجراء" في العمود 2

في العمود 2 ، أضف وحدة Call To Action.

أضف عنوان URL لرابط الزر لضمان عرض الزر.

تصميم خلفية الحث على الشراء ونص العنوان

بعد ذلك ، قم بتحديث إعدادات التصميم التالية:

الخلفية: #ffffff
لون النص: غامق
خط العنوان: Lato
وزن خط العنوان: ثقيل
نمط الخط: TT
حجم نص العنوان: 18 بكسل

تخصيص زر الحث على الشراء

قم بتحديث تصميم الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #ffffff
• لون خلفية الزر: # 73ba57
• عرض الحدود: 0 بكسل

تخصيص حدود CTA Module

ثم أضف حدًا لتأطير الوحدة على النحو التالي:

عرض الحدود: 10 بكسل
لون الحدود: rgba (115,186,87,0.15،XNUMX،XNUMX،XNUMX)

تمت إضافة تأثير التمرير إلى الفاصل للكشف عن وحدة "Call To Action"

حان الوقت الآن لإضافة تأثير التمرير إلى مقسم القسم للكشف عن وحدة "Call To Action". للقيام بذلك ، نحتاج أولاً إلى إنشاء فواصل الأقسام الخاصة بنا.

اقرأ أيضا: Divi: كيفية الكشف عن المحتوى عند التمرير فوق علامات التبويب

إضافة الفاصل العلوي

افتح معلمات القسم والفاصل العلوي مع المعلمات التالية.

نمط الفاصل العلوي: انظر الصورة
لون الفاصل العلوي: # 73ba57
ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم)
الوجه الفاصل العلوي: أفقي

لاحظ أن ارتفاع الفاصل يبدأ بارتفاع افتراضي 70٪ ، ثم يتغير إلى ارتفاع 0٪ عند التمرير.

تمت إضافة الفاصل السفلي

ثم أضف فاصلًا أدنى مشابهًا للقسم مع المعلمات التالية.

• نمط الحاجز السفلي: انظر الصورة
• لون الحاجز السفلي: # 73ba57
• ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم)
• فاصل الوجه: أفقي
• الترتيب: فوق محتوى القسم

يبدأ هذا الحاجز السفلي أيضًا بارتفاع 70٪ وينخفض ​​إلى 0٪ عند التحويم. ومع ذلك ، نظرًا لأن خيار ترتيب التقسيم قد تم تعيينه أعلى المحتوى ، فإن فاصل القسم يخفي الجزء السفلي من وحدة "Call To Action" في العمود 1. ثم عند التمرير ، يتم الكشف عن بقية الوحدة.

تحقق من النتيجة حتى الآن.

تحميل DIVI Now !!!

تمت إضافة تأثير تحويم ظل الصندوق لانتقال وتصميم فريد

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

• Box Shadow: انظر لقطة الشاشة
• الوضع الأفقي: 0 بكسل
• الوضع الرأسي: 0 بكسل
• قوة انتشار الظل المربع: 0 بكسل (افتراضي) ، 150 بكسل (تحوم)
• لون الظل: # 73ba57

إبطاء مدة الانتقال

لخطوة أخيرة ، دعنا نبطئ مدة الانتقال.

مدة الانتقال: 700 مللي ثانية

نتيجة نهائية

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نرى النتيجة النهائية.

تحميل DIVI Now !!!

وفي الختام

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

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

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

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

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

...