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

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

هل ترغب في عرض الوحدة النمطية Fullwidth Header الخاصة بـ ديفي كامل الشاشة ؟

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

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

دعونا نبدأ.

مسح

دعونا نرى معاينة لما سنقوم بتصميمه في هذا البرنامج التعليمي.

مكتب

لوحة

وحدة Divi Fullwidth Header ملء الشاشة

الهاتف

كيفية جعل رأس Divi Fullwidth الخاص بك رأس ملء الشاشة

ابدأ بإضافة قسم كامل العرض إلى الصفحة التي تعمل عليها.

ثم أضف ملف وحدة رأس Fullwidth إلى قسم العرض الكامل.

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

لدينا الآن رأس ملء الشاشة. إنها بهذه السهولة.

تمكين رمز التمرير

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

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

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

  • إظهار زر التمرير لأسفل: نعم

مثال على رأس ملء الشاشة Divi Fullwidth

معلمات الوحدة النمطية للرأس بعرض كامل

فيما يلي خطوات كل قسم من إعدادات الوحدة النمطية Fullwidth Header.

اقرأ أيضا: Divi: كيفية الجمع بين أقنعة الخلفية والفواصل

نص

جميع أولا ، أضف النص والذي سيكون مرئيًا في الرأس ذي العرض الكامل. يتضمن هذا العنوان والعنوان الفرعي والمحتوى ونص الزر.

  • العنوان: قم بإنشاء مدونتك باستخدام Divi
  • العنوان الفرعي: Blogpascher
  • بورون # 1: ملخص
  • الزر رقم 2: الجدول الزمني
  • نص: (افتراضي)

الصور

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

  • صورة العنوان: اختيارك

خلفية

انتقل إلى خلفيّة وقم بتعيين اللون على # f6f5ee.

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

توفير

بعد ذلك ، انتقل إلى علامة التبويب التصميم.

  • جعل ملء الشاشة: نعم

رمز التمرير لأسفل

  • إظهار زر التمرير لأسفل: نعم
  • لون رمز التمرير لأسفل: # 000000 (سطح المكتب والجهاز اللوحي) ، #ffffff (الهاتف)
  • حجم أيقونة التمرير لأسفل: 70 بكسل (سطح المكتب) ، 60 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)

نص العنوان

بعد ذلك سنقوم بتعديل نص العنوان.

  • مستوى العنوان: H1
  • الخط: Inter
  • وزن الخط: عريض
  • محاذاة النص: الوسط
  • لون النص: # 000000
  • حجم نص العنوان: 75 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 24 بكسل (هاتف)
  • ارتفاع خط العنوان: 1.2em

نص الوصف

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

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

ثم قم بالتمرير لأسفل إلى نص الجسم.

  • الخط: Open Sans
  • المحاذاة: اليسار
  • اللون: # 000000
  • حجم النص: 16 بكسل (سطح المكتب) ، 15 بكسل (جهاز لوحي) ، 14 بكسل (هاتف)
  • ارتفاع الخط: 1.8em

عنوان فرعي

ثم قم بالتمرير لأسفل إلى نص الترجمة.

  • الخط: Inter
  • وزن الخط: عريض
  • النمط: TT
  • المحاذاة: المركز
  • اللون: # ff5a17
  • الحجم: 14 بكسل
  • تباعد الأحرف: 1 بكسل
  • ارتفاع الخط: 1.8em

زر +1

ثم قم بالتمرير لأسفل إلى زر واحد.

  • استخدام الأنماط المخصصة للزر: نعم
  • حجم النص: 20 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 16 بكسل (هاتف)
  • لون النص: # 000000
  • لون الخلفية: #ffffff
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 0 بكسل
  • الخط: Inter
  • وزن الخط: عريض
  • الأيقونة: اختيارك
  • لون الأيقونة: # 000000
  • التنسيب: حق
  • فقط إظهار الأيقونة عند التحويم للزر الأول: لا

أخيرًا ، قم بالتمرير لأسفل إلى الخيارات المساحة المتروكة للزر الأول.

  • حشوة:
    • سطح المكتب: 20 بكسل (أعلى وأسفل) ، 40 بكسل (يسار ويمين)
    • الجهاز اللوحي: 16 بكسل (أعلى وأسفل) ، 40 بكسل (يسار ويمين)
    • الهاتف: 12 بكسل (أعلى وأسفل) ، 40 بكسل (يسار ويمين)

زر +2

أخيرًا ، قم بالتمرير لأسفل إلى الزر الثاني.

  • استخدام الأنماط المخصصة للزر الثاني: نعم
  • حجم النص: 20 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 16 بكسل (هاتف)
  • لون النص: #ffffff
  • لون الخلفية: # ff5a17
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 0 بكسل
  • الخط: Inter
  • وزن الخط: عريض

اختر الرمز المفضل لديك.

  • الأيقونة: اختيارك
  • لون الأيقونة: # 000000
  • التنسيب: اليسار
  • فقط إظهار الرمز عند التحويم للزر الثاني: لا

أخيرًا ، قم بالتمرير لأسفل إلى الخيارات المساحة المتروكة للزر الثاني.

  • حشوة:
    • سطح المكتب: 20 بكسل (أعلى وأسفل) ، 40 بكسل (يسار ويمين)
    • الجهاز اللوحي: 16 بكسل (أعلى وأسفل) ، 40 بكسل (يسار ويمين)
    • الهاتف: 12 بكسل (أعلى وأسفل) ، 40 بكسل (يسار ويمين)

النتائج النهائية

هذا ما يبدو عليه العنوان الكامل العرض على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف.

يمكنك أيضًا استشارة: Divi: كيفية استخدام تأثيرات الظل والتمرير لإنشاء محتوى تفاعلي

مكتب

وحدة Divi Fullwidth Header ملء الشاشة

لوحة

وحدة Divi Fullwidth Header ملء الشاشة

الهاتف

وحدة Divi Fullwidth Header ملء الشاشة

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

في الختام

فيما يلي نظرة على كيفية إنشاء رأس عرض كامل مع وحدة Divi Fullwidth Header الخاصة بك.

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

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

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

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

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

...

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