إنشاء نظام تباعد قائم على الفجوة مع Divi 5

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

مع متغيرات التصميم الجديدة من Divi 5 وميزات Flexbox ، يمكنك الآن إنشاء نظام تباعد قائم على الفجوة مباشرة في البناء المرئي ، لا يوجد ترميز مخصص. لنلقي نظرة!

لماذا تقصر طرق التباعد التقليدي

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

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

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

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

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

كيف تجعل خصائص الفجوة التباعد بسيطًا

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

مع تمكين Flexbox ، تحصل على عناصر تحكم اثنين من الفجوة: أفقي ورأسي. اضبط الفجوة الأفقية على 24 بكسل ، وتحصل جميع عناصر الأطفال على مساحة 24 بكسل بينهما أفقيًا. اضبط الفجوة الرأسية على 15 بكسل ، ويحصل العناصر المكدسة على 15 بكسل من المساحة العمودية.

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

الطريقة التقليدية تجعل خيارات التباعد العشوائي: 10 بكسل هنا ، 20 بكسل هناك ، 40 بكسل في مكان آخر. تسبب هذه القيم المنتشرة تناقضات وتجعل من الصعب معرفة أي تباعد ينطبق. خصائص الفجوة تزيل التخمين باستخدام قاعدة واحدة متسقة لجميع العناصر.

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

يعد نظام التباعد المستند إلى الفجوة مع Flexbox ومتغيرات التصميم نهجًا أفضل بكثير.

كيفية إعداد نظام الفجوة في Divi 5

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

1. إنشاء متغيرات التباعد

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

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

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

ابدأ بوحدة التباعد القاعدة. يعمل معظم المصممين مع 8-12 بكسل كأساس ، ولكن يمكنك اختيار 4 بكسل أو 10 بكسل أو أي شيء يناسب إيقاع التصميم الخاص بك. يمكنك استخدام وحدات متقدمة هنا ، بصرف النظر عن وحدات البكسل فقط. على سبيل المثال ، نبدأ بـ REM بدلاً من وحدات البكسل (على افتراض أن المتصفح افتراضي 1REM = 16px):

• GAP XS: 0.75REM (~ 12px للعلاقات الضيقة للأعمدة مع رمز ونص فقط)
• GAP S: 1.25REM (~ 20 بكسل للأعمدة مع كتل نصية)
• GAP M: 2REM (~ 32px لصناديق الميزات ، أعمدة الخدمة)
• GAP L: 3REM (~ 48px لأقسام المحتوى الرئيسية ، تخطيطات الشريط الجانبي)

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

استخدم المشابك لتكوين فجوات قابلة للتطوير

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

• فجوة العمود الأفقي: المشبك (16px ، 2vw ، 32px) (للفجوات الأفقية بين البطاقات والميزات ، إلخ)
• فجوة العمود العمودي: المشبك (16px ، 1.5vw ، 32px) (للفجوات الرأسية بين البطاقات والميزات وما إلى ذلك)

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

على سبيل المثال ، فجوة العمود الأفقي: المشبك (16px ، 2vw ، 32px). تتساقط الفجوة مع عرض الشاشة (2VW = 2 ٪ من عرض العرض). لن يقل عن 16 بكسل على شاشات صغيرة أو أعلى من 32 بكسل على شاشات كبيرة. هذا يحافظ على توازن التباعد دون نقاط التوقف أو استفسارات الوسائط.

يمكنك استخدام أي قيم. لقد اخترنا هذه الطريقة لأنه من السهل الحفاظ عليه ، ويتكيف مع التغيير ، وينتج نتائج أكثر اتساقًا.

2. تمكين تخطيط Flexbox على أقسامك

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

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

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

3. تطبيق قيم الفجوة باستخدام متغيراتك

بمجرد إعداد متغيرات الفجوة في مدير متغير Divi ، يصبح تطبيقها على إعدادات GAP Flexbox مباشرة من خلال نظام المحتوى الديناميكي. انتقل إلى إعدادات التصميم الخاصة بك وتحوم فوق الملصقات في حقول الفجوة الأفقية أو العمودية للكشف عن أيقونة المحتوى الديناميكي.

انقر فوق أيقونة المحتوى الديناميكي لفتح مربع حوار التحديد المتغير. تظهر متغيرات الفجوة المحفوظة في هذه القائمة.

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

فجوات المشابك: بين الأعمدة المرنة

ستعمل فجوات المشبك الخاصة بك على مستوى "الحاوية" من خلال إعدادات Divi Flexbox.

قم بتطبيق فجوة العمود الأفقي [Clamp (16px ، 2vw ، 32px)] عندما يكون لديك أعمدة مرتبة جنبًا إلى جنب ، مثل ثلاث بطاقات خدمة في صف واحد. بمجرد تحديدها ، يقوم Divi تلقائيًا بتطبيقه على إعداد الفجوة. سيعرض الحقل اسمك المتغير ، مما يؤكد الاتصال. هذا يخلق التباعد الأفقي النسبي بين العمود 1 والعمود 2 والعمود 3 عندما يتم تعيين اتجاه التخطيط كصف.

قم بتطبيق فجوة العمود الرأسي [المشبك (16px ، 1.5vw ، 32px)] عندما يتم ضبط اتجاه التخطيط على العمود ، وتكديس عناصر عموديًا. سيؤدي ذلك إلى زيادة نسبة العناصر بشكل متناسب من أعلى إلى أسفل عند تعيين اتجاه التخطيط كعمود.

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

الفجوات الأساسية: المحتوى داخل الصفوف

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

ضع في اعتبارك استخدام GAP S (1.25REM) لمجموعات المحتوى ذات عناصر نصية متعددة أو فجوة L (3REM) إذا كنت بحاجة إلى تباعد كبير بين عمودين ، خاصةً إذا تم تعيين اتجاه تخطيط العمود على صف.

ميزة متغيرات التصميم

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

عند تغيير فلسفة التباعد ، قم بتحديث متغير في المدير المتغير لتحديث كل فجوة تستخدم عبر الموقع.

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

4. إعداد فجوات مستجيبة

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

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

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

تتقلص الفجوة الرأسية القائمة على المشبك وتنمو تلقائيًا مع تغير عرض منفذ العرض. على شاشة هاتف صغيرة ، تساوي 2VW حوالي 7 بكسل ، لكن المشبك لن يتجاوز الحد الأدنى 16 بكسل. على شاشة أكبر ، قد تعني 2VW 18 بكسل ، وعلى شاشة أكبر ، 20 بكسل.

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

قد لا تزال الفجوات الأساسية تحتاج إلى تعديل يدوي لكل نقطة توقف. قد يشعر Gap M بإحكام على الهاتف المحمول. قم بالتبديل إلى نقطة توقف الهاتف المحمول وتطبيق Gap L بدلاً من خيار الفجوة العمودية.

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

5. احفظ التكوين الخاص بك كمسبق مسبق

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

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

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

انقر فوقه وحدد "إنشاء مسبقًا من الأنماط الحالية". قم بتسميةه بناءً على ما يفعله التصميم: "Three Column Grid" أو "Services Grid" أو "عرض البطاقة".

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

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

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

احصل على تباعد مثالي في كل مرة مع Divi 5

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

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