كيفية المحاذاة الرأسية والأفقية للأقسام والصفوف والأعمدة والوحدات النمطية في DIVI Builder

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

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

• فهم الفرق بين فليكس وديفي
• هل هذا مطلوب؟
• أضف التخطيط الذي تم تكوينه مسبقًا إلى صفحتك.
• الطريقة الأولى: محاذاة المحتوى عموديًا مع الهامش المرن والتلقائي
• محاذاة المحتوى في الأسفل
• محاذاة المحتوى العمودية لأعمدة الصف الخاص بك
• الطريقة 2: محاذاة المحتوى عموديًا باستخدام اتجاه العمود المرن
• ماذا عن التخطيطات ذات عمود واحد فقط؟
• الأفكار النهائية حول المحاذاة الرأسية والأفقية لـ DIVI

فهم الفرق بين فليكس وديفي

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

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

إذا قمت بإضافة "هامش: السيارات" إلى أي عمود في صف واحد، لالسابقين amp جنيه، ومضمون هذا العمود (سواء كان واحد أو عدة وحدات) سوف تركز عموديا.

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

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

هل هذا مطلوب؟

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

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

دعونا نبدأ هذه الحفله!

أضف التخطيط الذي تم تكوينه مسبقًا إلى صفحتك.

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

أنت جاهز للبدء بعد تحميل التخطيط على صفحتك.

الطريقة الأولى: محاذاة المحتوى عموديًا مع الهامش المرن والتلقائي

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

ضمن مربع الإدخال Column 2 Main Element ، انتقل إلى إعدادات علامة التبويب Advanced للصف نفسه وأضف مقتطف CSS التالي.

تم الآن نقل محتوى العمود الثاني ليتم توسيطه رأسياً.

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

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

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

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

يمكنك أيضًا استخدام هذا المقتطف إذا كنت تريد محاذاة جميع المعلومات الموجودة في الأعمدة في الجزء السفلي:

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

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

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

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

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

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

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

عودة دعونا لالسابقين السابق amp جنيه في صف واحد. من خلال النقر بزر الماوس الأيمن على Custom CSS وتحديد "Reset Custom CSS Styles" ، يمكنك إزالة أي CSS مخصص قد يكون لديك في Row Settings (إعدادات الصف).

بعد ذلك ، في العمود 2 Main Element ، قم بتطبيق CSS التالي:

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

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

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

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

لالمدفوعات الرقمية الصفحة الرئيسية لتخطيط، وسوف محاذاة عموديا النصوص من هذا السابقين amp جنيه.

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

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

يمكنني الآن محاذاة النص وتعديل التصميم باستخدام مقتطفات CSS.

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

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

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

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

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

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

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

الأفكار النهائية حول المحاذاة الرأسية والأفقية لـ DIVI

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