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

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل تخطيط تأثيرات التمرير المجانية للحد مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لنبدأ في إعادة التكوين!

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

إضافة قسم عادي جديد

ابدأ بإضافة قسم عادي جديد إلى الصفحة التي تعمل عليها.

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات إلى الصف حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات الحجم وفقًا لذلك:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 90٪
• العرض الأقصى: 1580 بكسل

إعدادات العمود 1

الصورة الخلفية

بعد ذلك ، افتح إعدادات العمود 1 وقم بتحميل صورة "divi-column-background" التي يمكنك العثور عليها في مجلد التنزيل في بداية هذا البرنامج التعليمي.

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز

تباعد

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

• الحشوة العلوية: 100 بكسل
• الحشو السفلي: 100 بكسل

الحدود

أضف بعض الزوايا الدائرية أيضًا.

• جميع الزوايا: 20 بكسل

مربع الظل

سنستخدم ظل الصندوق الخفيف أيضًا.

• مربع الظل الرأسي: 51 بكسل
• مربع قوة طمس الظل: 46 بكسل
• لون الظل: rgba (0،0،0،0.08)

فيضانات

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف وحدة النص رقم 1 إلى العمود 1

أضف محتوى H3

حان الوقت لإضافة الوحدات ، بدءًا من الوحدة النمطية الأولى للنص في العمود 1. أضف بعض محتوى H3 من اختيارك.

إعدادات نص H3

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H3 وفقًا لذلك:

• خط العنوان 3: بوبينز
• وزن خط العنوان 3: ثقيل
• لون نص العنوان 3: rgba (0،0،0،0.15)
• حجم نص العنوان 3: 200 بكسل (سطح المكتب) ، 150 بكسل (جهاز لوحي) ، 100 بكسل (هاتف)
• العنوان 3 تباعد الأحرف: -12 بكسل (سطح المكتب) ، -10 بكسل (الجهاز اللوحي) ، -7 بكسل (الهاتف)

تباعد

لزيادة عرض الوحدة الخاصة بنا ، سنضيف بعض الهامش الأيسر والأيمن السلبي إلى إعدادات التباعد.

• الهامش الأيسر: -50٪
• الهامش الأيمن: -50٪

الحركة الأفقية

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

• تمكين الحركة الأفقية: نعم
• تعويض البدء: 5 (عند 45٪)
• تعويض متوسط: 0 (عند 75٪)
• إزاحة النهاية: -4
• مشغل تأثير الحركة: منتصف العنصر

أضف وحدة النص رقم 2 إلى العمود 1

إضافة محتوى

إلى الوحدة التالية ، وهي وحدة نصية أخرى. أضف بعض محتوى الوصف من اختيارك.

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: Open Sans
• لون النص: # 969696
• حجم النص: 18 بكسل (سطح المكتب) ، 16 بكسل (جهاز لوحي) ، 14 بكسل (هاتف)
• ارتفاع خط النص: 2.4em

تباعد

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

• الهامش العلوي: 100 بكسل (سطح المكتب) ، 60 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• الهامش السفلي: 200 بكسل (سطح المكتب) ، 180 بكسل (جهاز لوحي) ، 100 بكسل (هاتف)
• الهامش الأيسر: 100 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• الهامش الأيمن: 100 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)

أضف وحدة الزر إلى العمود 1

أضف نسخة

الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي وحدة الأزرار. أدخل نسخة من اختيارك.

إعدادات الزر

قم بتغيير إعدادات زر الوحدة كما يلي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 24 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 18 بكسل (هاتف)
• لون نص الزر: # 000000
• لون التدرج 1: # f2f2f2
• لون التدرج 2: #ffffff
• نوع التدرج: خطي
• اتجاه التدرج: 270 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: -1 بكسل
• خط الزر: بوبينز
• وزن خط الزر: متوسط
• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار
• إظهار الرمز فقط عند التمرير فوق الزر: لا

تباعد

ثم أضف بعض قيم التباعد المخصصة.

• الهامش السفلي: 50 بكسل
• الحشوة العلوية: 50 بكسل
• الحشو السفلي: 50 بكسل

موقع

وأكمل إعدادات الوحدة عن طريق تغيير موضع وحدة الأزرار.

• الموقف: مطلق
• الموقع: أسفل اليسار

أضف وحدة الصورة النمطية إلى العمود 2

تحميل الصور

في العمود الثاني ، الوحدة الوحيدة التي نحتاجها هي وحدة صورة. قم بتحميل صورة من اختيارك.

تحجيم

بعد ذلك ، قم بفرض عرض كامل في إعدادات تغيير الحجم.

• فرض عرض كامل: نعم

الحدود

عدّل إعدادات الحدود عبر أحجام الشاشات المختلفة بعد ذلك.

• أعلى اليسار: 0 بكسل (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)
• أعلى اليمين: 20 بكسل
• أسفل اليسار: 0 بكسل (سطح المكتب) ، 20 بكسل (كمبيوتر لوحي وهاتف)
• أسفل اليمين: 20 بكسل

موقع

وأعد وضع الوحدة على سطح المكتب. أعده إلى الوضع الافتراضي على أحجام الشاشات الأصغر.

• الموضع: مطلق (سطح المكتب) ، افتراضي (الجهاز اللوحي والهاتف)
• الموقع: المركز (سطح المكتب)

صف استنساخ عدة مرات كما هو مطلوب

بمجرد الانتهاء من الصف وجميع وحداته ، يمكنك استنساخ الصف بأكمله حتى عدد المرات الذي تريده.

تغيير المحتوى والصورة

قم بتغيير النسخة والصورة وفقًا لذلك ، وتكون قد انتهيت!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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