3 طرق مفيدة لاستخدام خيارات تجاوز السعة في Divi

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

هيا بنا نبدأ.

فهم خيارات Divi Overflow

تتيح لك خيارات تجاوز Divi ضبط خاصية تجاوز css لعنصر ما على إحدى القيم التالية:

1. الافتراضي - القيمة الافتراضية مرئية (انظر أدناه).
2. مرئي - سيظل المحتوى الفائض مرئيًا ولن يتم قصه عند التمديد خارج المربع. نظرًا لأن هذا هو الإعداد الافتراضي في Divi ، فنادراً ما تحتاج إلى تحديده.
3. التمرير - سيتم إخفاء المحتوى الفائض ، ولكن سيتمكن المستخدمون من التمرير عبر المحتوى المخفي إما عموديًا أو أفقيًا.
4. مخفي - سيتم إخفاء المحتوى الفائض خارج المربع (بدون القدرة على التمرير)
5. تلقائي - سيشغل هذا الخيار وظيفة التمرير عند الضرورة (على سبيل المثال ، يمتد المحتوى إلى ما وراء المربع). سيكون هذا مفيدًا للتصاميم ذات الارتفاع أو العرض المحدد الذي يحتاج إلى إمكانات التمرير على المتصفحات الأصغر.

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

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

مرئي تجاوز السعة (افتراضي)

في هذا المثال ، يظل المحتوى الذي تم وضعه خارج حاوية الصف مرئيًا ، وهو الإعداد الافتراضي لجميع العناصر في Divi.

إخفاء الفائض

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

التمرير الفائض

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

على سبيل المثال ، هذه وحدة نصية بارتفاع 400 بكسل. يمتد محتوى وحدة النص إلى ما وراء وحدة النص ولكنه يظل مرئيًا بشكل افتراضي.

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

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

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

3 طرق مفيدة لاستخدام خيارات تجاوز Divi في Divi

# 1 استخدام Overflow Hidden لقص المحتوى الفائض للتصاميم الفريدة

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

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

الحشو المخصص: 12vw أعلى ، 12vw أسفل

ثم قم بتحديث إعدادات الصف كما يلي:

العرض: 80vw
العرض الأقصى: 80vw
المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل
Box Shadow: انظر لقطة الشاشة
مربع قوة طمس الظل: 80 بكسل

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

قم أولاً بإضافة عنوان h2 في مربع المحتوى على النحو التالي:

<h2>Overflow</h2>

ثم قم بتحديث إعدادات التصميم على النحو التالي:

خط العنوان 2: Lato
وزن خط العنوان 2: غامق
نمط خط العنوان 2: TT
العنوان 2 محاذاة النص: الوسط
لون نص العنوان 2: #dddddd
حجم نص العنوان 2: 15vw
العنوان 2 تباعد الأحرف: 0.1em
ظل النص في العنوان 2: انظر لقطة الشاشة
لون ظل النص في العنوان 2: rgba (0،0،0،0.05)

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

الهامش: -6w أعلى ، -10vw يسار ، -10vw يمين

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

المحتوى:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(بالمناسبة ، تعتبر مقتطفات التعليمات البرمجية مثل هذه طريقة رائعة للاستفادة من خيار التمرير الزائد.)

خط النص: لاتو
محاذاة نص النص: صحيح
حجم نص النص: 24 بكسل (سطح المكتب) ، 16 بكسل (الهاتف)
ارتفاع خط النص: 1.3em
العرض الأقصى: 50٪
محاذاة الوحدة: صحيح
الحشو: 4vw صحيح

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

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

العرض الأقصى: 35vw
الهامش: -12vw أعلى ، -8vw أسفل ، -5vw يسار
Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: -40 بكسل
مربع الظل الوضع الرأسي: -50 بكسل
لون الظل: rgba (0،0،0،0.17)

التصميم مع ضبط الصف على Overflow Visible (افتراضي)

الآن دعنا نتحقق من التصميم الذي يحافظ على ضبط تجاوز الصف الخاص بنا ليكون مرئيًا (الافتراضي).

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

التصميم مع الصف مضبوط على Overflow Hidden

الآن دعنا نرى ما يحدث عندما نستخدم خاصية Overflow Hidden للصف. افتح إعدادات الصف وقم بتحديث ما يلي:

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

ها هي النتيجة.

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

# 2 استخدام التمرير الزائد للسماح للمستخدمين بالتمرير عبر المحتوى عموديًا

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

قم بإنشاء قسم عادي بصف من عمود واحد. ثم أضف وحدة نصية بالمحتوى التالي:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

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

خط النص: لاتو

لون نص الرابط: # 333333
حجم نص الرابط: 18 بكسل

لون نص القائمة المطلوبة:
حجم نص القائمة المطلوبة: 20 بكسل
ارتفاع سطر القائمة المطلوبة: 1.8em
نوع نمط القائمة المرتبة: بادئة عشرية صفر

وزن خط العنوان 3: غامق للغاية
حجم نص العنوان 3: 50 بكسل
العرض الأقصى: 500 بكسل
المساحة المتروكة: 3٪ أعلى ، 3٪ أسفل ، 8٪ يسار ، 8٪ يمين

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

الآن ، قم بتحديث وحدة النص بحد أقصى للارتفاع 400 بكسل. نظرًا لأن قيمة الفائض الافتراضية لوحدة النص مرئية ، ستلاحظ أن النص يفيض أسفل الوحدة النمطية.

كل ما نحتاج إلى القيام به الآن هو ضبط التدفق الرأسي للتمرير على النحو التالي:

تجاوز عمودي: التمرير

ها هو التصميم النهائي.

لمزيد من الأمثلة حول كيفية استخدام التمرير الرأسي الفائض على موقع Divi الخاص بك ، تحقق من هذه المنشورات:

• كيفية إنشاء نموذج معرض التمرير باستخدام خيارات تجاوز سعة Divi الجديدة
• كيفية تصميم منطقة القطعة للوظائف الأخيرة القابلة للتمرير في Divi

# 3 استخدام التمرير الزائد للسماح للمستخدمين بالتمرير عبر المحتوى أفقيًا

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

لتوضيح كيفية القيام بذلك ، سنقوم ببناء مثال سريع معًا.

أولاً ، قم بإنشاء قسم عادي بصف عمود واحد.

ثم أضف وحدة دعاية مغالى فيها إلى الصف.

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

محاذاة النص: مركز
خط العنوان: Lato
وزن خط العنوان: ثقيل
المساحة المتروكة: 3٪ يسار ، 3٪ يمين

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

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

display: grid;
grid-template-columns: repeat(6, 50%);

سيعطي هذا عمود الدعاية المغلوطة الخاصة بك في تخطيط شبكة أفقي مع 6 أعمدة بعرض 50٪ من الحاوية (أو في هذه الحالة الصف). هذا يعني أن دعاية / عمودان سيحتلان المساحة داخل الصف. ستمتد الوحدات الأربع الأخرى خارج الصف إلى الجانب الأيمن. هذا هو المكان الذي تكون فيه خاصية التمرير الفائض مفيدة. قم بتحديث خيار التجاوز التالي:

الفائض الأفقي: التمرير

الآن يمكنك ضبط عرض الصف حسب الحاجة وسوف يصطف كل من الدعاية بشكل جيد. ها هو التصميم النهائي.

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

لمزيد من المعلومات ، تحقق من المنشور الكامل حول إنشاء بطاقات تمرير أفقية.

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!