كيفية إنشاء أقسام تحوم مع إعدادات Divi الجديدة للتحجيم والتجاوز

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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط أقسام التحويم مجانًا

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

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

تنزيل مجاني

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

تحميل

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

مقاربة

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

1. أضف القسم الأول إلى صفحتك

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

2. أضف صفًا جديدًا يتضمن عنوان قسم

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

3. ضبط باقي محتويات القسم (أضف العديد من الصفوف والوحدات كما تريد)

إن عناصر التصميم التي تتبع عناوين الأقسام متروكة لك تمامًا. يمكنك جعل القسم طويلًا أو قصيرًا كما تريد والاستفادة من أي نوع من أنماط التصميم.

4. قم بتعديل الحد الأقصى للارتفاع الافتراضي للقسم وتحوم حوله

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

5. إخفاء الفائض العمودي

جزء مهم آخر من هذه التقنية هو إخفاء الفائض الرأسي. بمجرد تعيين أقصى ارتفاع افتراضي للقسم الخاص بك يكون أصغر من الارتفاع الأولي للقسم ، سيتم إنشاء تجاوز. للتأكد من عدم ظهور الفائض ، سيتعين عليك التأكد من إخفاؤه في إعدادات الرؤية الخاصة بالقسم.

5. كرر الخطوات لجميع الأقسام على الصفحة

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

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

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

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

لون الخلفية الافتراضي

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

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

لون الخلفية تحوم

قم بتغيير لون الخلفية هذا عند التمرير.

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

أضف الصف رقم 1

هيكل العمود

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

أضف وحدة نصية

أضف محتوى H2

أضف وحدة نصية إلى صفك الجديد التالي. أضف بعض نسخ H2 جنبًا إلى جنب مع الرمز "" الذي يشير إلى أن شيئًا ما سيأتي بعد ذلك.

إعدادات نص H2

انتقل إلى علامة تبويب التصميم الخاصة بالوحدة النمطية وقم بتغيير إعدادات نص H2.

• خط العنوان 2: Trebuchet
• وزن خط العنوان 2: غامق للغاية
• العنوان 2 محاذاة النص: اليسار
• لون نص العنوان 2: # ff0f3b
• حجم نص العنوان 2: 100 بكسل (سطح المكتب) ، 80 بكسل (جهاز لوحي) ، 60 بكسل (هاتف)
• العنوان 2 تباعد الأحرف: -5 بكسل

إضافة وحدة المقسم

الرؤية

الوحدة الثانية والأخيرة التي نحتاجها في هذا الصف هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز" في إعدادات الرؤية.

• إظهار الحاجز: نعم

اللون

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

• اللون: # ff0f3b

تحجيم

قم بتعديل إعدادات تغيير الحجم للوحدة أيضًا.

• وزن الحاجز: 2 بكسل
• العرض: 14٪

أضف الصف رقم 2

هيكل العمود

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

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

إضافة محتوى

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

إعدادات النص

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

• اتجاه النص: ضبط

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

إضافة محتوى

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

إعدادات النص

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

• اتجاه النص: ضبط

إضافة إعدادات التحجيم إلى القسم

التحجيم الافتراضي

بمجرد الانتهاء من القسم الخاص بك ، حان الوقت لتحقيق تأثير التمرير. افتح إعدادات القسم وقم بتغيير الحد الأقصى للارتفاع عبر أحجام الشاشات المختلفة:

• أقصى ارتفاع: 300 بكسل (سطح المكتب) ، 280 بكسل (جهاز لوحي) ، 260 بكسل (هاتف)

تحوم التحجيم

قم بتمكين خيار التمرير على أقصى ارتفاع أيضًا وأضف قيمة عالية بما يكفي لتغطية جميع العناصر عبر أحجام الشاشات المختلفة. تعمل هذه القيمة على التأكد من ظهور جميع العناصر الخاصة بك دون تجاوز الحجم الأولي لحاوية القسم.

• أقصى ارتفاع: 5000 بكسل

تجاوز عمودي

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

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

الانتقالات

لإنشاء انتقال سلس ، نقوم أيضًا بتغيير إعدادات الانتقالات في علامة التبويب المتقدمة.

• مدة الانتقال: 800 مللي ثانية
• تأخير الانتقال: 500 مللي ثانية

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

بمجرد الانتهاء من إنشاء قسم التمرير الأول ، يمكنك استنساخه عدة مرات كما تريد.

تغيير عناوين القسم

بالطبع ، سترغب في تغيير عناوين أقسام التكرارات.

تغيير ألوان نص H2

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

• لون نص العنوان 2: # c4c4c4

تغيير ألوان الحاجز

جنبًا إلى جنب مع ألوان الفاصل المصاحبة للوحدات النمطية النصية.

• اللون: # c4c4c4

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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