استخدام وحدات Divider لإنشاء أشكال خلفية مع خيارات تحويل Divi

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

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

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بإنشاء صفحة جديدة باستخدام الصفحة المقصودة لحزمة التخطيط شبه القانوني

قم بإنشاء صفحة جديدة وقم بتحميل الصفحة المقصودة لـ Paralegal Layout Pack عليها.

أعد إنشاء المثال رقم 1

تجاوز القسم

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

overflow: hidden;

أضف وحدة Divider إلى العمود 2

الرؤية

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

• إظهار الحاجز: نعم

لون الخلفية

سنستخدم لونًا من لوحة ألوان حزمة التخطيط كلون خلفية للمقسم.

• لون الخلفية: # d94144

اللون

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

• اللون: # f3f1f2

الأنماط

انتقل إلى إعدادات الأنماط وقم بتعديل نمط المقسم.

• نمط المقسم: منقط

تحجيم

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

• وزن الحاجز: 4 بكسل
• الارتفاع: 0 بكسل

تباعد

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

• الهامش العلوي: -30vw (سطح المكتب) ، -100 vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -100vw (سطح المكتب) ، -138vw (كمبيوتر لوحي) ، -300vw (هاتف)
• الحشوة العلوية: 0 بكسل
• الحشوة السفلية: 1.3vw (سطح المكتب) ، 2.2vw (Tablet) ، 3vw (الهاتف)

تحول

مقياس التحويل

حان الوقت لتحويل الوحدة! أول شيء سنفعله في إعدادات التحويل هو زيادة حجم الحاجز عن طريق إضافة قيم مقياس التحويل التالية:

• القاع: 153٪
• اليمين: 500٪

استدارة التحويل

سنقوم أيضًا بتدوير وحدة Divider في إعدادات تدوير التحويل. كما يمكنك أن تلاحظ ، فإن Divider Module لا يتجاوز القسم بفضل هذا السطر الواحد من كود CSS الذي أضفناه في بداية هذا البرنامج التعليمي.

• اليسار: 348 درجة

أعد إنشاء المثال رقم 2

تجاوز القسم

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

overflow: hidden;

أضف صفًا جديدًا إلى نهاية المقطع

هيكل العمود

تابع عن طريق إضافة صف جديد في نهاية القسم باستخدام بنية العمود التالية:

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

إضافة وحدة المقسم

الرؤية

حان الوقت لإضافة وتصميم وحدة Divider Module! تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

لون الخلفية

نحن ، مرة أخرى ، نستخدم أحد الألوان الموجودة في لوحة ألوان حزمة التخطيط كلون للخلفية.

• لون الخلفية: # d94144

اللون

انتقل إلى علامة تبويب التصميم وقم بتغيير لون المقسم أيضًا.

• اللون: # f3f1f2

تحجيم

نحن نتلاعب بإعدادات التحجيم أيضًا.

• وزن الحاجز: 10 بكسل
• الارتفاع: 0 بكسل

تباعد

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

• الحشوة العلوية: 2vw
• الحشوة السفلية: 2.5vw (سطح المكتب) ، 3vw (Tablet) ، 3.9vw (الهاتف)

تحول

مقياس التحويل

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

• القاع: 153٪
• اليمين: 153٪ (كمبيوتر مكتبي) ، 250٪ (جهاز لوحي) ، 500٪ (هاتف)

تحويل الترجمة

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

• أسفل: 25vw (سطح المكتب) ، 27vw (كمبيوتر لوحي وهاتف)
• اليمين: 0 بكسل (سطح المكتب) ، -32vw (الجهاز اللوحي والهاتف)

استدارة التحويل

أخيرًا وليس آخرًا ، سنقوم بتحويل الحاجز الأفقي إلى حاجز رأسي من خلال اللعب مع إعدادات تدوير التحويل.

• اليسار: 270 درجة

أعد إنشاء المثال رقم 3

تجاوز القسم

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

overflow: hidden;

أضف صفًا جديدًا إلى بداية المقطع

هيكل العمود

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

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

إضافة وحدة المقسم

الرؤية

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

• إظهار الحاجز: نعم

لون الخلفية

انتقل إلى إعدادات الخلفية وأضف لونًا للخلفية من اختيارك.

• لون الخلفية: # d94144

اللون

قم بتعديل لون المقسم أيضًا.

• اللون: # f3f1f2

الأنماط

وتغيير نمط الفاصل في إعدادات الأنماط.

• نمط المقسم: منقط

تحجيم

بعد ذلك ، انتقل إلى إعدادات التحجيم وقم بإجراء بعض التغييرات.

• وزن الحاجز: 4 بكسل
• الارتفاع: 0 بكسل

تباعد

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

• الحشوة العلوية: 3vw
• الحشو السفلي: 3vw

مربع الظل

سنضيف أيضًا بعض العمق إلى صفحتنا من خلال إعطاء الحاجز ظل مربع دقيقًا.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.3)

تحول

مقياس التحويل

الآن بعد أن قمنا بتصميم الحاجز ، يمكننا البدء في تحويله. أول شيء سنفعله هو زيادة حجم Divider Module في إعدادات مقياس التحويل.

• القاع: 140٪
• اليمين: 140٪

تحويل الترجمة

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

• القاع: 4vw
• اليمين: 16vw (سطح المكتب) ، 26vw (جهاز لوحي) ، 35vw (هاتف)

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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