كيفية تصميم خلفية وحدة عرض Fullwidth الخاصة بك

نشرت: 2022-09-28

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

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

معاينة التصميم

دعنا نلقي نظرة على الرؤوس الثلاثة ذات العرض الكامل التي سنقوم بتصميمها اليوم.

مجتمع ديفي بوشكرافت

يستخدم التصميم الأول خيارات صورة خلفية Divi لإنشاء خلفية مزخرفة فريدة من نوعها وعلى العلامة التجارية لمجتمع Bushcraft.

الصف الثاني للسيدة نيكول

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

رأس سمسار عقارات

يستخدم التصميم الثالث صورة الخلفية وتدرج الخلفية ونمط الخلفية ، وكلها مجتمعة لإنشاء تصميم مرتفع ولكنه دقيق للصفحة الرئيسية للسمسار.

قم بتنزيل التخطيطات مجانًا

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

قم بتنزيل الملفات
تنزيل مجاني

تنزيل مجاني

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

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد قالب الرأس إلى مكتبة Divi الخاصة بك ، قم بما يلي:

  1. انتقل إلى Divi Theme Builder.
  2. انقر فوق الزر "استيراد" في الجزء العلوي الأيمن من الصفحة.
  3. في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد
  4. اختر ملف التنزيل من جهاز الكمبيوتر الخاص بك (تأكد من فك ضغط الملف أولاً واستخدم ملف JSON).
  5. ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

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

  1. قم بتثبيت Divi على موقع WordPress الخاص بك.
  2. أضف صفحة ، وأعطها عنوانًا ، وانشرها.
  3. قم بتمكين Visual Builder.

إنشاء صفحتنا

بمجرد النقر فوق الزر "استخدام Divi Builder" ، سيتم إعادة تحميل الصفحة باستخدام واجهة Divi للسحب والإفلات. ستظهر ثلاثة خيارات ولأغراض اليوم ، حدد "Build From Scratch" حتى يكون لدينا قائمة فارغة حيث يمكننا بناء رؤوسنا كاملة العرض.

كيفية تصميم عنوان العرض الكامل لمجتمع Divi Bushcraft

أضف مقطع Fulldwith ورأس Fullwidth

أولاً ، سنحتاج إلى إضافة قسم كامل العرض إلى صفحتنا. انقر فوق رمز "+" لإظهار خيارات القسم ثم انقر فوق "Fullwidth". سيؤدي هذا إلى تحميل مكتبة الوحدة النمطية fullwidth حيث يمكنك تحديد "Fullwidth Header" من الخيارات. سيؤدي هذا إلى تحميل وحدة الرأس ذات النطاق الكامل إلى صفحتك.

أضف المحتوى

سنقوم الآن بإضافة محتوى الوحدة الخاصة بنا في علامة تبويب النص. قم بتكوين الإعدادات التالية:

  1. نص العنوان: مجتمع Divi Bushcraft
  2. نص العنوان الفرعي: Divi Bushcraft
  3. الزر رقم 1: انضم اليوم
  4. الزر رقم 2: معرفة المزيد
  5. نص الجسد: في vero eos et accusamus et iusto odio gentissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

نمط الخلفية

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

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

بمجرد الحصول على الصور ، أضف صورة خلفية.

  1. انقر فوق الرمز الثالث ، رمز الصورة.
  2. انقر فوق "إضافة صورة الخلفية". سيؤدي ذلك إلى إظهار مكتبة الوسائط حيث يمكنك تحميل صورة جديدة أو تحديد صورة من مكتبة الوسائط الخاصة بك.
  3. اضبط وضع مزج صورة الخلفية على التراكب .
  4. انقر فوق الرمز الأول ، رمز دلو الطلاء ، وقم بتعيين لون خلفية لـ: rgba (10،10،10،0.3)

اختر التخطيط

أسفل إعدادات التصميم ، في علامة التبويب تخطيط ، حدد محاذاة للوسط. بدّل خيار "Make Fullscreen" إلى "نعم".

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

صمم نص العنوان عن طريق تكوين هذه الإعدادات:

  1. مستوى عنوان العنوان: H1
  2. خط العنوان: Josefin Sans
  3. وزن خط العنوان: غامق
  4. نمط خط العنوان: أحرف كبيرة
  5. حجم نص العنوان: 7rem

نمط النص الأساسي

صمم النص الأساسي عن طريق تكوين هذه الإعدادات:

  1. خط الجسم: جوزفين سانس
  2. حجم النص الأساسي: 20 بكسل

نمط نص العنوان الفرعي

صمم نص الترجمة عن طريق تكوين هذه الإعدادات:

  1. خط الترجمة: Josefin Sans
  2. وزن خط الترجمة: شبه عريض
  3. نمط خط الترجمة: أحرف كبيرة
  4. تباعد أحرف الترجمة: 3 بكسل
  5. ارتفاع خط الترجمة: 5em

زر النمط رقم 1

الآن دعنا نصمم الأزرار! بالنسبة للزر الأول ، قم بتهيئة هذه الإعدادات:

  1. استخدام الأنماط المخصصة للزر الأول: نعم
  2. حجم نص الزر: 14 بكسل
  3. لون نص الزر واحد: # 666b4a
  4. خلفية الزر الأول: # ead5a4
  5. عرض زر واحد الحد: 0 بكسل
  6. نصف قطر الحد الواحد للزر: 0 بكسل
  7. زر تباعد حرف واحد: 3 بكسل
  8. نمط خط الزر الأول: أحرف كبيرة
  9. زر واحد الحشو: 15 بكسل أعلى وأسفل ؛ 25 بكسل يمينًا ويسارًا.

زر النمط رقم 2

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

  1. استخدام الأنماط المخصصة للزر الأول: نعم
  2. حجم نص الزر: 14 بكسل
  3. لون نص الزر واحد: # ead5a4
  4. خلفية الزر الأول: # 666b4a
  5. عرض زر واحد الحد: 0 بكسل
  6. نصف قطر الحد الواحد للزر: 0 بكسل
  7. تباعد حرف واحد للزر: 3 بكسل
  8. نمط خط الزر الأول: أحرف كبيرة
  9. زر واحد الحشو: 15 بكسل أعلى وأسفل ؛ 25 بكسل يمينًا ويسارًا.

وفويلا! لديك رأس كامل العرض مصمم بشكل جميل مع صورة خلفية مزخرفة مع تراكب لمجتمع Divi Bushcraft.

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

الآن دعونا نصمم رأسًا بعرض كامل لفصل السيدة نيكول في الصف الثاني! يستخدم هذا العنوان صورة خلفية وتدرجًا لإنشاء تصميم ممتع وجديد. هيا بنا نبدأ!

أضف صفحة جديدة ، ثم أضف قسم Fullwidth و Fullwidth Header

أولاً ، سنحتاج إلى إضافة قسم كامل العرض إلى صفحتنا. انقر فوق رمز "+" لإظهار خيارات القسم ثم انقر فوق "Fullwidth". سيؤدي هذا إلى تحميل مكتبة الوحدة النمطية fullwidth حيث يمكنك تحديد "Fullwidth Header" من الخيارات. سيؤدي هذا إلى تحميل وحدة الرأس ذات النطاق الكامل إلى صفحتك.

أضف المحتوى

سنقوم الآن بإضافة محتوى الوحدة الخاصة بنا في علامة تبويب النص. قم بتكوين الإعدادات التالية:

  1. نص العنوان: مرحبًا بكم في فصل الصف الثاني للسيدة نيكول
  2. نص الترجمة: مرحبًا
  3. الزر رقم 1: عرض الواجبات
  4. الزر رقم 2: اتصل بالسيدة نيكول
  5. نص الجسم: Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.

نمط الخلفية

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

صمم الخلفية عن طريق تكوين هذه الإعدادات:

  1. انقر فوق علامة التبويب الثانية ، رمز التدرج.
  2. قم بتعيين توقفات التدرج اللوني على: #ffffff عند 40٪ ، وشفافة عند 18٪.
  3. اضبط اتجاه التدرج على 219 درجة.
  4. قم بتبديل "نعم" لوضع التدرج فوق صورة الخلفية.
  5. انقر فوق الرمز الثالث ، رمز الصورة ، وانقر فوق "إضافة صورة خلفية".

اختر التخطيط

هنا حيث سنقوم بمحاذاة محتوى الوحدة مع المركز وجعلها في وضع ملء الشاشة.

  1. محاذاة النص والشعار: الوسط
  2. عمل ملء الشاشة: نعم

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

صمم نص العنوان عن طريق تكوين هذه الإعدادات:

  1. خط العنوان: Candal
  2. حجم نص العنوان: 4rem

نمط النص الأساسي

صمم النص الأساسي عن طريق تكوين هذه الإعدادات:

  1. خط الجسم: مونتسيرات
  2. لون النص الأساسي: # 6d6d6d
  3. حجم النص الأساسي: 20 بكسل

نمط نص الترجمة

صمم نص الترجمة عن طريق تكوين هذه الإعدادات:

  1. وزن خط الترجمة: عريض للغاية
  2. نمط خط الترجمة: أحرف كبيرة
  3. لون نص الترجمة: rgba (28،10،10،0.6)
  4. تباعد أحرف الترجمة: 3 بكسل
  5. ارتفاع خط الترجمة: 3em

زر النمط رقم 1

زر النمط رقم 1 عن طريق تكوين هذه الإعدادات:

  1. استخدام الأنماط المخصصة للزر الأول: نعم
  2. حجم الزر الواحد للنص: 15 بكسل
  3. لون نص الزر: #ffffff
  4. خلفية الزر الأول: # 000000
  5. عرض زر واحد الحد: 0 بكسل
  6. نصف قطر الحد الواحد للزر: 0 بكسل
  7. تباعد حرف واحد للزر: 3 بكسل
  8. وزن خط الزر الأول: غامق للغاية
  9. نمط خط الزر الأول: أحرف كبيرة
  10. زر واحد الحشو: 15 بكسل أعلى وأسفل ؛ 25 بكسل يمينًا ويسارًا.

زر النمط رقم 2

زر النمط رقم 2 من خلال تكوين هذه الإعدادات:

  1. استخدام الأنماط المخصصة للزر الثاني: نعم
  2. حجم الزر الثاني للنص: 15 بكسل
  3. لون نص الزر الثاني: # ffd078
  4. الزر الثاني الخلفية: شفافة
  5. عرض الزر اثنين من الحدود: 0 بكسل
  6. نصف قطر الحد الثاني للزر: 0 بكسل
  7. تباعد حرفين الزر: 3 بكسل
  8. وزن الخط الثاني: غامق للغاية
  9. نمط خط الزر الثاني: أحرف كبيرة
  10. لون أيقونة الزر الثاني: # ffd078
  11. فقط إظهار الأيقونة عند التحويم للزر الثاني: لا
  12. زر الحشو: 15 بكسل من الأعلى والأسفل ؛ 25 بكسل يمينًا ويسارًا.

تحجيم

اضبط عرض المحتوى على 70٪.

هاهو! لديك الآن رأس عرض كامل مصمم بالكامل لفصل الصف الثاني للسيدة نيكول.

كيفية تصميم رأس Fullwidth للسمسار

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

أضف صفحة جديدة ، ثم أضف قسم Fullwidth و Fullwidth Header

أولاً ، سنحتاج إلى إضافة قسم كامل العرض إلى صفحتنا. انقر فوق رمز "+" لإظهار خيارات القسم ثم انقر فوق "Fullwidth". سيؤدي هذا إلى تحميل مكتبة الوحدة النمطية fullwidth حيث يمكنك تحديد "Fullwidth Header" من الخيارات. سيؤدي هذا إلى تحميل وحدة الرأس ذات النطاق الكامل إلى صفحتك.

إضافة محتوى

أولاً ، دعنا نضيف المحتوى المطلوب لهذه الوحدة في علامة تبويب النص:

  1. العنوان: لنجد منزل أحلامك
  2. العنوان الفرعي: ديف ميريت - سمسار عقارات
  3. زر # 1 - احجز استشارة مجانية
  4. زر # 2 - أرسل لي بريدًا إلكترونيًا
  5. نص الجسد: من الخطأ الشامل للخطأ الطبيعي ، والوقوع في حالة من الاتساع الشديد ، والابتعاد عن الواقع وشبه الهندسة المعمارية.

نمط الخلفية

أضف تدرجًا

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

  1. توقف التدرج: rgba (56،65،58،0.74) عند 100٪ و # 38413a عند 70٪
  2. اتجاه التدرج: 88 درجة
  3. وضع التدرج فوق صورة الخلفية: نعم

إضافة صورة

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

أضف نمط الخلفية

أضف نمط خلفية عن طريق تكوين هذه الإعدادات:

  1. حدد Tufted من القائمة المنسدلة.
  2. لون النمط: rgba (0،0،0،0.2)

اختر التخطيط

هنا حيث سنقوم بمحاذاة محتوى الوحدة مع المركز وجعلها في وضع ملء الشاشة.

  1. محاذاة النص والشعار: الوسط
  2. عمل ملء الشاشة: نعم

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

صمم نص العنوان عن طريق تكوين هذه الإعدادات:

  1. خط العنوان: Merriweather
  2. حجم نص العنوان: 5rem

نمط النص الأساسي

صمم النص الأساسي عن طريق تكوين هذه الإعدادات:

  1. خط النص الأساسي: Open Sans
  2. حجم النص الأساسي: 16 بكسل
  3. ارتفاع خط الجسم: 2em

نمط نص الترجمة

صمم نص الترجمة عن طريق تكوين هذه الإعدادات:

  1. خط الترجمة: Open Sans
  2. وزن خط الترجمة: غامق
  3. نمط خط الترجمة: أحرف كبيرة
  4. لون نص الترجمة: # b4926b
  5. تباعد أحرف الترجمة: 3 بكسل

زر النمط رقم 1

زر النمط رقم 1 عن طريق تكوين هذه الإعدادات:

  1. استخدام الأنماط المخصصة للزر الأول: نعم
  2. زر حجم نص واحد: 18 بكسل
  3. خلفية الزر الأول: # b4926b
  4. عرض زر واحد الحد: 0 بكسل
  5. نصف قطر الحد الواحد للزر: 0 بكسل
  6. زر واحد الحشو: 10 بكسل أعلى وأسفل ؛ 25 بكسل يمينًا ويسارًا.

زر النمط رقم 2

زر النمط رقم 2 عن طريق تكوين هذه الإعدادات:

  1. استخدام الأنماط المخصصة للزر الثاني: نعم
  2. حجم الزر الثاني للنص: 18 بكسل
  3. عرض اثنين من الحدود: 1 بكسل
  4. زر اثنين من لون الحدود: rgba (255،255،255،0.19)
  5. نصف قطر الحد الثاني للزر: 0x
  6. زر الحشو: 10 بكسل أعلى وأسفل ؛ 25 بكسل يمينًا ويسارًا

هاهو! الآن لديك رأس عرض كامل جميل لموقع سمسار عقارات.

افكار اخيرة

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