كيفية محاذاة المحتوى عموديًا في Divi

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

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

فهم فليكس وديفي

خاصية Flex (أو Flexbox) css هي ببساطة طريقة لوضع العناصر في مكدسات أفقية و / أو عمودية (نوع من مثل الجدول). باستثناء ، على عكس الجداول التقليدية ، تسمح لك الخاصية flex بإنشاء مربعات تضبط أو "تنثني" لحجم المحتوى الذي تحتويه.

تستخدم Divi الخاصية المرنة عندما تحدد "Equalize Column Heights" كإعداد للصف. هذا ببساطة يضمن أن حجم الأعمدة الخاصة بك سيتكيف مع حجم العمود الذي يحتوي على أكبر قدر من المحتوى. ونظرًا لأن "Equalize Column Heights" ينشط المرن لحاوية الصف ، يمكنك بسهولة الاستفادة من ذلك عن طريق إضافة css إلى الأعمدة لضبط محتويات كل عمود (أو مربع).

على سبيل المثال ، إذا أضفت "margin: auto" إلى أي عمود في صف ، فسيتم توسيط محتوى هذا العمود (سواء كان وحدة نمطية واحدة أو أكثر) رأسياً.

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

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

هل هذا حقا ضروري؟

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

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

هيا بنا نبدأ!

قم بتحميل تخطيط Premade إلى صفحتك

لبدء الأمور ، سأستخدم تخطيط الصفحة لمحفظة شركة التصميم الداخلي. للحصول على هذا التخطيط على صفحتك ، قم بإنشاء صفحة جديدة. ثم امنح صفحتك عنوانًا. انقر فوق "استخدام Divi Builder" ثم "استخدام Visual Builder". ثم حدد الخيار "Choose a Premade Layout". ثم حدد حزمة تخطيط شركة التصميم الداخلي من القائمة المنبثقة التحميل من المكتبة. أخيرًا ، حدد صفحة Portfolio من قائمة التخطيطات وانقر فوق "Use this Layout".

بمجرد تحميل التصميم على صفحتك ، تكون جاهزًا للعمل.

الطريقة الأولى: كيفية محاذاة المحتوى عموديًا باستخدام Flex و Auto Margin

افتح إعدادات الصف الثاني على الصفحة (الصف الموجود مباشرة أسفل الصف الذي يحتوي على عنوان الصفحة). ضمن إعدادات التصميم ، قم بفتح مجموعة خيارات Sizing ولاحظ أن "Equalize Column Heights" نشط بالفعل. هذا يعني أن الصف يحتوي الآن على الخاصية flex (“display: flex؛”) مضافة إليه.

انتقل الآن إلى إعدادات علامة التبويب خيارات متقدمة لنفس الصف وأضف مقتطف css التالي ضمن مربع إدخال العمود 2 العنصر الرئيسي.

margin: auto;

الآن تحول محتوى العمود الثاني ليصبح مركزًا رأسيًا.

جعل المحتوى أسفل محاذاة

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

margin: auto auto 0;

محاذاة المحتوى عموديًا لجميع الأعمدة في صفك

بدلاً من إضافة "margin: auto" إلى كل عمود على حدة ، يمكنك أيضًا توسيط محتوى جميع الأعمدة في صفك عموديًا عن طريق إضافة المقتطف التالي إلى العنصر الرئيسي لإعدادات الصف.

align-items: center;

أو إذا كنت تريد محاذاة كل محتوى أعمدتك إلى الأسفل ، يمكنك إضافة هذا المقتطف:

align-items: flex-end;

ولا تنس أنه يمكنك الاستفادة من ميزة Extend Styles الخاصة بـ Divi عن طريق النقر بزر الماوس الأيمن على العنصر الرئيسي باستخدام مقتطف css والنقر فوق "تمديد العنصر الرئيسي".

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

الآن يتم توسيط كل شيء عموديًا.

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

الطريقة 2: محاذاة المحتوى عموديًا باستخدام Column Flex Direction

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

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

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

ثم أضف CSS التالي ضمن Column 2 Main Element:

display: flex;
flex-direction: column;
justify-content: center;

أو إذا أردت محاذاة المحتوى في الأسفل ، فما عليك سوى تغيير "justify-content: center" إلى "justify-content: flex-end".

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

جعل دلالات مع كميات مختلفة من النص محاذاة رأسيًا

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

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

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

الآن ، أنا بحاجة للذهاب إلى إعدادات الصف و "Equalize Column Heights".

يمكنني الآن إضافة مقتطفات CSS الخاصة بي لمحاذاة المحتوى الخاص بي وتغيير التصميم.

ضمن علامة التبويب خيارات متقدمة في إعدادات الصف ، يمكننا توسيط محتوى أعمدتنا رأسياً عن طريق إضافة ما يلي ضمن العنصر الرئيسي:

align-items: center;

أو قم بتغييرها إلى ما يلي لجعلها محاذية لأسفل.

align-items: flex-end;

أو يمكنك إعادة تعيين أنماط css المخصصة وإضافة الهوامش المخصصة التالية لمحاذاة العمود الأول إلى الأسفل ومحاذاة العمود الثالث إلى الأعلى.

العمود 1 العنصر الرئيسي CSS:

margin: auto auto 0;

العمود 3 العنصر الرئيسي CSS:

margin: 0 auto auto;

ماذا عن تخطيطات عمود واحد؟

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

الكثير من التطبيقات

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

افكار اخيرة

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

لا تتردد في مشاركة أفكارك وتعليقاتك أدناه.

هتافات!