كيفية مزامنة توسيع النسخ عند التمرير مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل النسخة الموسعة على Scroll Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء تصميم القسم

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

لون الخلفية

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

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Livvic
• وزن خط النص: غامق
• لون النص: # f1f1f1
• حجم النص: 170 بكسل (سطح المكتب) ، 100 بكسل (جهاز لوحي) ، 70 بكسل (هاتف)
• ارتفاع خط النص: 1em

• طول ظل النص الأفقي: 0.06em
• الطول العمودي لظل النص: 0em
• لون ظل النص: rgba (79،79،79،0.74)
• محاذاة النص: وسط (سطح المكتب) ، يسار (كمبيوتر لوحي وهاتف)

استنساخ وحدة النص مرتين

استنساخ وحدة النص مرتين.

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

قم بتعديل محتوى كل من الوحدات النمطية النصية المكررة.

أضف الصف رقم 2

هيكل العمود

أضف صفًا آخر أسفل الصف السابق مباشرةً باستخدام بنية العمود التالية:

تحجيم

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

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

تباعد

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

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

الحدود

أضف حدًا علويًا بعد ذلك.

• عرض الحد العلوي: 1 بكسل
• لون الحد العلوي: # 4c4c4c

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

تباعد

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

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

الحدود

استخدم حدًا صحيحًا أيضًا.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # 4c4c4c

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

إضافة محتوى

تابع عن طريق إضافة Blurb Module إلى العمود مع بعض المحتوى الذي تختاره.

حدد أيقونة

حدد أيقونة من اختيارك بعد ذلك.

إعدادات الرمز

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

• لون الأيقونة: # a3acff
• محاذاة الصورة / الرمز: يسار

إعدادات نص العنوان

تعديل إعدادات نص العنوان أيضا.

• خط العنوان: Livvic
• وزن خط العنوان: غامق
• لون نص العنوان: # c1c1c1
• حجم نص العنوان: 35 بكسل

• ظل نص العنوان أفقي الطول: 0.06em
• ظل نص العنوان عمودي الطول: 0em
• لون ظل نص العنوان: rgba (79،79،79،0.74)

إعدادات النص الأساسي

نحن نجري بعض التغييرات على إعدادات النص الأساسي أيضًا.

• لون النص الأساسي: # 878787
• حجم النص الأساسي: 16 بكسل
• ارتفاع خط الجسم: 2.4em

دعاية عنوان CSS

وسننشئ بعض المساحة حول العنوان بسطر واحد من كود CSS الذي سنضيفه إلى العنوان الدعاية في علامة التبويب المتقدمة.

margin: 30px 0 40px 0;

استنساخ العمود بأكمله مرتين

بمجرد الانتهاء من العمود بأكمله ووحدة Blurb Module فيه ، يمكنك استنساخ العمود بأكمله مرتين.

قم بإزالة حدود العمود 3

افتح إعدادات العمود 3 وقم بإزالة الحد الأيمن.

• عرض الحد الأيمن: 0 بكسل

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

وقم بتغيير محتوى Blurb Module لكل نسخة مكررة.

2. إضافة تأثيرات التمرير

الجزء

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

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

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

وحدة النص # 1

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

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

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 0٪
• عتامة متوسطة: 0٪ (عند 55٪)
• إنهاء التعتيم: 100٪ (عند 71٪)

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

استخدم تأثير التحجيم والتصغير أيضًا.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 0٪ (عند 47٪)
• مقياس متوسط: 100٪ (عند 56٪)
• مقياس النهاية: 100٪ (عند 64٪)

توسيع وحدة النص # 1 تأثيرات التمرير

تابع عن طريق توسيع تأثيرات التمرير إلى وحدتي النص الأخريين في العمود.

• إلى: كافة النصوص
• طوال الوقت: هذا العمود

وحدة دعاية وإعلان # 1

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

بعد ذلك ، سنضيف تأثير التمرير لأعلى ولأسفل إلى Blurb Module في العمود 1.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء:
  • سطح المكتب: 0٪
  • الجهاز اللوحي والهاتف: 100٪
• مقياس متوسط: 100٪ (عند 33٪)
• مقياس النهاية: 100٪ (عند 64٪)

تمديد Blurb Module # 1 Scroll Effects

أكمل البرنامج التعليمي بتوسيع تأثير التمرير ليشمل جميع وحدات Blurb النمطية في الصف وبذلك تكون قد انتهيت!

• إلى: جميع الدعاية
• طوال الوقت: هذا الصف

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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