كيفية وضع رأسك تلقائيًا أسفل قسم Divi الأول لكل صفحة

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل قالب رأس مخصص مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. انتقل إلى Divi Theme Builder وأضف قالب صفحة جديد

انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا

ابدأ بالانتقال إلى Divi Theme Builder وإضافة قالب جديد.

استخدام على

استخدم هذا القالب الجديد في جميع الصفحات.

• استخدم في: جميع الصفحات

2. ابدأ في بناء تصميم رأس مخصص

تابع عن طريق بناء رأس مخصص داخل قالب الصفحة.

إعدادات القسم

لون الخلفية

بمجرد دخولك إلى محرر القوالب ، ستلاحظ قسمًا. افتح هذا القسم وقم بتغيير لون الخلفية.

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

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية للقسم بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الحدود

أضف حدًا علويًا وسفليًا أيضًا.

• عرض الحد العلوي والسفلي: 1 بكسل
• لون الحد العلوي والسفلي: # 002d4c

معرف CSS

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

• معرف CSS: رأس مخصص

فهرس Z.

أخيرًا وليس آخرًا ، سنزيد فهرس z للقسم للتأكد من ظهوره أعلى محتوى الصفحة بالكامل.

• الفهرس Z: 99999

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع الحشوة الافتراضية العلوية والسفلية أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

العنصر الرئيسي

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

display: flex;
align-items: center;

العمود 1

تباعد

استمر بفتح إعدادات العمود 1 وإضافة بعض المساحة المتروكة العلوية والسفلية إلى إعدادات التباعد.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

الحدود

أضف حدًا أيمنًا إلى العمود أيضًا.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # 002d4c

أضف وحدة الصورة النمطية إلى العمود 1

تحميل الشعار

حان الوقت لبدء إضافة الوحدات! في العمود 1 ، سنحتاج إلى وحدة صورة. قم بتحميل شعارك.

انتقام

انتقل إلى علامة تبويب تصميم الوحدة وتغيير محاذاة الصورة.

• محاذاة الصورة: المركز

تحجيم

قم بتعديل عرض الوحدة عبر أحجام الشاشات المختلفة أيضًا.

• العرض: 4vw (Desktop) ، 7vw (Tablet) ، 12vw (Phone)

إضافة وحدة قائمة إلى العمود 2

اختر قائمة

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

تخطيط

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات التخطيط على النحو التالي:

• النمط: توسيط
• اتجاه القائمة المنسدلة: لأسفل

نص القائمة

قم بتعديل إعدادات نص القائمة أيضًا.

• خط القائمة: Cabin
• لون نص القائمة: # 77848d
• حجم نص القائمة: 16 بكسل (سطح المكتب) ، 15 بكسل (جهاز لوحي) ، 14 بكسل (هاتف)
• ارتفاع خط القائمة: 1.8em

نص القائمة المنسدلة

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

• لون خلفية القائمة المنسدلة: #ffffff
• لون خط القائمة المنسدلة: # 002d4c

الأيقونات

وأكمل إعدادات الوحدة عن طريق تغيير لون رمز قائمة الهامبرغر في إعدادات الرموز.

• لون أيقونة قائمة همبرغر: # 002d4c

أضف وحدة الزر إلى العمود 3

أضف نسخة

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

انتقام

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير محاذاة الزر.

• محاذاة الزر: الوسط

إعدادات الزر

تابع عن طريق تصميم الزر في إعدادات الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 13 بكسل
• لون نص الزر: # 002d4c
• لون خلفية الزر: #ffffff
• عرض حد الزر: 2 بكسل
• لون حدود الزر: #ffffff (افتراضي) ، # d1d1d1 (تحوم)
• نصف قطر حدود الزر: 0 بكسل

• تباعد حرف الزر: 2 بكسل
• خط الزر: المقصورة
• وزن خط الزر: شبه عريض
• نمط خط الزر: أحرف كبيرة

تباعد

بعد ذلك ، أضف بعض المساحة المتروكة المخصصة عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 16 بكسل
• الحشو السفلي: 16 بكسل
• الحشوة اليسرى: 24 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 13 بكسل (الهاتف)
• الحشوة اليمنى: 24 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 13 بكسل (الهاتف)

مربع الظل

أكمل إعدادات الوحدة عن طريق إضافة ظل الصندوق.

• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 2 بكسل (افتراضي) ، 6 بكسل (تحوم)
• لون الظل: # 002d4c
• موضع ظل المربع: الظل الداخلي

3. ضع رأس الصفحة تلقائيًا بعد المقطع الأول من كل صفحة باستخدام JQuery

أضف وحدة التعليمات البرمجية إلى العمود 2

الآن ، لوضع القائمة تلقائيًا أسفل القسم الأول من كل صفحة ، سنحتاج إلى القليل من كود JQuery. لتضمين هذا الرمز في رأسنا المخصص ، أضف وحدة Code Module إلى العمود 2.

أدخل كود JQuery

أضف الأسطر التالية من كود JQuery ، بين علامات البرنامج النصي كما يمكنك ملاحظته في شاشة الطباعة أدناه ، إلى Code Module لتطبيق التأثير:

jQuery (الوظيفة ($) {
$ ('# custom-header'). insertAfter ('. et_pb_section_0')؛
}) ؛

4. حفظ تغييرات منشئ السمات وعرض النتيجة

وأكمل العنوان المخصص عن طريق حفظ جميع تغييرات أداة إنشاء السمات وعرض النتيجة على صفحاتك!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

في هذا المنشور ، أوضحنا لك كيفية وضع العنوان المخصص الذي تنشئه تلقائيًا باستخدام Divi's Theme Builder بعد قسم Divi الأول لكل صفحة. ستحتاج فقط إلى إنشاء رأس مخصص مرة واحدة ، وإضافة كود JQuery وسيتم تغيير موضع الرأس المخصص تلقائيًا. هذه طريقة رائعة لتغيير موضع الصفحة العلوية العادي للقائمة والسماح لقسم البطل بالتألق أولاً. لقد تمكنت من تنزيل النموذج مجانًا أيضًا! إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه!

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