كيفية جعل وحدة Divi Fullwidth Header الخاصة بك بملء الشاشة

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

هيا بنا نبدأ.

معاينة رأس ملء الشاشة

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

سطح المكتب

لوح

هاتف

لماذا إنشاء رأس ملء الشاشة مع وحدة رأس العرض Fullwidth من Divi؟

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

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

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

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

هناك بعض الأشياء التي يجب وضعها في الاعتبار عند إنشاء رأس ملء الشاشة:

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

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

ابدأ بإضافة قسم كامل العرض إلى الصفحة التي تعمل عليها. بعد ذلك ، أضف وحدة Fullwidth Header Module إلى قسم fullwidth.

سيتم فتح إعدادات الوحدة. حدد علامة التبويب التصميم. قم بتمكين الخيار المسمى Make Fullscreen .

لدينا الآن رأس ملء الشاشة. بكل بساطة.

تمكين رمز التمرير لأسفل ملء الشاشة

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

في إعدادات الوحدة ، سنرى قسمًا يسمى Scroll Down Icon ضمن خيارات Layout. انقر فوق الزر لتمكين إظهار زر التمرير لأسفل .

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

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

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

إعدادات وحدة رأس ملء الشاشة

فيما يلي خطوات كل قسم من الإعدادات في وحدة رأس ملء الشاشة.

نص

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

• العنوان: Divi Photography Studio
• العنوان الفرعي: التصوير
• الزر 1: موجز المشروع
• الزر 2: تخطيط المشروع
• الجسم: المحتوى

الصور

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

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

خلفية

قم بالتمرير لأسفل إلى الخلفية واضبط اللون على # f6f5ee.

• اللون: # f6f5ee

تَخطِيط

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

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

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

بعد ذلك ، قم بتمكين رمز التمرير لأسفل . قم بتغيير اللون إلى الأسود لأجهزة الكمبيوتر المكتبية والأجهزة اللوحية والأبيض للهواتف. مع الصورة التي حددتها ، سيظهر الرمز على الصورة في الجزء السفلي للهواتف وهذا يسمح لها أن تكون مرئية مع ألوان الصورة. قم بتغيير حجم الرمز إلى 70 بكسل لأجهزة الكمبيوتر المكتبية و 60 بكسل للأجهزة اللوحية و 50 بكسل للهواتف.

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

نص العنوان

بعد ذلك ، سنقوم بتعديل نص العنوان . اضبط النص على H1 واختر Inter للخط. اضبط الوزن على غامق والمحاذاة إلى المركز واللون على الأسود.

• العنوان: H1
• الخط: Inter
• الوزن: جريء
• المحاذاة: المركز
• اللون: # 000000

سنستخدم ثلاثة أحجام لحجم الخط : 75 بكسل لأجهزة الكمبيوتر المكتبية ، و 40 في الثانية للأجهزة اللوحية ، و 24 بكسل للهواتف. قم بتغيير ارتفاع الخط إلى 1.2em.

• الحجم: 75 بكسل سطح المكتب ، 40 بكسل لوحي ، 24 بكسل الهاتف
• ارتفاع الخط: 1.2em

نص أساسي

بعد ذلك ، قم بالتمرير لأسفل إلى Body Text . اختر Open Sans للخط. اضبط المحاذاة على اليسار واللون إلى الأسود.

• الخط: Open Sans
• المحاذاة: اليسار
• اللون: # 000000

اضبط حجم الخط على 16 بكسل لأجهزة الكمبيوتر المكتبية و 15 بكسل للأجهزة اللوحية و 14 بكسل للهواتف. قم بتغيير ارتفاع الخط إلى 1.8em.

• الحجم: 16 بكسل سطح المكتب ، 15 بكسل اللوحي ، 14 بكسل الهاتف
• ارتفاع الخط: 1.8em

نص الترجمة

بعد ذلك ، قم بالتمرير لأسفل إلى نص الترجمة . قم بتغيير الخط إلى Inter. اضبط الوزن على غامق ، والنمط على TT ، والمحاذاة إلى المركز ، واللون على # ff5a17.

• الخط: Inter
• الوزن: جريء
• النمط: TT
• المحاذاة: المركز
• اللون: # ff5a17

قم بتغيير الحجم إلى 14 بكسل لجميع أحجام الشاشات الثلاثة. قم بتغيير تباعد الأحرف إلى 1 بكسل وارتفاع الخط إلى 1.4em.

• الحجم: 14 بكسل
• تباعد الأحرف 1 بكسل
• ارتفاع الخط: 1.8em

زر واحد

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

• استخدام الأنماط المخصصة للزر: نعم
• الحجم: سطح المكتب 20 بكسل ، قرص 18 بكسل ، هاتف 16 بكسل
• لون النص: # 000000

غيّر لون الخلفية إلى الأبيض واضبط عرض الحدود ونصف القطر على 0 بكسل.

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

قم بتغيير الخط إلى إنتر والوزن إلى غامق.

• الخط: Inter
• الوزن: جريء

بعد ذلك ، حدد الرمز المفضل لديك ، وقم بتغيير اللون إلى الأسود ، واضبط موضع الزر على اليسار ، وقم بتعطيل Only Show Icon On Hover For Button One.

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

أخيرًا ، قم بالتمرير لأسفل إلى خيارات Button One's Padding . سنستخدم حشوة مختلفة لكل حجم شاشة. بالنسبة لسطح المكتب ، استخدم 20 بكسل للأعلى والأسفل ، و 40 بكسل لليسار ولليمين. بالنسبة للأجهزة اللوحية ، قم بتغيير المساحة المتروكة العلوية والسفلية إلى 16 بكسل. على الهواتف ، قم بتغيير المساحة المتروكة العلوية والسفلية إلى 12 بكسل. اترك الحشوة اليمنى واليسرى كما هي لجميع الثلاثة.

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

الزر الثاني

أخيرًا ، قم بالتمرير لأسفل إلى الزر الثاني . حدد استخدام الأنماط المخصصة للزر . اضبط حجم الخط على 20 بكسل لأجهزة الكمبيوتر المكتبية ، و 19 بكسل للأجهزة اللوحية ، و 16 بكسل للهواتف. قم بتغيير لون النص إلى الأبيض.

• استخدام الأنماط المخصصة للزر: نعم
• الحجم: سطح المكتب 20 بكسل ، قرص 18 بكسل ، هاتف 16 بكسل
• لون النص: #ffffff

قم بتغيير لون الخلفية إلى # ff5a17. اضبط عرض الحدود ونصف القطر على 0 بكسل.

• لون الخلفية: # ff5a17
• عرض الزر اثنين من الحدود: 0 بكسل
• نصف قطر الحد الثاني للزر: 0 بكسل

بعد ذلك ، قم بتغيير الخط إلى إنتر والوزن إلى غامق.

• الخط: Inter
• الوزن: جريء

اختر الرمز المفضل لديك. قم بتغيير اللون إلى اللون الأسود ، واضبط Button Placement على اليسار ، وقم بتعطيل Only Show Icon On Hover For Button Two.

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

أخيرًا ، قم بالتمرير لأسفل إلى خيارات الزر الثاني الخاصة بالحشو . بالنسبة لسطح المكتب ، استخدم 20 بكسل للأعلى والأسفل ، و 40 بكسل لليسار ولليمين. على الأجهزة اللوحية ، قم بتغيير المساحة المتروكة العلوية والسفلية إلى 16 بكسل. بالنسبة للهواتف ، قم بتغيير المساحة المتروكة العلوية والسفلية إلى 12 بكسل. أغلق الوحدة واحفظ عملك.

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

نتائج رأس ملء الشاشة

إليك كيفية ظهور رأس العرض الكامل على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف.

سطح المكتب

لوح

هاتف

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

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

نريد أن نسمع منك. هل قمت بعمل ملء الشاشة Divi Fullwidth Header؟ واسمحوا لنا أن نعرف عن ذلك في التعليقات.