القدرة على محاذاة عموديا محتويات عند إنشاء موقع باستخدام Divi يمكن أن يكون إضافة مفيدة لأداة التصميم الخاصة بك. في بعض الأحيان يتطلب بند معين أن محتويات تتم محاذاته عموديًا بطرق مختلفة (في المنتصف، في الأسفل، في الأعلى). الحاجة الأكثر شيوعا هي توسيط الخاص بك محتويات عمودي.
إنه يوفر لمسة لذيذة من التباعد المتماثل الذي يكون مفيدًا عند استخدام تخطيطات أعمدة متعددة للمحتوى الخاص بك. بالإضافة إلى ذلك ، يظل المحتوى المرتكز على المحور الرأسي متمركزًا في عروض مختلفة للمتصفح ، مما يزيل عناء تطبيق حشوة أو هوامش مخصصة لتحقيق استجابة مماثلة.
في هذا البرنامج التعليمي ، سأوضح لك كيفية إضافة بعض مقتطفات CSS الصغيرة إلى أي عمود لمحاذاة المحتوى رأسياً. سأستخدم بعض التنسيقات المعدة مسبقًا من Divi للحصول على أمثلة حول كيفية القيام بذلك. إذا كنت لا تعرف الكثير عن CSS ، فلا داعي للقلق. سيكون من السهل جدًا تطبيقه على التخطيطات الخاصة بك في ثوانٍ.
فهم Flex و Divi
خاصية css Flex (أو Flexbox) هي ببساطة طريقة لوضع العناصر في مكدسات أفقية و / أو عمودية (تشبه إلى حد كبير الجدول). باستثناء الجداول التقليدية ، تتيح لك الخاصية flex إنشاء مربعات تتكيف مع حجم المحتوى الذي تتضمنه.
Divi يستخدم الخاصية flex عندما تحدد "Equalize Column Heights" كمعلمة للصف. وهذا يضمن ببساطة أن حجم أعمدتك سوف يتكيف مع حجم العمود الذي يحتوي على أكبر قدر من المحتوى. وبما أن "Equalize Column Heights" يمكّن المرن لحاوية الصف، يمكنك الاستفادة منه بسهولة عن طريق إضافة CSS إلى أعمدتك لضبط محتويات كل عمود (أو منطقة).
على سبيل المثال ، إذا أضفت "margin: auto" إلى عمود في صف ، فإن محتوى هذا العمود (سواء كان وحدة نمطية واحدة أو أكثر) سيصبح مركزًا رأسيًا.
بالإضافة إلى ذلك ، إذا قمت بإضافة "محاذاة العناصر: مركز" إلى السطر الخاص بك ، فسيتم توسيط جميع الأعمدة (ومحتوياتها) رأسياً.
بالطبع ، هناك العديد من الاستخدامات الأخرى لخاصية Flex في تصميم الويب ، بالإضافة إلى CSS الأكثر تقدمًا التي يمكنك تطبيقها على قالبك. لكن بالنسبة لهذا البرنامج التعليمي ، أردت أن أبقيه بسيطًا.
هل هو ضروري حقا؟
من الناحية الفنية ، لا. يمكنك محاذاة المحتوى / الوحدات بشكل عمودي في عمود باستخدام التباعد المخصص (المساحة المتروكة والهامش). على سبيل المثال ، يمكنك استخدام خيارات تباعد Divi لإعطاء عمود يساوي الحشوة العلوية والسفلية لتوسيط الوحدة (الوحدات) عموديًا في العمود. يمكنك أيضًا إضافة حشوة علوية فقط إلى عمود لمحاذاة المحتوى السفلي. ومع ذلك ، قد تحتاج إلى ضبط التباعد عند تحديث صفحتك بمزيد من المحتوى. بالإضافة إلى ذلك ، قد يكون من الصعب الحفاظ على هذه المحاذاة عبر عروض المتصفح المختلفة.
لذلك إذا كنت تبحث عن حل لمحاذاة المحتوى رأسياً دون الحاجة إلى التفكير في التباعد المخصص ، أعتقد أنك ستجد هذا مفيدًا.
لنبدأ!
قم بتحميل التخطيط المحدد مسبقًا على صفحتك
للبدء ، سأستخدم التخطيط من مجموعة محفظة شركة التصميم الداخلي. للحصول على هذا التخطيط على صفحتك ، قم بإنشاء صفحة جديدة. ثم امنح صفحتك عنوانًا. انقر فوق "استخدام Divi Builder" ثم على "استخدام Visual Builder". ثم حدد الخيار "اختيار تخطيط أساسي". ثم حدد مجموعة تخطيط شركة التصميم الداخلي من نافذة التحميل من المكتبة المنبثقة. أخيرًا ، حدد صفحة Portfolio من قائمة التخطيطات وانقر فوق "Use this layout".
بمجرد تحميل التصميم على صفحتك ، تصبح جاهزًا للانطلاق.
الطريقة الأولى: كيفية محاذاة المحتوى عموديًا باستخدام الهامش المرن والتلقائي
افتح إعدادات الخط للسطر الثاني من الصفحة (الخط الموجود أسفل السطر مباشرةً بعنوان الصفحة). ضمن "إعدادات التصميم" ، افتح مجموعة خيارات تغيير الحجم ولاحظ أن "Equalize Column Heights" نشط بالفعل. هذا يعني أن السطر يحتوي الآن على خاصية flex (“display: flex؛”) مضافة.
انتقل الآن إلى إعدادات علامة التبويب خيارات متقدمة لنفس الصف وأضف مقتطف css التالي أسفل مربع الإدخال الخاص بالعنصر الرئيسي للعمود 2.
margin: auto; |
الآن تم نقل محتويات العمود الثاني لتركز عموديا.
اجعل المحتوى أقل محاذاة
إذا كنت ترغب في محاذاة المحتوى الخاص بك في الجزء السفلي بحيث تكدس جميع الوحدات النمطية في أسفل العمود الخاص بك ، يمكنك ضبط قيمة الهامش على النحو التالي:
margin: auto 0; |
محاذاة عمودية للمحتوى لجميع الأعمدة في صفك
بدلاً من إضافة "margin: auto" إلى كل عمود على حدة ، يمكنك أيضًا توسيط محتويات جميع الأعمدة في صفك عموديًا عن طريق إضافة المقتطف التالي إلى العنصر الرئيسي لإعدادات الصف.
align-items: center; |
أو إذا كنت تريد محاذاة جميع محتويات أعمدتك في الأسفل ، يمكنك إضافة هذا المقتطف:
align-items: flex-end; |
ولا تنس أنه يمكنك الاستفادة من ميزة Extend Styles من Divi عن طريق النقر بزر الماوس الأيمن على العنصر الرئيسي باستخدام مقتطف CSS والنقر على "توسيع العنصر الرئيسي".
ثم ، قم بتوسيع عنصر css الرئيسي هذا ليشمل جميع أسطر الصفحة (أو القسم) لتوسيط كل محتويات كل عمود في الصفحة رأسياً.
الآن كل شيء يتركز عموديا.
ولكن ربما لاحظت أن لون خلفية العمود الأبيض لم يعد يغطي ارتفاع الصف بالكامل. هذا لأننا أضفنا "margin: auto" إلى العمود. لحل هذه المشكلة ، يمكنك تغيير لون خلفية الخط إلى الأبيض وإزالة التعبئة من الخط. لكن بدلاً من ذلك ، سأوضح لك طريقة لتوسيط محتوى العمود دون تغيير الهامش.
الطريقة 2: محاذاة المحتوى عموديًا باستخدام اتجاه انثناء العمود
في الطريقة الأولى ، استفدنا من خاصية flex المضافة إلى الصف. جعل هذا كل عمود من أعمدةنا "صندوقًا مرنًا" يمكن محاذاته عموديًا ببساطة عن طريق ضبط الهامش.
ولكن هناك أيضًا طريقة ذات اتجاه مرن لمحاذاة محتويات العمود دون فقدان تأثير "Equalize Column Height" الذي يحافظ على الأعمدة (وخلفيات الأعمدة) بالحجم نفسه. للقيام بذلك ، سنضيف فقط بضعة أسطر من CSS إلى عمودنا بحيث يتم تكديس جميع الوحدات في العمود عموديًا ثم توسيطها.
دعنا نعود إلى الخط في المثال السابق. افتح إعدادات الصف وقم بإزالة أي css مخصص قد يكون لديك هناك بالنقر بزر الماوس الأيمن على CSS المخصص والنقر على "إعادة تعيين أنماط CSS المخصصة".
ثم أضف CSS التالي أسفل عمود 2 ، العنصر الرئيسي:
عرض: فليكس ؛ الاتجاه المرن: العمود. تبرير المحتوى: مركز ؛
أو إذا أردت محاذاة المحتوى في الأسفل ، فاستبدل "ضبط المحتوى: مركز" بـ "تبرير المحتوى: نهاية مرنة".
ما هو رائع في هذا الإعداد هو أنه إذا تم توسيط المحتوى الخاص بي عموديًا وتم الوصول إلى عرض الصف ، فسيظل المحتوى في المنتصف.
قم بعمل توهجات (ملخص) بكميات مختلفة من النص المحاذي رأسياً
يمكن أن يكون جعل محتوى العمود متمركزًا عموديًا مفيدًا أيضًا في الدعاية المغلوطة. كما تعلم ، لن تحتوي جميع الدعاية المغلوطة على المقدار الدقيق للنص المستخدم في دإرسال وظيفة أو خدمة. يمكن أن يؤدي توسيط هذه الدلالات العمودية إلى إنشاء تصميم جميل للتخطيط الخاص بك.
في هذا المثال ، سأقوم بمحاذاة الدعاية بشكل عمودي مع تخطيط الصفحة الرئيسية للمدفوعات الرقمية.
سأضيف كميات مختلفة من النص الأساسي إلى الدعاية المغلوطة أولاً لإعطاء تمثيل أكثر واقعية لما قد يبدو عليه الموقع.
الآن لا بد لي من الذهاب إلى إعدادات الخط و "تنسيق ارتفاع العمود".
الآن يمكنني إضافة مقتطفات CSS لمحاذاة المحتوى الخاص بي وتعديل التصميم.
ضمن علامة التبويب خيارات متقدمة في إعدادات صفك ، يمكننا توسيط محتوى الأعمدة رأسياً عن طريق إضافة ما يلي ضمن العنصر الرئيسي:
align-items: center; |
أو غيّرها باتباعها.
align-items: flex-end; |
يمكنك أيضًا إعادة تعيين أنماط CSS المخصصة الخاصة بك وإضافة الهوامش المخصصة التالية لمحاذاة أسفل العمود الأول وأعلى العمود الثالث المحاذي.
1 عمود CSS العنصر الرئيسي:
margin: auto auto 0; |
3 عمود CSS العنصر الرئيسي:
margin: 0 auto auto; |
ماذا عن تخطيطات العمود الواحد؟
من الناحية الفنية ، لا تحتاج إلى أي CSS أو مقتطف مرن لتوسيط محتوى العمود رأسياً. كل ما عليك فعله هو التأكد من وجود مسافات متساوية أعلى وأسفل المحتوى (أو الوحدات). في معظم الأوقات ، يحتاج المستخدمون إلى محتوى رأسي يتمحور حول تخطيطات ذات أعمدة متعددة لأنهم يريدون أن يصطف المحتوى المجاور بشكل مثالي.
هذا كل شيء في هذا البرنامج التعليمي الذي يوضح لك كيفية محاذاة العناصر على نفس السطر على Divi.
