إنشاء نظام التحجيم والتباعد مع متغيرات تصميم Divi 5

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

في هذا المنشور ، سنعرض لك كيفية التفكير في الأنظمة ، وسنتقلك من خلال بناء نظام شامل للتباعد.

Divi 5 جاهز لاستخدامه في أي موقع جديد تقوم بإنشائه ، ولكن يُقترح أن تتوقف عن ترحيل المواقع الموجودة (في الوقت الحالي).

لماذا تستخدم نظام التحجيم والتباعد؟

يريد معظم مستخدمي Divi الاتساق في التخطيطات والهوامش والطباعة. لكن القليل منهم يأخذون الوقت الكافي لتحديد هذه المعايير في وقت مبكر. أو إذا قمت بذلك ، فمن المحتمل أن تكون قد فعلت ذلك من خلال موضوع الطفل المصمم بشكل كبير. الآن ، يمكنك:

اشترك في قناتنا على YouTube

1. حدد متغير الأرقام مرة واحدة (مثل 16px أو المشبك (16px ، 4vw ، 48px))
2. قم بتعيينه إلى Module/Element Presets
3. أو المسبقة لمجموعة الخيارات (مثل التباعد أو التحجيم)
4. قم بتحديث المتغير لاحقًا وشاهد التغييرات المنعكسة على مستوى الموقع
5. استخدم كميات أقل من CSS للصفحات النحيفة

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

حجم العنصر والحشو والهوامش

يحتوي كل عنصر من عناصر الويب على ثلاثة مكونات تؤثر على التباعد الكلي والحجم:

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

أمثلة عملية لعناصر divi

بشكل عام ، هذه هي الطريقة التي تتوقع بها استخدام الحشو والهامش في Divi:

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

قيم التباعد الافتراضية لـ Divi

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

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

1. انتقل إلى أي عنصر وابحث عن مجموعة خيار التباعد ضمن علامة تبويب التصميم .
2. افتح مجموعة الخيارات الافتراضية وقم بتعيين الحشوة العلوية والسفلية على 0 (صفر).
3. احفظ التباعد الافتراضي المسبق لتطبيقه على مستوى الموقع على كل عنصر.

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

باستخدام مقياس تباعد 8 نقاط

مقياس 8 نقاط هو مخطط تخطيط حيث يتم بناء قيم التباعد باستخدام زيادات 8. لذا ، بدلاً من استخدام القيم التعسفية مثل 13px أو 27px ، يمكنك التمسك بقيم مثل 8 و 16 و 24 و 32 و 40 و 48 وما إلى ذلك.

هذا النظام يساعد:

• حافظ على إيقاع عمودي وأفقي باستخدام نموذج ثابت للأحجام
• تأكد من مداخن التباعد بشكل نظيف عبر نقاط التوقف
• تسريع عملية صنع القرار (خيارات أقل = تصميم أسرع)

يمكنك استخدام المقياس في PX أو REM ، اعتمادًا على تفضيلاتك أو نوع الحجم. على سبيل المثال ، يصبح 16px 1 rem عندما يكون حجم الخط الأساسي 16 بكسل.

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

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

كيفية إنشاء نظام التحجيم والتباعد

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

الخطوة 1: إنشاء متغيرات الأرقام في مدير متغير التصميم

يقدم Divi 5 واجهة مرئية لتحديد القيم الرقمية القابلة لإعادة الاستخدام. يتضمن كل متغير رقم:

1. اسم يمكن استدعاؤه بسهولة (على سبيل المثال ، GAP-SM ، Text-H1) ليس طويلاً جدًا
2. قيمة رقمية أو وظيفة calc () أو المشبك ()
3. وحدة CSS (PX ، REM ، ٪ ، VW ، إلخ)

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

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

وإليك ما يبدو أن يملأ هذا في المدير المتغير.

لاحظ أن قيم التباعد هذه ستكون مفيدة في ميزة Flexbox القادمة من Divi 5

الخطوة 2: التخطيط لنظام التباعد المكون من 8 نقاط

سوف تحتوي صفحاتك عادةً على أنماط تكرار للعناصر. ابحث عن مجموعات أو مجموعات شائعة مثل:

• العنوان ، الفقرة ، زر
• عنوان صغير ، عنوان كبير ، فقرة
• أيقونة ، فقرة
• البطاقات التي تحتوي على عناصر متعددة

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

يمكنك القيام بذلك في Figma أو عن طريق إنشاء صفحة سلكية مباشرة مع عناصر العناصر النائبة في Divi. فقط احصل على كل ما يمكنك وضعه على الصفحة. يمكنك استخدام امتداد Chrome يسمى Measure Everything لمساعدتك في تصور التباعد (في البداية مع التباعد الافتراضي لـ Divi) عند بدء ضبطها.

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

الخطوة 3: تعيين متغيرات الرقم إلى إعدادات مجموعة الخيارات

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

سلكية مع محتوى العنصر النائب وتحجيم الخط/الخط في المكان

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

مثال على خيارات تحجيم الطباعة التي تم إعدادها كمتغيرات الأرقام

الآن ، نريد تقييم التباعد الافتراضي الذي يتم تطبيقه في التصميم. للقيام بذلك ، يمكنك إلقاء نظرة على الرسم البياني في وقت سابق في المنشور ومقارنته بما حدث في قسم البطل. من الواضح أن هناك قسم (#1) وصفين (#2 و#3). في الوقت الحالي ، سنقوم بتعيين حشوة الصف العلوي/السفلي الافتراضي على الصفر.

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

• سطح المكتب : حشو أعلى وأسفل تم تعيينه على Space-XXXL
• الجهاز اللوحي : تم تعيين الحشوة العلوية والسفلية إلى Space-XXL
• الهاتف المحمول : تم تعيين الحشوة العلوية والسفلية على Space-XL

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

الخطوة 4: تباعد الوحدة النمطية

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

لديك خيارات ، يمكنك تقسيم التباعد بطرق متعددة:

• تطبيق التباعد على القمة الهامش
• تطبيق التباعد على القاع
• قم بتطبيق التباعد بالتساوي بين الهامش والقاع الهامش

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

ضمن هذا القسم ، قمنا بتطبيق 0 بكسل على أعلى الهامش والأسفل لرؤية كل هذه الوحدات دون تباعد افتراضي

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

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

كيف ستستخدم Divi 5 لتغيير حجمها والتباعد؟

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

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

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

Divi 5 جاهز لاستخدامه في أي موقع جديد تقوم بإنشائه.