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

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

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

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

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

فهم الفرق بين الخصائص

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

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

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

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

تغيير العرض

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

تغيير أقصى عرض

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

لم يتم تجاوزه

تجاوزت

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

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

الارتفاع - يحدد هذا الارتفاع الفعلي الذي تريد تعيينه للعنصر.

الحد الأقصى للارتفاع - تصبح هذه القيمة هي الارتفاع الجديد بمجرد أن يتجاوز الارتفاع القيمة التي تم تعيينها للارتفاع.

تغيير الحد الأدنى للارتفاع

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

تغيير الارتفاع

إذا كنت تجمع بين الحد الأدنى للارتفاع والارتفاع ، فسيتعين عليك التأكد من أن الارتفاع أكبر من الحد الأدنى للارتفاع. إذا لم يكن كذلك ، فسيتم تجاهل الارتفاع. في صورتي GIF أدناه ، ستتمكن من رؤية الفرق في الوقت الفعلي.

لا يتعدى

يتجاوز

تغيير أقصى ارتفاع

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

تغيير أقصى عرض للصفوف

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

تغيير العرض العالمي الأقصى

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

قم بتغيير أقصى عرض لصف واحد بشكل خاص

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

إعطاء الوحدات نفس الارتفاع

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

استخدام معادل العمود

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

تخصيص الارتفاع لكل وحدة

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

محاذاة المحتوى داخل وحدة

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

display: flex;
flex-wrap: wrap;
align-content: center;

اختيار ارتفاع أو عرض عنصر التصميم وتحويل الفائض إلى التمرير

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

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

إنشاء قسم بطل بملء الشاشة عبر جميع أحجام الشاشة

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

• الارتفاع: 100 فولت

هل تريد محاذاة المحتوى مركزيًا في قسم البطل بملء الشاشة؟ أضف خطوط كود CSS المخصصة التالية إلى العنصر الرئيسي في القسم الخاص بك أيضًا:

display: flex;
flex-wrap: wrap;
align-content: center;

افكار اخيرة

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

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