كيفية جعل المحتوى متمركزًا عموديًا في عمود Divi

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

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

ثم قد تسأل ، كيفية محاذاة المحتوى رأسيًا دون الحاجة إلى القلق بشأن ذلك؟

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية التأكد من أن حجم الأعمدة سيتكيف مع حجم العمود الذي يحتوي على أكبر قدر من المحتوى في الصف باستخدام إعداد " Equalize Column Heights " في إعدادات الصف التي تحتوي على " خاصية Flex ”CSS (Flex Box) التي تتيح لك تعيين طول مرن للعناصر المرنة.

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

دعونا ندخل في العملية ، أليس كذلك؟

ابدأ في إنشاء المحتوى بشكل مركزي عموديًا في عمود Divi

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

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

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

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

في هذا البرنامج التعليمي ، سوف نستخدم طريقتين لإثبات جعل المحتوى متمركزًا عموديًا في Divi.

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

الطريقة الأولى هي إضافة مقتطف CSS صغير إلى إعدادات الصف لضبط الهامش تلقائيًا.

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

 محاذاة العناصر: مركز ؛ 

كما ترى في الصورة أعلاه ، يتم توسيط محتوى العمود رأسياً.

ويمكنك جعل الصف الآخر يطبق نفس المقتطف على Main Element CSS الخاص بهم بحيث يتم توسيط محتواهم رأسياً أيضًا من خلال الاستفادة من ميزة نمط "Extend" الخاصة بـ Divi.

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

• إلى : كافة الصفوف
• في جميع أنحاء: هذا القسم

بمجرد القيام بالخطوات المذكورة أعلاه ، ستجد أن جميع الأعمدة تتمركز عموديًا.

يمكنك أيضًا اختيار جعل محتوى العمود يتم توسيطه عموديًا بشكل فردي عن طريق فتح إعدادات العمود ثم الانتقال إلى علامة التبويب خيارات متقدمة ← كتلة CSS مخصصة لوضع margin: auto; مقتطف CSS في محرر كود العنصر الرئيسي .

إذا كنت تريد أن يكون المحتوى محاذيًا للأسفل أو محاذيًا لأعلى ، يمكنك القيام بذلك عن طريق تعديل margin: auto; مقتطف CSS على النحو التالي:

• محاذاة لأسفل: margin: auto auto 0;

• محاذاة لأعلى: margin: 0 auto auto;

الطريقة 2: جعل المحتوى محاذيًا رأسيًا باستخدام الاتجاه المرن

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

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

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

بمجرد مسح CSS المخصص ، تابع بالرجوع إلى علامة تبويب المحتوى ثم فتح إعدادات العمود 2 ، ثم انتقل إلى علامة التبويب خيارات متقدمة وأضف مقتطف CSS التالي في Custom CSS → Main Element.

 عرض: فليكس ؛
الاتجاه المرن: العمود.
تبرير المحتوى: مركز ؛ 

الآن ، ستحصل على الارتفاع الكامل لخلفية العمود مرة أخرى مع تمركز المحتوى رأسياً أيضًا.

إذا كنت ترغب في محاذاة المحتوى إلى أعلى أو أسفل العمود ، فأنت تحتاج فقط إلى تعديل مقتطف الشفرة قليلاً ، وهو justify-content: center; جزء. هذا مثال على المقتطف المعدل:

• المحتوى المحاذي للأعلى:

 عرض: فليكس ؛
الاتجاه المرن: العمود.
تبرير المحتوى: بداية مرنة ؛ 

• محتوى محاذاة لأسفل:

 عرض: فليكس ؛
الاتجاه المرن: العمود.
تبرير المحتوى: نهاية مرنة ؛ 

الخط السفلي

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