يعد إنشاء تأثيرات التمرير باستخدام Section Divider تقنية بسيطة وممتعة يمكن أن تضيف الحياة إلى حياتك موقع انترنت باستخدام وورد موضوع ديفي. يظل مقسم الأقسام عنصر تصميم متعدد الاستخدامات، وهو مفيد لإضافة لمسة من الإبداع إلى انتقالاتك محتويات الصفحة دي.
ولكن مع تأثيرات التمرير الخاصة بـ Divi، أصبحت فواصل الأقسام أكثر إثارة للاهتمام! الحيلة هي عزل قسم مخصص لأسلوب المقسم المفضل. بعد ذلك، يمكنك إضافة جميع أنواع الحركات التي تم إنشاؤها بالتمرير إلى القسم لإنشاء تأثيرات تمرير جميلة كخلفية للقسم محتويات الصفحة.
لنبدأ!
النتيجة المحتملة
فيما يلي نظرة عامة على التصميمات التي سنتمكن من تحقيقها بعد إكمال هذا البرنامج التعليمي.
كيفية إنشاء فواصل قسم التمرير المتحركة مع Divi
إنشاء قسمي المحتوى
أضف صف
للبدء ، أنشئ صفًا بعمود واحد في القسم الافتراضي.
هامش القسم (للاختبارات)
لأغراض الاختبار ، أضف هامشًا علويًا إلى القسم حتى يكون لدينا مساحة للتمرير. افتح إعدادات القسم وأضف ما يلي:
- الهامش العلوي: 80vh
أضف وحدة نصية
في صف العمود ، أضف وحدة نصية جديدة.
محتوى الوحدة النصية
بداخل محتويات من الجسم، أضف عنوان H2 التالي:
<h2>Section Avec Séparateurs</h2>
تصميم وحدة النص
تحت إعدادات التصميم ، قم بتحديث ما يلي:
- خط النص: Roboto
- محاذاة النص: المركز
- العنصر 2 لون النص: # bae0d8
- العنوان 2 حجم النص: 80 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي) ، 30 بكسل (الهاتف)
أضف قسم المحتوى الثاني
ضمن القسم السابق ، أضف قسمًا عاديًا جديدًا.
أضف صف
في القسم الجديد ، أضف صفًا إلى عمود.
أضف وحدة نصية
ثم أضف وحدة نصية جديدة إلى السطر.
تصميم وحدة النص
يمكننا الاحتفاظ بمحتوى الحشو الافتراضي داخل الجسم في الوقت الحالي. دعنا ننتقل إلى علامة تبويب التصميم ونقوم بتحديث ما يلي:
- خط النص: Roboto
- لون نص النص: #dddddd
- حجم النص: 16px
- ارتفاع سطر النص: 1,5 م
- محاذاة النص: اليسار
- أقصى عرض: 400 بكسل
- محاذاة الوحدة: المركز
إعدادات القسم
تأكد من إزالة لون الخلفية الافتراضي للقسم ، ولكن أعطه خلفية شفافة تمامًا. ثم يمكننا إزالة الحشوة العلوية وإضافة هامش سفلي لأغراض اختبار التمرير.
للقيام بذلك ، افتح إعدادات القسم وقم بتحديث ما يلي:
- لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- الهامش السفلي: 80vh
- الحشو: 0px
إنشاء فاصل مقطع متحرك
بمجرد اكتمال قسمين للمحتوى ، نكون على استعداد لإضافة القسم لفواصل الأقسام المتحركة.
إضافة قسم جديد
انطلق وقم بإنشاء قسم عادي جديد في منتصف مقطعي المحتوى.
سياق القسم
ومرة أخرى ، قم بإزالة لون الخلفية الافتراضي للقسم ، مع تحديث ما يلي:
- لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
تصميم قسم المقسم
لا تقلق ، سنقوم بإنشاء لون الخلفية الخاص بنا باستخدام فواصل الأقسام. للقيام بذلك ، انقر فوق علامة تبويب التصميم وأضف فاصلًا علويًا وسفليًا إلى القسم كما يلي:
تصميم مقسم فائق
- نمط الفاصل العلوي: انظر الصورة
- لون المقسم العلوي: # 524fbf
- ارتفاع المقسم العلوي: 20vw
- التكرار الأفقي للمقسم العلوي: 0,6x
- قلب المقسم العلوي: أفقي
تصميم مقسم سفلي
- نمط الفاصل السفلي: انظر الصورة
- لون الفاصل السفلي: # 524fbf
- ارتفاع المقسم السفلي: 20vw
- التكرار الأفقي للمقسم السفلي: 0,5x
- إمالة الفاصل السفلي: أفقي ورأسي
ارتفاع القسم والحشو
نظرًا لأن هذا القسم مخصص فقط لتصميم المقسم ، يمكننا التخلص من الارتفاع والحشو بحيث يتم عرض نمط المقسم فقط ولا توجد مساحة غير ضرورية بين قسمي المحتوى. قم بتحديث ما يلي:
- الارتفاع: 0px
- الحشو: 0px عالية ، 0px منخفضة
تأثيرات التمرير فاصل المقطع
ثم امنح القسم تأثيرات التمرير التالية:
تحت علامة التبويب الحركة الأفقية ...
- تنشيط الحركة الأفقية: نعم
يمكننا الاحتفاظ بالإعدادات الافتراضية لهذا الإعداد في عرض ملف مكتب .
ثم تحديث معلمات الحركة الأفقية على قرص :
- تعويض البداية: 3 (عند 0٪ من النافذة)
- متوسط الإزاحة: 0 (عند 50٪ من منفذ العرض)
- إزاحة النهاية: -3 (عند 100٪ من منفذ العرض)
تحت علامة التبويب تحجيم التأثير صعودا وهبوطا ، قم بتحديث ما يلي على مكتب ...
- مقياس البدء: 200٪ (عند 0٪ من النافذة)
- متوسط المقياس: 150٪ (عند 45٪ -65٪ من منفذ العرض)
- مقياس النهاية: 150٪ (عند 100٪ من منفذ العرض)
ثم قم بتحديث تأثير Scaling Up and Down على ملف قرص كالتالي:
- مقياس البدء: 400٪ (عند 0٪ من النافذة)
- متوسط المقياس: 300٪ (عند 45٪ -65٪ من منفذ العرض)
- مقياس النهاية: 400٪ (عند 100٪ من منفذ العرض)
يرجع السبب الرئيسي في حاجتنا إلى ضبط تأثيرات الحركة على الجهاز اللوحي (والهاتف) إلى قيم الحركة الأفقية باستخدام وحدات طول البكسل (أي 3 = 300 بكسل) ، وهي مطلق ولا تتكيف مع عرض المتصفح.
الآن دعونا نرى النتيجة النهائية لمقسم قسم الرسوم المتحركة التمرير.
الأفكار النهائية
يعد تحريك فواصل الأقسام في التمرير طريقة ممتعة وفعالة لإضفاء الحيوية على صفحة الويب. آمل أن يمنحك هذا بعض الإلهام لإثارة المزيد من التصاميم الإبداعية بنفسك.
