كيفية إنشاء قسم بطل جميل يصطدم بالعمود في التمرير مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط قسم البطل المصطدم بالعمود مجانًا

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

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

تنزيل مجاني

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

تحميل

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

إعادة إنشاء تخطيط قسم البطل

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

لون الخلفية

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

• لون الخلفية: # f4f2f7

تباعد

قم بإزالة الحشوة الافتراضية العلوية والسفلية للقسم أيضًا.

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

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

هيكل العمود

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

تحجيم

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

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

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

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

فيضانات

وإخفاء فائض الصف.

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

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

تباعد

بعد ذلك ، افتح إعدادات العمود 1 وأضف بعض قيم المساحة المتروكة المخصصة.

• الحشوة العلوية: 15vw
• الحشو السفلي: 10vw
• الحشو الأيسر: 5vw
• الحشوة اليمنى: 5vw

فهرس Z.

قم بزيادة الفهرس z الخاص بالعمود أيضًا.

• الفهرس Z: 12

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

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

تابع عن طريق فتح إعدادات العمود 2 وتحميل صورة خلفية من اختيارك.

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

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

أضف محتوى H1

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

إعدادات نص H1

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

• خط العنوان: الظلال في الضوء
• وزن خط العنوان: غامق
• لون نص العنوان: # 000000
• حجم نص العنوان: 6vw (Desktop) ، 11vw (Tablet) ، 13vw (Phone)
• تباعد حروف العنوان: -2 بكسل
• ارتفاع خط العنوان: 1.2em

تباعد

أضف بعض الهامش العلوي أيضًا.

• الهامش العلوي: 10vw

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

إضافة محتوى

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

إعدادات النص

قم بتعديل إعدادات نص الوحدة كما يلي:

• خط النص: Open Sans
• لون النص: # 1e1e1e
• حجم النص: 0.9vw (سطح المكتب) ، 1.9vw (جهاز لوحي) ، 3vw (هاتف)
• ارتفاع خط النص: 2.4em

تباعد

وأضف بعض قيم الهامش المخصصة عبر أحجام الشاشات المختلفة.

• الهامش العلوي: 4vw (سطح المكتب) ، 8vw (جهاز لوحي) ، 12vw (هاتف)
• الهامش السفلي: 4vw (سطح المكتب) ، 8vw (كمبيوتر لوحي) ، 12vw (هاتف)

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

أضف نسخة

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

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل

• خط الزر: فتح Sans

تباعد

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

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 7vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 7vw (هاتف)

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: الظلال في الضوء
• لون النص: rgba (0،0،0،0.25)
• حجم النص: 9vw (سطح المكتب) ، 14vw (الجهاز اللوحي والهاتف)
• تباعد حروف النص: -3 بكسل
• ارتفاع خط النص: 1em
• محاذاة النص: وسط (سطح المكتب) ، يسار (كمبيوتر لوحي وهاتف)

تباعد

أضف بعض قيم المساحة المتروكة المخصصة أيضًا.

• الحشوة العلوية: 5vw (سطح المكتب) ،
• الحشو السفلي: 60vw (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 5vw (الجهاز اللوحي والهاتف)

تطبيق Scroll Animations

الجزء

التحجيم لأعلى ولأسفل

بمجرد وضع جميع وحداتك في مكانها الصحيح ، حان الوقت لتطبيق تأثيرات التمرير! افتح إعدادات القسم أولاً واستخدم تأثير التحجيم التالي لأعلى ولأسفل:

• تمكين Sclaing Up and Down
• مقياس البدء: 100٪ (عند 49٪)
• مقياس متوسط:
  • سطح المكتب: 70٪ (عند 100٪)
  • الجهاز اللوحي والهاتف: 100٪ (بنسبة 100٪)
• مقياس النهاية:
  • سطح المكتب: 70٪
  • الجهاز اللوحي والهاتف: 100٪

العمود 1

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

استمر بفتح إعدادات العمود 1 واستخدم تأثير الحركة الأفقية التالي:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0
• تعويض متوسط:
  • سطح المكتب: 0 (بنسبة 65٪)
  • الجهاز اللوحي والهاتف: 0 (بنسبة 93٪)
• إزاحة النهاية:
  • سطح المكتب: 6
  • الجهاز اللوحي والهاتف: 0

التحجيم لأعلى ولأسفل

قم بتطبيق تأثير التحجيم لأعلى ولأسفل على العمود أيضًا.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء:
  • سطح المكتب: 10٪
  • الجهاز اللوحي والهاتف: 100٪
• مقياس متوسط:
  • سطح المكتب: 90٪
  • الجهاز اللوحي والهاتف: 100٪
• مقياس النهاية: 100٪

العمود 2

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

بعد ذلك ، افتح إعدادات العمود 2 واستخدم إعدادات الحركة الأفقية التالية:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0
• تعويض متوسط:
  • سطح المكتب: 0 (بنسبة 53٪)
  • الجهاز اللوحي والهاتف: 0 (بنسبة 56٪)
• إزاحة النهاية:
  • سطح المكتب: -6 (بنسبة 53٪)
  • الجهاز اللوحي والهاتف: 0 (بنسبة 100٪)

يتلاشى للداخل والخارج

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

• تمكين التلاشي للداخل والخارج: نعم
• يبدأ التعتيم: 100٪ (عند 47٪)
• متوسط ​​التعتيم:
  • سطح المكتب: 0٪ (عند 47٪)
  • الجهاز اللوحي والهاتف: 100٪ (بنسبة 47٪)
• إنهاء التعتيم:
  • سطح المكتب: 0٪
  • الجهاز اللوحي والهاتف: 100٪

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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