عند إنشاء موقع باستخدام Divi، قد يكون خيار محاذاة المحتوى عموديًا إضافة قيمة لمجموعة أدوات التصميم الخاصة بك. اعتمادًا على التخطيط، قد يلزم محاذاة المحتوى رأسيًا بطرق مختلفة (الوسط، الأسفل، الأعلى). الحاجة الأكثر شيوعًا هي أن تكون المواد الخاصة بك محاذاة عموديًا. فهو يضيف لمسة جميلة من المسافات المتماثلة إلى المحتوى الخاص بك، وهو أمر مفيد للغاية عند استخدام تخطيطات أعمدة متعددة. علاوة على ذلك، يظل المحتوى المتمركز رأسيًا متمركزًا عبر عروض المتصفح، مما يلغي الحاجة إلى حشوة أو هوامش مخصصة لتحقيق استجابة مماثلة.
سأعلمك في هذا الدرس كيفية محاذاة المحتوى رأسيًا في أي عمود باستخدام بضعة أسطر بسيطة من CSS. لأغراض العرض التوضيحي، سأستخدم العديد من تخطيطات Divi الجاهزة. لا داعي للقلق إذا لم تكن على دراية بـ CSS. وفي غضون ثوان، ستتمكن من تطبيق ذلك على تصميمك.
- فهم الفرق بين فليكس و ديفي
- هل هذا مطلوب؟
- أضف التخطيط الذي تم تكوينه مسبقًا إلى صفحتك.
- الطريقة الأولى: محاذاة المحتوى عموديًا باستخدام الهامش المرن والهامش التلقائي
- محاذاة المحتوى في الأسفل
- محاذاة المحتوى الرأسي لأعمدة الصف الخاص بك
- الطريقة الثانية: محاذاة المحتوى عموديًا باستخدام اتجاه العمود المرن
- ماذا عن التخطيطات ذات عمود واحد فقط؟
- الأفكار النهائية حول المحاذاة الرأسية والأفقية لـ DIVI
فهم الفرق بين فليكس و ديفي
تعد سمة CSS Flex (أو Flexbox) مجرد وسيلة لترتيب العناصر في مكدسات أفقية ورأسية (مثل الجدول). على عكس الجداول النموذجية، تتيح لك الميزة المرنة إنشاء مربعات "تتلاءم" مع حجم المحتوى الذي تحتويه.
يستخدم Divi السمة المرنة عندما تختار "Equalize Column Heights" كإعداد للصف. ببساطة، يضمن ذلك أن حجم جميع أعمدتك يتكيف مع حجم العمود الذي يحتوي على أكبر قدر من المعلومات. نظرًا لأن "Equalize Column Heights" يؤدي إلى تشغيل المرن لحاوية الصف، فيمكنك الاستفادة منه عن طريق إضافة CSS إلى أعمدتك لتغيير محتويات كل عمود (أو مربع).
إذا قمت بإضافة "margin: auto" إلى أي عمود في صف، على amp ، فسيتم توسيط محتوى هذا العمود (سواء كان وحدة واحدة أو عدة وحدات) عموديًا.
سيتم توسيط جميع أعمدتك (ومحتواها) عموديًا إذا أضفت "align-items: center;" إلى صفك.
بالطبع، تحتوي الخاصية flex على العديد من التطبيقات في تصميم الويب وCSS الأكثر تقدمًا والتي يمكنك استخدامها في قالبك. ومع ذلك، أردت أن أبقي الأمور بسيطة في هذا البرنامج التعليمي.
هل هذا مطلوب؟
من الناحية الفنية، لا. يمكنك استخدام تباعد مخصص لوضع المحتوى/الوحدات النمطية الخاصة بك عموديًا داخل عمود (الحشوة والهامش). على amp ، يمكنك استخدام خيارات التباعد الخاصة بـ Divi لتوسيط الوحدة (الوحدات) عموديًا داخل قائمة الانتظار لإعطاء عمود مساويًا للحشوة العلوية والسفلية. يمكنك أيضًا جعل المحتوى محاذيًا للأسفل عن طريق إضافة حشوة علوية إلى العمود. عند إضافة المزيد من المحتوى إلى صفحتك، قد تحتاج إلى تعديل التباعد. علاوة على ذلك، قد يكون الحفاظ على هذه المحاذاة عبر أحجام المتصفحات المتعددة مشكلة.
لذا، إذا كنت تبحث عن طريقة لمحاذاة المعلومات عموديًا دون الحاجة إلى القلق بشأن المسافات المحددة، فأعتقد أنك ستجد هذا مفيدًا.
دعونا نبدأ هذه الحفله!
أضف التخطيط الذي تم تكوينه مسبقًا إلى صفحتك.
سأبدأ بتخطيط صفحة محفظة شركة التصميم الداخلي. قم بإنشاء صفحة جديدة ليكون هذا التخطيط على صفحتك. وبعد ذلك قم بتسمية صفحتك. حدد "استخدام Divi Builder" ثم "استخدام Visual Builder" من القائمة المنسدلة. ثم اختر "اختيار تخطيط مسبق الصنع" من القائمة المنسدلة. ثم حدد حزمة تخطيط شركة التصميم الداخلي من نافذة التحميل من المكتبة. أخيرًا، من تحديد التخطيطات، اختر صفحة Portfolio وانقر فوق "استخدام هذا التخطيط".
أنت جاهز للبدء بعد تحميل التخطيط على صفحتك.
الطريقة الأولى: محاذاة المحتوى عموديًا باستخدام الهامش المرن والهامش التلقائي
افتح إعدادات الصف للصف الثاني (الصف الموجود مباشرة أسفل الصف الذي يحمل عنوان الصفحة). قم بتبديل فتح مجموعة خيارات التحجيم في خيارات التصميم ولاحظ أن "Equalize Column Heights" نشط بالفعل؛ يشير هذا إلى إضافة الخاصية flex ("display: flex;") إلى الصف.
ضمن مربع إدخال العنصر الرئيسي للعمود 2، انتقل إلى إعدادات علامة التبويب خيارات متقدمة لنفس الصف وأضف مقتطف CSS التالي.
تم الآن نقل محتوى العمود الثاني ليتم توسيطه عموديًا.
| 01 | الهامش: تلقائي؛ |
محاذاة المحتوى في الأسفل
يمكنك تغيير قيمة الهامش على النحو التالي لجعل المحتوى الخاص بك محاذاة للأسفل بحيث يتم تكديس جميع الوحدات في أسفل العمود الخاص بك:
| 01 | الهامش: تلقائي 0؛ |
محاذاة المحتوى الرأسي لأعمدة الصف الخاص بك
يمكنك توسيط محتوى جميع الأعمدة في الصف عموديًا عن طريق إضافة المقتطف التالي إلى العنصر الرئيسي لإعدادات الصف، بدلاً من إضافة "الهامش: تلقائي" إلى كل عمود على حدة.
| 01 | محاذاة العناصر: مركز؛ |
يمكنك أيضًا استخدام هذا المقتطف إذا كنت تريد محاذاة جميع المعلومات الموجودة في أعمدتك في الأسفل:
| 01 | محاذاة العناصر: نهاية مرنة؛ |
تذكر أنه يمكنك استخدام ميزة توسيع الأنماط الخاصة بـ Divi من خلال النقر بزر الماوس الأيمن على العنصر الرئيسي باستخدام مقتطف CSS الخاص بك وتحديد "توسيع العنصر الرئيسي".
بعد ذلك، لتوسيط كل محتوى كل عمود في الصفحة رأسيًا، قم بتطبيق العنصر الرئيسي CSS على جميع الصفوف في الصفحة (أو القسم).
كل شيء الآن متوازن عموديا.
ومع ذلك، ربما لاحظت أن لون خلفية العمود الأبيض لم يعد يغطي الصف بأكمله بسبب إضافة العمود "الهامش: تلقائي". يمكنك معالجة ذلك عن طريق تغيير لون خلفية الصف إلى اللون الأبيض وإزالة حشوة الصف. وبدلاً من ذلك، سأعلمك كيفية توسيط محتوى عمودك دون الحاجة إلى تغيير الهامش.
الطريقة الثانية: محاذاة المحتوى عموديًا باستخدام اتجاه العمود المرن
استخدمنا الخاصية flex التي تمت إضافتها أولاً إلى الصف. ونتيجة لذلك، أصبح كل عمود من أعمدةنا "مربعًا مرنًا" يمكن محاذاته رأسيًا عن طريق تغيير الهامش.
ومع ذلك، يمكننا استخدام الاتجاه المرن لمحاذاة نص عمودنا دون التضحية بتأثير "مساواة ارتفاع العمود"، الذي يحافظ على أعمدتنا (وخلفيات الأعمدة) بنفس الحجم. ولتحقيق ذلك، سنضيف بضعة أسطر من CSS إلى قائمة الانتظار الخاصة بنا، مما يؤدي إلى تكديس كافة الوحدات داخلها عموديًا ثم توسيطها.
دعنا نعود إلى صف ex amp le السابق. من خلال النقر بزر الماوس الأيمن على Custom CSS وتحديد "إعادة تعيين أنماط CSS المخصصة"، يمكنك إزالة أي CSS مخصص قد يكون لديك في إعدادات الصف.
ثم، في العنصر الرئيسي للعمود 2، قم بتطبيق CSS التالي:
| 010203 | عرض: مرن؛ اتجاه مرن: عمود؛ ضبط المحتوى: مركز؛ |
قم بتغيير "justify-content: center" إلى "justify-content: flex-end" لمحاذاة المحتوى لأسفل.
يعجبني هذا التكوين لأنه إذا قمت بوضع المحتوى الخاص بي عموديًا وجعلت الصف بعرض كامل، فسيظل المحتوى في المنتصف.
إنشاء نصوص محاذاة رأسيًا بكميات مختلفة من النص
إن جعل محتوى أعمدتك متمركزًا رأسيًا يمكن أن يساعد أيضًا في الدعاية المغلوطة. كما تعلم، لن تحتوي كل دعاية مبسطة على نفس القدر من النص لوصف ميزة أو خدمة. إن جعل هذه الدعاية المبسطة متمركزة عموديًا يمكن أن يساعد في جعل تخطيطك يبدو جميلًا.
بالنسبة لتخطيط الصفحة الرئيسية للمدفوعات الرقمية، سأقوم بمحاذاة النصوص المبسطة عموديًا في هذا amp .
لإنشاء صورة أكثر واقعية لمظهر الموقع، سأضيف أولاً كميات متفاوتة من محتوى الجسم إلى الدعاية المغلوطة.
أنا الآن بحاجة إلى "مساواة ارتفاعات العمود" في إعدادات الصف.
يمكنني الآن محاذاة النص وضبط التصميم باستخدام مقتطفات CSS.
يمكننا توسيط محتوى أعمدتنا عموديًا عن طريق إضافة ما يلي إلى قسم العنصر الرئيسي في علامة التبويب خيارات متقدمة في إعدادات الصف لدينا:
| 01 | محاذاة العناصر: مركز؛ |
يرجى تغييره إلى ما يلي لمواءمتها في الأسفل.
| 01 | محاذاة العناصر: نهاية مرنة؛ |
يمكنك أيضًا جعل العمود الأول محاذاة للأسفل والعمود الثالث محاذاة للأعلى عن طريق إعادة تعيين أنماط CSS المخصصة وإضافة الهوامش المخصصة التالية.
العمود 1 العنصر الرئيسي CSS:
| 01 | الهامش: تلقائي تلقائي 0؛ |
العمود 3 العنصر الرئيسي CSS:
| 01 | الهامش: 0 تلقائي؛ |
ماذا عن التخطيطات ذات عمود واحد فقط؟
لا تحتاج إلى مقتطف CSS أو مرن لتركيز المحتوى المكون من عمود واحد عموديًا. كل ما عليك فعله هو التأكد من أن النص الخاص بك يحتوي على مسافات متساوية في الأعلى والأسفل (أو الوحدات). يتطلب معظم المستهلكين محتوى متمركزًا رأسيًا على تخطيطات تحتوي على العديد من الأعمدة لأنهم يريدون أن تصطف المواد المجاورة بشكل صحيح.
الأفكار النهائية حول المحاذاة الرأسية والأفقية لـ DIVI
على الرغم من أن هذا الحل يعتمد على بعض المقتطفات البسيطة من CSS المخصص، إلا أنني أشعر أنه يمكن أن يكون مفيدًا للأشخاص الذين يبحثون عن علاج سريع لإجراء يستغرق وقتًا طويلاً. لا تتردد في مشاركة آرائك حول هذا النهج، بالإضافة إلى الدروس amp حول كيفية توفير الوقت والجهد لك في الماضي.
شكرا للتفسير واضح. ومع ذلك، هذا لا يعمل مع وحدة المدونة. ثم لا يوجد سوى عمود واحد في الصف. يتم تحديد عدد المدونات المتجاورة بواسطة الوحدة (الافتراضي 3). هل يمكن أيضًا عمل الأعمدة هنا بنفس الطريقة؟
مرحبًا، لا، أنا آسف لأن هذا مخصص فقط لأعمدة DIVI الكلاسيكية، وحدة مدونة DIVI لها رمز مختلف تمامًا لمحاذاة الأعمدة.
ماذا لو كنت تريد محاذاة الوحدة بمقدار 2/3 من الأسفل أو 1/3 من الأعلى - وليس في الأعلى أو الأسفل بشكل مثالي؟
مرحبًا، أخشى أن الأمر سيتطلب إجراء بعض عمليات CSS المخصصة، افتراضيًا لا يوجد مثل هذا الخيار.
ربما يمكنك محاولة محاذاة المحتوى في المنتصف وإضافة بعض الحشو إلى المحتوى الخاص بك، ولكن يرجى التحقق بعناية من العرض على جميع الأجهزة.