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

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

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

هيا بنا نبدأ.

نظرة خاطفة

قم بتنزيل تأثيرات التمرير على ارتفاع مقسم القسم مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

ما تحتاجه للبدء

للبدء ، ستحتاج إلى ما يلي:

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. عدد قليل من الصور الوهمية لاستخدامها في التصميم. سأستخدم بعض الصور ذات الخلفيات الشفافة من حزمة تخطيط متجر العصير.

بعد ذلك ، أنت جاهز للبدء!

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

إنشاء القسم والصف

أولاً ، لنقم بإنشاء قسم عادي بصف من عمودين.

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

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

إضافة عنوان القسم

لإضافة عنوان القسم ، قم بإنشاء وحدة نصية وتحديث محتوى النص برأس h2 التالي:

<h2>The Juice</h2>

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

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

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

إضافة الصورة

ضمن وحدة النص مع العنوان في العمود 1 ، أضف وحدة صورة. ثم قم بتحميل صورة ذات خلفية شفافة. أنا أستخدم صورة من Juice Shop Layout Pack بحجم 240 × 300 بكسل.

ضبط محاذاة الصورة إلى المركز.

إضافة دعوة إلى العمل في العمود 2

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

أضف عنوان URL لرابط الزر للتأكد من ظهور الزر.

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

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

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

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

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

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

تصميم حدود CTA

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

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

إضافة تأثير التمرير على ارتفاع الحاجز للكشف عن دعوة للعمل

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

إضافة الحاجز العلوي

افتح إعدادات القسم والمفتاح العلوي بالإعدادات التالية.

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

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

إضافة الحاجز السفلي

بعد ذلك ، أضف حاجزًا سفليًا مشابهًا إلى القسم بالإعدادات التالية.

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

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

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

إضافة تأثير Box Shadow Hover لانتقال وتصميم فريد

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

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

إبطاء الفترة الانتقالية

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

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

النتيجة النهائية

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

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

ها هو التصميم النهائي للجهاز اللوحي والهاتف.

تجربة أنماط فواصل الأقسام الأخرى للحصول على تصميمات فريدة تمامًا في ثوانٍ

مع هذا الإعداد في مكانه ، يمكنك بسهولة تجربة أنماط ومجموعات مختلفة من الفواصل!

فيما يلي بعض الأشياء الأخرى التي قمت بتضمينها في التنزيل المجاني.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!