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

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

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

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

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

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

انطلاق !

مسح

إليك معاينة لما سنصممه.

ما تحتاجه للبدء

قبل أن تبدأ ، تأكد من أن لديك أحدث إصدار من Divi على جهازك موقع انترنت.

أنت الآن جاهز للبدء!

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

اقرأ أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك

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

لنبدأ باستخدام تخطيط محدد مسبقًا من مكتبة Divi. لهذا التصميم سوف نستخدم الصفحة الرئيسية حزمة تخطيط الطبيب البيطري.

من لوحة تحكم Worpress ، أضف صفحة جديدة إلى ملف موقع انترنت

امنحه عنوانًا ، ثم حدد الخيار استخدم Divi Builder.

سنستخدم تخطيطًا محددًا مسبقًا من مكتبة Divi لهذا المثال. لذا اختر تصفح التخطيطات.

ابحث عن التخطيط وحدده مربي الكلاب.

اختر استخدم هذا التخطيط لإضافة التنسيق إلى صفحتك.

نحن الآن جاهزون للتصميم.

أضف الوحدة النمطية Fullwidth Header

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

أضف وحدة Fullwidth Header إلى القسم.

بعد ذلك ، احذف قسم الرأس الأصلي.

تخصيص وحدة Fullwidth Header

إضافة محتوى

افتح إعدادات الوحدة وأضف محتويات بجانب الوحدة:

• العنوان: طبيب بيطري
• العنوان الفرعي: Divivet. خدمة أفضل أصدقائنا
• الزر رقم 1: جميع الخدمات
• الزر رقم 2: حدد موعدًا
• الجسم: present sapien massa ، convallis a pellentesque nec ، egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat، accumsan id imperdiet et، porttitor at sem. Cras ultricies ligula sed magna captum porta.

بعد ذلك ، أضف صورة رأس.

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

انتقل إلى إعدادات الخلفية. احذف لون الخلفية الأصلي ، ثم أضف تدرجًا للخلفية.

• 0٪: rgba (255,170,205,0.48،XNUMX،XNUMX،XNUMX)
• 40٪: rgba (110,66,255,0.24،XNUMX،XNUMX،XNUMX)
• 87٪: rgba (124,239,255,0.71،XNUMX،XNUMX،XNUMX)
• نوع التدرج: بيضاوي الشكل
• موقف التدرج: صحيح

ثم حدد علامة التبويب قناع الخلفية وأضف قناع خلفية.

• خلفية القناع: ركن النقطة
• لون القناع: #FFFFFF
• التحويل: عمودي

تخصيص النص

التبديل إلى علامة التبويب تصميم وتغيير إعدادات العنوان

• خط العنوان: نونيتو
• وزن خط العنوان: غامق للغاية
• نمط الخط: TT (أحرف كبيرة)

• لون نص العنوان: # a9cb6b
• حجم النص: 14 بكسل
• تباعد حروف العنوان: 2 بكسل

انتقل إلى قسم نص الجسم وتخصيص الخط.

• لون النص: # 000000
• حجم النص الأساسي:
  • سطح المكتب: 18 بكسل
  • الهاتف: 14 بكسل
• ارتفاع خط الجسم: 1.8em

أنظر أيضا: Divi: كيفية تخصيص السلة والبحث عن أيقونات وحدة "Fullwidth Menu"

بعد ذلك ، افتح إعدادات الترجمة وخصص الخط.

• خط الترجمة: Nunito
• وزن خط الترجمة: غامق
• لون النص: # 000000

أخيرًا ، قم بتغيير حجم النص

• حجم نص الترجمة:
  • سطح المكتب: 56 بكسل
  • المنقولة: 32 بكسل
• ارتفاع خط الترجمة: 1.2em

زر التخصيص # 1

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 14 بكسل

أضف تدرجًا في الخلفية إلى الزر. قيم التدرج هي كما يلي:

• 58٪: # 316EFF
• 100٪: # 1D2B60
• اتجاه التدرج: 90 درجة

بعد ذلك ، قم بتخصيص إعدادات الحدود وإعدادات الخط.

• الزر الأول:
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 80 بكسل
  • تباعد الأحرف: 2 بكسل
  • الخط: نونيتو
  • وزن الخط: عريض للغاية
  • النمط: TT (بأحرف كبيرة)
• إظهار رمز الزر الأول: NO

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

• هامش زر واحد
  • أعلى: 200 بكسل
  • القاع: 0 بكسل
• المساحة المتروكة للزر الأول:
  • أعلى: 16 بكسل
  • الأسفل: 16 بكسل
  • اليسار: 2em
  • اليمين: 50em
• ظل المربع: عرض الالتقاط

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

• زر الهامش الأعلى للجوال: 25 بكسل
• زر واحد - يمين - متحرك: 10em

زر التخصيص # 2

أولاً ، انقر بزر الماوس الأيمن فوق الزر رقم 1 وانقر فوق زر نسخ أنماط واحدة.

بعد ذلك ، انقر بزر الماوس الأيمن على الزر الثاني والصق الأنماط من الزر رقم 1.

الآن يمكننا تخصيص الزر الثاني. تغيير لون النص.

• لون الزر الثاني: # 121F60

تخصيص تدرج الخلفية للزر الثاني.

• 30٪: رجبا (0,229,198,0،XNUMX،XNUMX،XNUMX)
• 100٪: # 00e5c6

استخدم الإعدادات سريعة الاستجابة لضبط تدرج الخلفية للأجهزة المحمولة.

• 0٪: rgba (0,229,198,0،XNUMX،XNUMX،XNUMX)
• 100٪: # 00e5c6

بعد ذلك ، اضبط الهامش والحشو لتصميم سطح المكتب.

• هامش الزر الثاني:
  • الأعلى: 0 بكسل
  • القاع: 0 بكسل
  • اليسار: 30٪
• المساحة المتروكة للزر الثاني:
  • أعلى: 16 بكسل
  • القاع: 16 بكسل
  • اليسار: 48em
  • اليمين: 2em

استخدم إعدادات responseifq لتعيين قيم مختلفة للهامش والحشو لتصميم الأجهزة المحمولة.

• الزر الثاني - الهامش الأيسر - الجوال: 5٪
• المساحة المتروكة للزر الثاني:
  • اليسار المحمول: 35٪
  • الحق في الهاتف المحمول: 5٪

عرف المغلق

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

أولاً ، لنبدأ بـ CSS لصورة الرأس. يتيح CSS عرض صورة الرأس أعلى الزر.

z-index: 1;
position:relative;

بعد ذلك ، قم بتخصيص CSS في العنوان. سنقوم بتعيين قيم مختلفة لطرق عرض سطح المكتب والجوّال باستخدام إعدادات سريعة الاستجابة.

لأجهزة كمبيوتر سطح المكتب:

padding-top:50px;
padding-bottom:30px;

للجوال:

padding-top:5px;
padding-bottom:10px;

أخيرًا ، أضف CSS التالي إلى الزر الأول والزر الثاني.

white-space: nowrap;

نتيجة نهائية

هذا هو التصميم النهائي لقسم بطل الرأس كامل العرض.

اقرأ أيضا: Divi: كيفية إنشاء قسم لأعضاء الفريق كمنصة دائرية

تحميل DIVI Now !!!

وفي الختام

تسمح لك وحدة Fullwidth Header بإنشاء قسم Hero جميل بسهولة للإعلان عن خدماتك وإعلامك آخر ما الذي تتحدث عنه؟ موقع انترنت.

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

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

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

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

...