5 أنماط وحدة رأس Divi الإبداعية يمكنك تحقيقها باستخدام الإعدادات المضمنة

من خارج الصندوق ، يمكن لوحدة Divi Header Module إنشاء تصميمات رأسية مذهلة مع بعض التعديلات فقط. هذا يجعلها وحدة شائعة للغاية عند تصميم رؤوس لموقع الويب الخاص بك في Divi. وبقليل من التفكير خارج الصندوق ، يمكنك إنشاء بعض التصميمات الفريدة حقًا باستخدام الإعدادات المضمنة فقط (بدون CSS مخصص). لذلك بالنسبة لأولئك منكم الذين يرغبون في استكشاف بعض تصميمات الرأس الجديدة ، سأعرض لك 5 أنماط من أنماط وحدة رأس Divi التي قد تلهمك.

يتمتع!

نظرة خاطفة على 5 أنماط وحدة Divi Header

النمط رقم 1: التدرج المجرد

ابدأ في تصميم النمط رقم 1

نمط رقم 2: التهديد الثلاثي

ابدأ في تصميم النمط رقم 2

نمط رقم 3: الإطار المستدير

ابدأ في تصميم النمط رقم 3

نمط رقم 4: اليسار المخلوط

ابدأ في تصميم النمط رقم 4

نمط رقم 5: نوع التحجيم الكبير

ابدأ في تصميم النمط رقم 5

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

للبدء ، ستحتاج إلى سمة Divi. سأستخدم Divi Builder لبناء التصميمات على الواجهة الأمامية. ستحتاج أيضًا إلى بعض الصور لإكمال البرنامج التعليمي. تذكر أنه يمكنك دائمًا استيراد صور تخطيط مسبق الصنع. في الواقع ، بالنسبة لهذا البرنامج التعليمي ، سأستخدم صورًا من Cleaning Company Layout Pack و Business Coach Layout Pack و Web Freelancer Layout Pack.

هيا بنا نبدأ!

اشترك في قناتنا على اليوتيوب

النمط رقم 1: The Abstract Gadient

تصميم وحدة رأس Divi الأول هذا هو تصميم بسيط متعدد الأغراض يستخدم خلفيات متدرجة بطريقة إبداعية.

للبدء ، أضف قسم كامل العرض جديد مع وحدة رأس fullwidth.

قم بتحديث محتوى إعدادات الرأس بعنوان جديد وصورة الرأس.

ثم قم بتحديث إعدادات التصميم على النحو التالي:

خط العنوان: Lato
حجم نص العنوان: 6vw
لون خلفية الزر واحد: # 0c71c3
عرض زر واحد الحد: 0 بكسل
الحشو المخصص: 8vw top ، 8vw bottom

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

لون الخلفية: rgba (255،255،255،0)
اللون الأيسر متدرج للخلفية: # 0096eb
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)
نوع التدرج: شعاعي
الاتجاه الشعاعي: أسفل اليمين
موقف البداية: 25٪
موقف النهاية: 0٪

احفظ التغييرات

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

اللون الأيسر متدرج للخلفية: # 0096eb
تدرج الخلفية اللون الصحيح: # 007ea1
نوع التدرج: شعاعي
اتجاه شعاعي: أعلى اليسار
موقف البداية: 43٪
موقف النهاية: 0٪

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

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

نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: rgba (150،210،210،0.2)
ارتفاع الحاجز العلوي: 8vw
تكرار الحاجز العلوي الأفقي: 0.7x
الوجه الفاصل العلوي: عمودي

نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: rgba (150،210،210،0.2)
ارتفاع الحاجز السفلي: 10vw
تكرار المقسم السفلي الأفقي: 0.5x
الوجه الفاصل السفلي: عمودي

هذا كل شيء! تحقق من التصميم النهائي.

نمط رقم 2: التهديد الثلاثي

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

قم بإنشاء قسم fullwidth جديد برأس fullwidth.

ثم قم بتحديث نص العنوان ، ونص ارتباط الزر رقم 1 ، ونص ارتباط الزر رقم 2.

ثم قم بتحديث باقي التصميم على النحو التالي:

لون الخلفية: # 1a1844
توجيه النص والشعار: المركز
الرمز: انظر لقطة الشاشة
حجم أيقونة التمرير لأسفل: 20 بكسل
خط العنوان: Lato
وزن خط العنوان: ثقيل
حجم نص العنوان: 5vw (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 30 بكسل (هاتف ذكي)
ارتفاع خط العنوان: 1.3em
الزر الثاني لون الخلفية: # fe4943
عرض الزر اثنين من الحدود: 0 بكسل
رمز الزر الثاني: السهم الأيمن (انظر لقطة الشاشة)
لون الخلفية للزر الأول: # fe4943
عرض زر واحد الحد: 0 بكسل
رمز الزر الأول: السهم الأيسر (انظر لقطة الشاشة)
وضع رمز الزر الأول: اليسار
الحشو المخصص: 10vw top ، 10vw left

الآن كل ما يتعين علينا القيام به هو إضافة فواصل الأقسام الخاصة بنا لإنشاء تصميم الخلفية المثلثية. افتح إعدادات القسم وقم بتحديث إعدادات التصميم التالية:

نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: rgba (255،255،255،0.3)
ارتفاع الحاجز العلوي: 45vw

نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: rgba (255،255،255،0.1)
ارتفاع الحاجز العلوي: 45vw

الآن دعنا نتحقق من التصميم النهائي:

نصيحة تصميم إضافية: تعديلات الهاتف للأزرار

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

افتح إعدادات الصفحة في Divi Builder وأضف CSS التالي

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

انظر الآن إلى التصميم على الهاتف المحمول.

نمط رقم 3: الإطار المستدير

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

للبدء ، قم بإنشاء قسم fullwidth جديد برأس fullwidth.

أولاً ، دعنا نقوم بتحديث عناصر المحتوى للرأس عن طريق إضافة العنوان ونص رابط الزر رقم 1 وصورة الشعار.

بعد ذلك ، أضف صورة خلفية كبيرة بما يكفي لتمتد على ارتفاع وعرض الرأس. نظرًا لأن هذا سيكون رأسًا مستديرًا ، فحاول استخدام صورة بنفس الارتفاع والعرض (مثل 1000 بكسل × 1000 بكسل).

ثم قم بتحديث باقي إعدادات التصميم على النحو التالي:

احفظ التغييرات.

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

لون الخلفية: # 000000
الحشو المخصص: 5vw top، 5vw bottom

الآن تحقق من التصميم النهائي.

اليساري المخلوط

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

هيا بنا نبدأ.

أولاً ، قم بإنشاء قسم fullwidth جديد برأس fullwidth.

قبل أن نبدأ في تحديث أنماط الرأس ، انتقل إلى إعدادات القسم أولاً وأضف الخلفية التالية:

أضف صورة خلفية مع النقطة المحورية للصورة إلى اليمين.

تدرج الخلفية اللون الأيسر: rgba (0،0،0،0.54)
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0)
اتجاه التدرج: 90 درجة
الاتجاه الشعاعي: أسفل اليمين
موقف البداية: 50٪
موقف النهاية: 0٪
وضع التدرج فوق صورة الخلفية: نعم

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

افتح إعدادات الرأس وقم بتحديث المحتوى بعنوان ، ونص رابط الزر رقم 1 ، وشعار غامق.

الآن قم بتغيير لون الخلفية إلى الأبيض.

ثم قم بتحديث ما يلي:

وزن خط العنوان: غامق للغاية
لون نص العنوان: # 000000
حجم نص العنوان: 8vw
ارتفاع خط العنوان: 1.1em
حجم نص الزر ONe: 2.7vw
لون نص الزر الأول: # 000000
عرض زر واحد الحد: 0.2em
لون حدود الزر الأول: # edf000
وزن الخط: عريض للغاية
العرض: 50٪ (سطح المكتب والجهاز اللوحي والهاتف الذكي)
وضع المزج: الشاشة

ها هو التصميم النهائي.

نمط رقم 5: نوع التحجيم الكبير

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

للبدء ، قم بإنشاء قسم fullwidth جديد برأس fullwidth.

في إعدادات الرأس fullwidth ، قم بتحديث ما يلي:

العنوان: استشارة
نص العنوان الفرعي: الخدمات
زر # 1 نص الرابط: ابدأ الآن

احذف النص الافتراضي في مربع المحتوى.

ثم أضف صورة شعار خفيفة.

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

width: 100% ;
max-width: 100% ;

الآن قم بتحديث باقي إعدادات التصميم على النحو التالي:

أضف صورة خلفية.
توجيه النص والشعار: المركز
خط العنوان: Cuprum
وزن خط العنوان: غامق
نمط خط العنوان: TT
لون نص العنوان: #bfbfbf
حجم نص العنوان: 10vw
تباعد حروف العنوان: 0.1em
خط العنوان الفرعي: Cuprum
محاذاة نص العنوان الفرعي: يمين (يساعد هذا في توسيط النص مع تباعد الأحرف)
حجم نص العنوان الفرعي: 3vw
تباعد حروف العنوان الفرعي: 7.8vw
عرض زر واحد الحد: 0 بكسل
زر واحد الخط: Cuprum
رمز الزر الأول: انظر لقطة الشاشة

الحيلة هي استخدام وحدة طول vw للنص. ثم اضبط تباعد حروف العنوان الفرعي ليتماشى مع نص العنوان بأفضل ما يمكنك.

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

عرض المحتوى: 80٪؛

على الرغم من أن هذا أقل من القيمة الافتراضية 100٪ ، فإن تغيير الإعداد سيؤدي إلى تجاوز الإعداد الافتراضي والضبط باستخدام css المخصص الذي أضفناه سابقًا.

أخيرًا ، أضف ظل مربع لإكمال التصميم:

Box Shadow: انظر لقطة الشاشة
مربع قوة طمس الظل: 0 بكسل
قوة انتشار الظل المربع: 60 بكسل

الآن تحقق من النتيجة النهائية.

تحويلها إلى رؤوس ملء الشاشة!

يمكن بسهولة عمل التصميمات أعلاه بملء الشاشة بنقرة زر واحدة. هذه ميزة قوية لوحدة الرأس fullwidth. ما عليك سوى الانتقال إلى إعدادات تصميم الرأس وتحديد خيار "Make Fullscreen".

ستحتاج أيضًا إلى إزالة الحشوة المخصصة لهذه التصميمات حتى يتلاءم الرأس تمامًا مع نافذة المتصفح.

افكار اخيرة

هذه ليست سوى عدد قليل من إمكانيات تصميم الرأس المتاحة مع وحدة Divi Header. ويمكن أن يكون تجربة جميع إعدادات التصميم أمرًا ممتعًا للغاية. إذا كان هناك أي شيء ، آمل أن تكون هذه الأمثلة بمثابة مصدر إلهام صغير لمشروعك التالي.

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!