كيفية التوافق عموديًا مع نظام تخطيط Divi 5 Flexbox

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

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

فهم نظام تخطيط Divi 5's Flexbox

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

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

كيف يدمج Divi 5 Flexbox

قدمت Divi 5 مؤخرًا نظام تخطيط Flexbox. يدمج هذا النظام Flexbox مباشرة في البناء المرئي ، مما يسمح للمستخدمين بالتحكم في ترتيبات القسم والصف والعمود والوحدة مع إعدادات بديهية.

تشمل الميزات الرئيسية مجموعة متنوعة من قوالب الصفوف الجديدة ، من الأعمدة المفردة إلى أقسام متعددة الصفوف ، مما يجعل من الأسهل من أي وقت مضى إنشاء تخطيطات في Divi.

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

تمنحك ميزة Divi 5 الجديدة لتنشيط عمود التغيير مزيدًا من التحكم في كيفية تصرف الأعمدة على الأجهزة الأصغر. يمكنك بسهولة تغيير عدد الأعمدة أو إعادة ترتيبها ، مما يجعل التصميمات تبدو رائعة في أي حجم شاشة.

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

إنشاء محاذاة رأسية في Divi 5

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

المحاذاة الرأسية على قسم

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

تأكد من تحديد Flex تحت نمط التصميم . هذا يضمن تمكين FlexBox للقسم.

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

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

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

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

المحاذاة الرأسية على أقسام متعددة الصفوف

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

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

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

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

المحاذاة الرأسية في مجموعات الوحدة النمطية

يقوم نظام Flexbox الخاص بـ Divi 5 أيضًا بتبسيط المحاذاة الرأسية داخل مجموعات الوحدات ، خاصة عند استخدام ميزات مثل Loop Builder للمحتوى الديناميكي. ضع في اعتبارك مجموعة وحدة تعرض منشورات المدونة مع صورة ، وعنوان النشر ، والمقتطفات النشر ، وزر. بدون محاذاة مناسبة ، قد تظهر عناصر مثل الأزرار غير متوازنة عبر الأعمدة. في إصدارات DIVI السابقة ، يتطلب هذا ارتفاعات الأعمدة المتساوية و CSS المخصصة. Divi 5 يتبسيون هذه العملية مع FlexBox.

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

قم بتنزيل الملفات

تنزيل مجانًا

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

تحميل

لقد اشتركت بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والوصول إلى حزم تخطيط Divi الأسبوعية المجانية!

نصائح لمحاذاة رأسية مستجيبة

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

استخدم نقاط التوقف المستجيبة القابلة للتخصيص Divi 5

يتيح لك نظام Divi 5 Flexbox تخصيص طلب الوحدة النمطية والمواءمة لأحجام الشاشة المختلفة ، مما يضمن تكيف تخطيطاتك مع جميع أحجام الشاشة. في البناء المرئي ، يمكنك استخدام سبع نقاط توقف مستجيبة قابلة للتخصيص للتحكم في كيفية ظهور التخطيطات عبر الأجهزة.

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

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

استخدم متغيرات تصميم Divi 5

ميزة متغيرات تصميم Divi 5 مثالية للحفاظ على التباعد المتسق والمواءمة عبر وجهات النظر المستجيبة. تتيح لك متغيرات التصميم تحديد القيم القابلة لإعادة الاستخدام لخصائص مثل الحشو والهوامش وأحجام الخطوط ، مما يضمن التوحيد في تخطيطاتك. بالنسبة للمحاذاة الرأسية ، يمكنك إنشاء متغير للحشوة العمودية لتوحيد التباعد داخل الصفوف أو الأقسام. على سبيل المثال ، قم بتعيين متغير تصميم يسمى الحشوة العمودية إلى 30 بكسل في Divi's Variable Manager.

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

Flexbox يجعل المحاذاة الرأسية سهلة

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

قم بتنزيل أحدث Divi 5 Alpha وتجربة نظام تخطيط Flexbox في مشروع جديد.