هل ترغب في إنشاء قسم Hero Divi باستخدام وحدة Fullwidth Header أو تصميم واحد بنفسك؟

إن إنشاء قسم رئيسي لموقع الويب من الصفر أو استخدام وحدة Divi Fullwidth Header هما طريقتان لإنشاء تصميم جذاب لموقع الويب الخاص بك. 

في هذه المقالة ، سنلقي نظرة على إيجابيات وسلبيات استخدام وحدة Fullwidth Header مقابل إنشاء قسم Hero الخاص بك باستخدام Divi.

دعونا نذهب!

أهمية أقسام بطل الموقع

قسم "البطل" هو أول قسم يراه زوار موقعك الإلكتروني عند وصولهم إليه. غالبًا ما يكون عبارة عن لافتة بعرض كامل، ويُطلق عليه أيضًا "رأس البطل". يتميز هذا القسم بأهمية خاصة في موقعك الإلكتروني، إذ يترك انطباعًا أوليًا يدوم طويلًا.

اقرأ أيضا: Divi: كيفية عرض وحدة Fullwidth Header في وضع ملء الشاشة

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

قم بإنشاء قسم Hero من البداية

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

دعنا نلقي نظرة على إيجابيات وسلبيات هذا النهج.

فوائد هذا النهج

أولاً ، دعنا نلقي نظرة على فوائد إنشاء قسم Hero لموقع الويب من البداية باستخدام Divi.

• تحكم كامل في التصميم
• استخدم أي وحدة Divi

مساوئ هذا النهج

الآن دعونا نلقي نظرة على سلبيات إنشاء قسم البطل من الصفر.

• عليك أن تبني من الصفر
• يتطلب تعديلات متعددة

قم بإنشاء قسم Hero باستخدام وحدة Divi Fullwidth Header

يجعل إنشاء قسم بطل باستخدام وحدة Divi Fullwidth Header من السهل إنشاء تصميم مستجيب للجوّال لافت للنظر في دقائق معدودة فقط. 

دعنا نلقي نظرة على إيجابيات وسلبيات هذا النهج.

فوائد هذا النهج

دعنا نلقي نظرة على فوائد إنشاء قسم Hero باستخدام وحدة Divi Fullwidth Header.

• كل المحتوى الخاص بك موجود في وحدة واحدة
• تم تحسين التصميم بالفعل

مساوئ هذا النهج

لنقم الآن بتقييم عيوب تصميم قسم Hero باستخدام وحدة Divi Fullwidth Header.

• مرونة أقل في التصميم

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

بناء قسمي البطل خطوة بخطوة

الآن بعد أن فهمت إيجابيات وسلبيات كلتا الطريقتين ، فلنقم ببناء كل قسم من أقسام Hero حتى تتمكن من معرفة كيفية عمل كل نهج بالضبط.

قم بإنشاء صفحة جديدة باستخدام Divi Builder

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. تثبيت Divi  على موقع الويب الخاص بك وورد.
2. أضف صفحة واعطها عنوانًا.
3. تمكين البناء المرئي

قم بإنشاء قسم Hero من البداية

الآن بعد أن تم إعداد صفحتنا ، فلنبدأ في إنشاء قسم بطل من البداية.

تحميل DIVI الآن !!!

تفعيل "Divi Builder"

من أجل استخدام أداة السحب والإفلات الخاصة بـ Divi ، سنحتاج إلى تنشيط Visual Builder بالنقر فوق الزر "استخدم DiviBuilder". سيؤدي هذا إلى إعادة تحميل الصفحة باستخدام Divi Visual Builder.

حدد: البناء من الصفر

الآن بعد أن تمت إعادة تحميل صفحتك مع تمكين الباني المرئي ، انقر فوق الخيارات " بناء من الصفر حتى يكون لدينا صفحة فارغة للعمل بها عند التصميم.

أضف صفًا وقم بتكوين الأعمدة

قم بإنشاء صف بهيكل العمود التالي.

إضافة تعديل

الآن دعنا نضيف وحدات المحتوى التي سنحتاجها.

• 2 وحدات نصية ، مقسم ، زر في العمود الأيسر
• 1 وحدة صورة في العمود الأوسط
• 1 وحدة صورة في العمود الأيمن

قسم النمط

لنقم الآن بتهيئة إعدادات القسم.

أضف قسمًا ، ثم قم بتهيئة الإعدادات التالية:

• الخلفية: # 1d1d25

نمط نص العنوان

تخصيص نص العنوان:

• العنوان 1:
  • وزن الخط: شبه عريض
  • لون النص: #ffffff
  • حجم النص: 90 بكسل
  • ارتفاع الخط: 1,1 م

الفاصل

تكوين إعدادات الحاجز:

• لون الخط: rgba (255,255,255,0.3،XNUMX،XNUMX،XNUMX)
• وزن الحاجز: 10 بكسل
• العرض الأقصى: 260 بكسل

نص أساسي

تخصيص النص الأساسي:

• لون النص: rgba (255,255,255,0.7،XNUMX،XNUMX،XNUMX)
• حجم النص: 13 بكسل
• ارتفاع الخط: 1,8 م

زر

لنقم الآن بتخصيص الزر.

في علامة التبويب الزر:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 14 بكسل
• لون النص: #ffffff
• خلفية الزر:
• عرض الحدود: 0 بكسل
• نصف قطر الحدود: 0 بكسل

في علامة التبويب "التباعد":

• أعلى وأسفل: 40 بكسل
• اليسار واليمين: 20 بكسل

إضافة صور

أضف الصور إلى وحدات الصورة.

اضبط إعدادات الخط

في معلمات الخط:

• الهامش (يسار): 15vw

ضبط العمود الثاني

في العمود الثاني ، قم بتكوين هذه الإعدادات:

عرف المغلق

الصق الكود التالي في قسم الكود الخاص بالعنصر الرئيسي:

argin-right: -15vw!important;
z-index: 100!important;

مباعدة

أضف 100 بكسل من المساحة المتروكة العلوية.

لذا ! لديك الآن قسم بطل مخصص مصمم بالكامل.

تحميل DIVI الآن !!!

قم بإنشاء قسم Hero باستخدام وحدة Divi Fullwidth Header

الآن دعونا نرى كيفية إعادة إنشاء قسم البطل هذا باستخدام وحدة Divi Fullwidth Header.

تحميل DIVI الآن !!!

أضف صفحة وحدد Build From Scratch

أضف صفحة جديدة ، وأعطها عنوانًا ، ثم انقر على "استخدام Divi Builder" ثم حدد Build From Scratch.

أدخل مقطع عرض كامل ورأس بعرض كامل

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

محتويات

أضف المحتوى النصي إلى الوحدة النمطية في علامة تبويب النص.

صور منشأة بالذكاء الاصطناعي

أضف الصور في علامة تبويب الصورة.

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

في علامة تبويب الخلفية ، قم بتكوين الإعداد التالي:

• الخلفية: # 1D1D25

نص العنوان

تكوين إعدادات نص العنوان:

• وزن خط العنوان: غامق
• حجم النص: 90 بكسل

نص أساسي

تكوين إعدادات النص الأساسي:

• لون نص النص: rgba (255,255,255,0.55،XNUMX،XNUMX،XNUMX)

نص الترجمة

تكوين إعدادات نص التسمية التوضيحية:

• وزن خط الترجمة: غامق
• لون النص: # 4C594C
• تباعد الأحرف: 3 بكسل

أزرار

لنقم الآن بتخصيص الزرين.

زر واحد

في علامة التبويب Button One ، قم بتكوين الإعدادات التالية:

• استخدام الأنماط المخصصة للزر الأول: نعم
• زر واحد
  • الخلفية: # 4c594c
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 0 بكسل
  • إظهار الأيقونة: نعم
  • إظهار الأيقونة فقط عند التمرير: لا
  • المساحة المتروكة: 25 بكسل (أعلى وأسفل) ؛ 25 بكسل (يسار) ، 50 بكسل (يمين)

الزر الثاني

في علامة التبويب الزر الثاني ، قم بتكوين الإعدادات التالية:

• استخدام الأنماط المخصصة للزر الثاني: نعم
• عرض اثنين من الحدود: 0 بكسل
• نصف قطر الحدود: 0 بكسل
• المساحة المتروكة: 25 بكسل (أعلى ، أسفل ، يسار ويمين)
• ظل مربع الزر: اختر الخيار الرابع
• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• لون الظل: #ffffff

لذا ! لديك الآن قسم Hero مصمم بالكامل باستخدام وحدة Divi Fullwidth Header.

أنظر أيضا: Divi: كيفية إنشاء انتقالات خلفية بين العناصر

تحميل DIVI الآن !!!

الخاتمة

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

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

بعد قراءة إيجابيات وسلبيات كليهما ، كيف ستصمم قسم البطل الخاص بك؟

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

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

لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...