كيفية إنشاء ارتفاعات أعمدة متساوية مع Flexbox في Divi 5

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

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

ارتفاعات الأعمدة المتساوية في Divi 4

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

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

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

كيف يعالج Flexbox في Divi 5 أعمدة متساوية

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

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

كيفية إنشاء ارتفاعات أعمدة متساوية في Divi 5

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

الخطوة 1: إنشاء التصميم الخاص بك

افتح البناء المرئي على صفحة جديدة أو موجودة. انقر فوق أيقونة Black + لإضافة صف جديد .

عندما يظهر مربع الحوار الجديد للقسمة ، حدد تخطيط العمود الثلاثة تحت أعمدة متساوية .

إضافة وحدة مجموعة في العمود الأول.

بعد ذلك ، أضف وحدة رمز إلى وحدة المجموعة في العمود الأول.

حدد أيقونة التحقق في علامة التبويب المحتوى.

في علامة تبويب التصميم ، اضبط لون الأيقونة على #2EA3F2 وحجم الأيقونة إلى 36 بكسل.

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

اكتب تصميم الويب كعنوان في علامة تبويب المحتوى .

في علامة تبويب التصميم ، اختر H5 كمستوى عنوان ، و inter كخط العنوان ، ومتوسط وزن خط الخط . قم بتعيين نمط الخط على الحرف الكبيرة ، ومواءمة النص إلى اليسار ، ولون النص العنوان إلى #000000 ، واحتفظ بحجم نص العنوان عند الحجم الافتراضي البالغ 16 بكسل .

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

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

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

الخطوة 2: أعمدة التكرار

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

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

قبل أن ننتقل إلى الخطوة التالية ، انقر فوق العمود الأول وأضف تباعد 25 بكسل إلى جميع جوانب العمود لدينا.

سنضيف أيضًا نصف قطر الحدود 15 بكسل وعرض حدود 1 بكسل مع #666666 كون.

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

الخطوة 3: تكوين إعدادات Flexbox للحصول على ارتفاعات متساوية

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

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

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

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

سيتم تمديد جميع الوحدات داخل المجموعة لملء المساحة المتاحة ، وسيتم محاذاة الأزرار خارج المجموعة إلى القاع.

الخطوة 4: اختبار الاستجابة

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

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

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

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

عند معاينة التغييرات في جميع نقاط التوقف ، سترى كيف ينتقل Divi تخطيط الشاشات الصغيرة.

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

حالات الاستخدام الشائعة

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

1. قوائم المنتجات

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

2. أقسام مميزة

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

3. شبكات المحفظة

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

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

تنزيل مجانًا

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

تحميل

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

تعرف على ميزة Divi 5's Flexbox اليوم

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

هل أنت مستعد لرفع مواقع الويب الخاصة بك؟ الغوص في إعدادات Divi 5 Flexbox وتجربة الاحتمالات الإبداعية التي تفتحها. شارك تعليقاتك أدناه أو تواصل معنا على قنوات التواصل الاجتماعي الخاصة بنا لمشاركة أفكارك حول ميزة FlexBox الجديدة الخاصة بنا.