لا تزال فواصل الأقسام عنصر تصميم شائعًا في Divi. هناك العديد من أنماط الفواصل بما في ذلك بعض الخيارات المفيدة التي تجعل من السهل إضافة انتقالات وخلفيات فريدة إلى صفحتك.
في هذا البرنامج التعليمي، سنستخدم مقسمات الأقسام بشكل مختلف قليلاً. يتيح لك Divi ضبط ارتفاع وتخطيط كل مقسم. يتيح لنا ذلك وضع الفواصل فوق مناطق أو محتوى معين في القسم. باستخدام خيار التحويم لارتفاع المقسم، يمكننا إضافة تأثيرات تحويم فريدة تكشف عن محتويات مخفية جزئيا. يعمل هذا بشكل رائع لجذب الانتباه إلى عبارة تحث المستخدم على اتخاذ إجراء أو زر معين تريد أن ينقر عليه الأشخاص. آخر انقر.
دعونا نبدأ.
نتيجة العينة
ما تحتاجه للبدء
للبدء ، تحتاج إلى ما يلي:
- Le موضوع ديفي مثبت ونشط
- تم إنشاء صفحة جديدة للبناء من البداية على الواجهة الأمامية (مُنشئ بصري)
- بعض الصور الوهمية لاستخدامها في التصميم. سأستخدم بعض الصور بخلفيات شفافة من حزمة عصير متجر تخطيط .
بعد ذلك ، أنت مستعد للبدء!
تنفيذ تصميم تأثير التمرير على ارتفاع مقسم القسم في Divi
إنشاء القسم والخط
لنبدأ بإنشاء قسم منتظم يحتوي على صف من عمودين.
قبل إضافة وحدة نمطية ، افتح إعدادات القسم وقم بتحديث ما يلي:
التدرج الخلفي الأيسر: #73ba57
التدرج الخلفي الأيمن: #2a4c23
العرض: 80٪
أقصى عرض: 1080px
محاذاة القسم: المركز
ولكن يمكنك أيضًا اختيار نظام الألوان الذي تريده وفقًا لصورتك. مخطط الألوان الخاص بي هو: # fff200 - # e09900 في التدرج.
إضافة عنوان القسم
لإضافة عنوان القسم، قم بإنشاء وحدة نصية وقم بتحديث ملف محتويات من الجسم برأس h2 التالي:
العصير
ثم قم بتحديث الرسم كما يلي:
العنوان 2 الخط: Lato
عنوان 2px حجم النص: 80px
عنوان 2 تباعد الأحرف: -5px
الهامش: -50px في الأعلى ، -40px في الأسفل
Z- الفهرس: -1
سيسمح الهامش المخصص والفهرس z للنص بالجلوس خلف الصورة التي سنضيفها في الخطوة التالية.
إضافة صورة
ضمن وحدة النص مع العنوان في العمود 1 ، أضف وحدة صورة. ثم قم بتحميل صورة بخلفية شفافة. أنا أستخدم صورة من Juice Shop Layout Pack بحجم 240 بكسل × 300 بكسل.
اضبط محاذاة الصورة للمركز.
إضافة عبارة تحث المستخدم على اتخاذ إجراء في العمود 2
في عمود 2 ، أضف مكالمة إلى وحدة الإجراءات.
أضف عنوان URL لرابط الزر للتأكد من عرض الزر.
خلفية CTA ونمط العنوان
ثم قم بتحديث معلمات التصميم التالية:
لون الخلفية: #ffffff
لون النص:
عنوان الخط: لاتو
عنوان سياسة الوزن: الثقيلة
عنوان نمط الخط: TT
العنوان حجم النص: 18px
أسلب زر CTA
قم بتحديث تصميم الزر كما يلي:
لون نص الزر: #ffffff
لون خلفية الزر: # e09900
عرض حدود الزر: 0 بكسل
تصميم الحدود CTA
ثم أضف حدًا لتأطير الوحدة كما يلي:
عرض الحد: 10px
لون الحدود: rgba (224,145,0,0.25)
تمت إضافة تأثير تمرير ارتفاع الحاجز للكشف عن عبارة الحث على اتخاذ إجراء
الآن ، حان الوقت لإضافة تأثير التمرير على ارتفاع قسم القسم للكشف عن عبارة الحث على اتخاذ إجراء. للقيام بذلك ، نحتاج أولاً إلى إنشاء فواصل الأقسام الخاصة بنا.
إضافة الفاصل العلوي
افتح معلمات القسم والفاصل العلوي مع المعلمات التالية.
نمط الفاصل العلوي: انظر لقطة الشاشة لون الحاجز العلوي: # 73ba57 ارتفاع الحاجز العلوي: 70٪ (افتراضي) ، 0٪ (مرسوم)
قلب الفاصل العلوي: أفقي
لاحظ أن ارتفاع الفاصل يبدأ بارتفاع افتراضي يبلغ 70٪ ، ثم ينتقل إلى ارتفاع 0٪ عند التمرير.
إضافة الفاصل السفلي
ثم أضف فاصلًا أدنى مشابهًا للقسم مع المعلمات التالية.
نمط الفاصل العلوي: انظر لقطة الشاشة لون الحاجز العلوي: # 73ba57 ارتفاع الحاجز العلوي: 70٪ (افتراضي) ، 0٪ (مرسوم)
قلب الفاصل العلوي: أفقي
تخطيط المقسم: في الجزء العلوي من القسم محتويات
يبدأ فاصل الخلفية هذا أيضًا بارتفاع 70٪ ويتغير إلى 0٪ عند التمرير. ومع ذلك ، نظرًا لأنه تم تعيين خيار التخطيط الفاصل في الجزء العلوي من المحتوى ، فإن فاصل القسم يخفي الجزء السفلي من عبارة الحث على اتخاذ إجراء في العمود 1. ثم ، عند التمرير ، يتم إخفاء الجزء المتبقي من تم الكشف عن الدعوة إلى العمل.
تحقق من النتيجة حتى الآن.
تمت إضافة تأثير تحويم ظل الصندوق لانتقال وتصميم فريد
للحصول على انتقال وتصميم فريد من نوعه ، يمكننا إضافة تأثير تحويم ظل الصندوق الذي سيحدث في نفس الوقت مع تأثير تحويم ارتفاع الحاجز. للقيام بذلك ، أضف ظل المربع التالي إلى القسم.
Box Shadow: انظر لقطة الشاشة
موضع الظل الأفقي للموضع: 0px
الموضع العمودي لصندوق الظل: 0px
قوة انتشار الظل في المربع: 0px (افتراضي) ، 150px (تحويم)
لون الظل المربع: #73ba57
إبطاء مدة الانتقال
لخطوة أخيرة ، دعنا نبطئ مدة الانتقال.
مدة الانتقال: 700ms
نتيجة نهائية
هذه هي النتيجة النهائية على سطح المكتب.
بناءً على ما فعلناه أعلاه ، ستتمكن من تخصيص العرض على الهاتف المحمول والكمبيوتر اللوحي.
الأفكار النهائية
نأمل أن يكون هذا البرنامج التعليمي قد أعطاك بعض الإلهام لإنشاء تأثيرات تحوم على ارتفاع مقسم أقسام فريدة للكشف عن المحتوى في الواقع ، يمكن أن يكون ضبط ارتفاع الحاجز المتحرك عنصر تصميم رائعًا. ويجب أن تساعدك عينات التصميم على بدء الاستكشاف والتصاميم الخاصة بك.
آمل أن أسمع منك في التعليقات.
لصحتك!
