كيفية إنشاء أقسام عرض البطل باستخدام Divi

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

مثال

المثال الذي سنوضحه لك كيفية إعادة الإنشاء باستخدام Divi يبدو هكذا على سطح المكتب:

ومثل هذا على الهاتف المحمول:

كيف تجعل قسم البطل الخاص بك مميزًا

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

1. شعار كبير ووصفي ومركزي

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

2. تركيز المحتوى المكتوب

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

3. تسليط الضوء على عروض البيع الفريدة

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

4. تنظيف صورة المنتج

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

كيفية إنشاء أقسام عرض البطل باستخدام Divi

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

إعادة إنشاء المثال مع Divi

الآن بعد أن تجاوزنا الجانب النظري ، حان الوقت لبدء إعادة إنشائه.

تنسيق الرأس

أول شيء عليك القيام به هو اختيار "توسيط" كنمط رأس بالانتقال إلى لوحة معلومات WordPress الخاصة بك > تخصيص> الرأس والتنقل> تنسيق الرأس> واختيار "توسيط" كنمط الرأس ".

إعدادات شريط القوائم الأساسية

بعد ذلك ، ارجع إلى Header & Navigation> Primary Menu Bard> وقم بإجراء التعديلات التالية:

• ارتفاع القائمة: 211 بكسل
• أقصى ارتفاع للشعار: 100 بكسل
• حجم النص: 16
• تباعد الأحرف: 2
• الخط: Lato Light
• نمط الخط: أحرف كبيرة
• لون النص: #FFFFFF
• لون الارتباط النشط: #FFFFFF
• لون الخلفية: rgba (255،255،255،0)
• لون خلفية القائمة المنسدلة: rgba (255،255،255،0)

إضافة قسم جديد

بمجرد الانتهاء من ذلك ، أضف صفحة جديدة ، وقم بتمكين Divi Builder ، وقم بتمكين Visual Builder وإضافة قسم قياسي جديد.

خلفية متدرجة

استخدم خلفية التدرج التالية لهذا القسم:

• اللون الأول: # e2e2e2
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: خطي
• اتجاه التدرج: 180 درجة
• موقف البداية: 40٪
• موضع النهاية: 40٪

الصورة الخلفية

بعد ذلك ، قم بتحميل صورة الخلفية واختر "ضرب" كمزيج صورة الخلفية.

إضافة صف عمودين

لون الخلفية

أضف صفًا من عمودين إلى القسم الذي أنشأته للتو واستخدم '# b7afa1' كلون للخلفية.

العمود 1 خلفية متدرجة

قم بالتمرير لأسفل واستخدم خلفية التدرج التالية للعمود الأول:

• اللون الأول: rgba (255،255،255،0.43)
• اللون الثاني: rgba (255،255،255،0)
• العمود 1 نوع التدرج: شعاعي
• العمود 1 اتجاه التدرج: أعلى اليسار
• موضع البداية للعمود 1: 49٪
• موضع نهاية العمود 1: 49٪

العمود 2 خلفية متدرجة

واستخدم خلفية التدرج التالية للعمود الثاني:

• اللون الأول: rgba (255،255،255،0.43)
• اللون الثاني: rgba (255،255،255،0)
• العمود 2 نوع التدرج: شعاعي
• العمود 2 شعاعي الاتجاه: أسفل اليمين
• موضع البداية للعمود 2: 49٪
• موضع نهاية العمود 2: 49٪

تحجيم

انتقل إلى علامة التبويب "تصميم" ، وقم بتمكين الخيار "Use Custom Gutter Width" واستخدم "1" من أجل Gutter Width.

تباعد

افتح فئة التباعد الفرعية واستخدم الحشوة والهامش التاليين:

• الحشوة العلوية: 0 بكسل (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)
• الحشوة اليمنى: 25 بكسل
• الحشو السفلي: 20 بكسل
• الحشوة اليسرى: 25 بكسل
• الهامش السفلي: 200 بكسل

الوحدة النمطية الأولى Blurb

تمكين الرمز

أضف وحدة Blurb Module إلى العمود الأول من الصف ، وقم بتمكين خيار "Use Icon" واختر رمزًا.

إعدادات الرمز

بعد ذلك ، انتقل إلى إعدادات التصميم وقم بإجراء التغييرات التالية على الفئة الفرعية للصورة والأيقونة:

• لون الأيقونة: #FFFFFF
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 40 بكسل

إعدادات نص الرأس

بعد ذلك ، قم بإجراء الإعدادات التالية على الفئة الفرعية لنص الرأس:

• خط الرأس: Roboto Light
• نمط الخط: جريء
• حجم خط الرأس: 25 بكسل
• لون نص الرأس: #FFFFFF
• ارتفاع خط الرأس: 1.5em

إعدادات النص الأساسي

ستحتاج الفئة الفرعية للنص الأساسي إلى التغييرات التالية:

• خط الجسم: لاتو لايت
• حجم خط الجسم: 13 بكسل
• لون النص الأساسي: #FFFFFF

تحجيم

بعد ذلك ، استخدم "300 بكسل" باعتباره عرض المحتوى.

تباعد

أخيرًا ، استخدم الهامش والحشو التاليين لوحدة Blurb Module:

• الهامش العلوي: -50 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 100 بكسل
• الحشوة اليمنى: 10 بكسل
• حشوة Bototm: 30 بكسل
• الحشو الأيسر: 10 بكسل

استنساخ وحدة Blurb ووضعها في العمود الثاني

استمر باستنساخ وحدة Blurb النمطية المُعدة مسبقًا ووضعها في العمود الآخر أيضًا.

تغيير لون الخلفية

أول شيء يجب عليك تغييره في وحدة Blurb Module المستنسخة هو لون الخلفية. قم بتغييره إلى "rgba (89،60،31،0.5)".

تغيير الايقونة

الشيء التالي والأخير الذي ستحتاج إلى تغييره هو الرمز الموجود في علامة تبويب المحتوى.

نشاط إضافي: أضف خيار ظل مربع جديد لديفي إلى الصف

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

• مربع الظل الأفقي: -3 بكسل
• مربع الظل الوضع الرأسي: 31 بكسل
• مربع قوة طمس الظل: 79 بكسل
• قوة انتشار الظل المربع: -4 بكسل
• لون الظل: # 424242
• موضع ظل المربع: الظل الخارجي

نتيجة

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

وعلى الهاتف المحمول:

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Ellagrin / shutterstock.com