ديفي: أفضل موضوع وورد في كل العصور!

أكثر تنزيلات 901.000، Divi هو موضوع WordPress الأكثر شعبية في العالم. إنها كاملة وسهلة الاستخدام وتأتي مع أكثر من 62 قوالب مجانية.

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

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

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

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

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

انطلاق !

مسح

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

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

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

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

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

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

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

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

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

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

ديفي

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

ديفي

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

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

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

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

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

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

بسهولة إنشاء موقع الويب الخاص بك مع Elementor

يتيح لك Elementor إنشاء ملفات بسهولة ومجانا أي موقع ويب أو تصميم مدونة بمظهر احترافي. توقف عن دفع الكثير مقابل موقع ويب يمكنك القيام به بنفسك.

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

وحدة رأس Fullwidth

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

تخصيص وحدة 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 درجة

هل تريد بيع منتجاتك على الإنترنت؟

قم بتنزيل WooCommerce مجانًا ، أفضل المكونات الإضافية للتجارة الإلكترونية لبيع منتجاتك المادية والرقمية على WordPress وإنشاء متجرك عبر الإنترنت بسهولة. مثالي للمبتدئين.

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

  • الزر الأول:
    • عرض الحدود: 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: كيفية إنشاء قسم لأعضاء الفريق كمنصة دائرية

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

تحميل DIVI Now !!!

في الختام

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

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

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

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

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

...

%d المدونين مثل هذه الصفحة: