كيفية إضافة تسمية ركن "جديد" أو "مميز" إلى عنصر قائمة في رأس Divi المخصص

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

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

معاينة

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

قم بتنزيل قالب Global Header مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إضافة تسميات إلى عناصر قائمة WordPress

انتقل إلى القوائم في المظهر

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

أضف تسمية إلى عنصر القائمة المميز

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

• <label class="menu-label featured-label">Featured</label>

  خدمات

إضافة تسمية إلى عنصر قائمة جديد

سنفعل نفس الشيء لعنصر قائمة آخر من اختيارنا ونغير فئة CSS داخل العلامات جنبًا إلى جنب مع نسخة التسمية.

• <label class="menu-label new-label">New</label>

  دورات مجانية

2. اذهب إلى Divi Theme Builder

انتقل إلى Divi Theme Builder وأضف العنوان العالمي

الآن وقد تم إعداد الملصقات ، فقد حان الوقت للانتقال إلى Divi. انتقل إلى موقع Divi Theme Builder الخاص بموقعك وانقر على "Add Global Header".

ابدأ البناء من الصفر

ثم حدد "Build Global Header" لإعادة توجيهك إلى محرر النموذج.

3. بناء العنوان العالمي

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

لون الخلفية

بمجرد دخولك إلى محرر القوالب ، ستلاحظ قسمًا. افتح هذا القسم وأضف لون الخلفية. يتناسب تصميم الرأس الذي سننشئه بشكل جيد مع Tutor Layout Pack ، ولكن لا تتردد في إنشاء أي تصميم رأس تريده ، طالما قمت بتضمين Code Module (لاحقًا) فيه.

• لون الخلفية: # 2a3749

تباعد

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

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

الرؤية

نظرًا للتداخل الذي سنضيفه إلى صفنا (كما يمكنك ملاحظته في المعاينة) ، سنحتاج إلى ضبط الفائض في القسم بحيث يكون مرئيًا.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

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

هيكل العمود

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

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتطبيق لون خلفية بيضاء.

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

تحجيم

انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات التحجيم وفقًا لذلك:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

سنطبق بعض قيم الحشو المخصصة على إعدادات التباعد أيضًا.

• الحشوة العلوية: 25 بكسل
• الحشو السفلي: 25 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

الحدود

مع بعض الزوايا الدائرية.

• جميع الزوايا: 6 بكسل

مربع الظل

وظل مربع دقيق.

• مربع الظل الرأسي: 16 بكسل
• لون الظل: rgba (0،0،0،0.07)

تحويل الترجمة

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

• تحويل الترجمة إلى اليمين: 50 بكسل

فيضانات

للتأكد من ظهور القوائم المنسدلة لدينا على أحجام أصغر للشاشة ، سنكمل إعدادات الصف من خلال إعدادات الفائض حتى يمكن رؤيتها.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

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

اختر قائمة

حان الوقت لإضافة وحدة القائمة. حدد القائمة التي قمت بتحريرها في الجزء الأول من هذا البرنامج التعليمي.

تحميل الشعار

قم بتحميل الشعار بعد ذلك.

إعدادات نص القائمة

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص القائمة على النحو التالي:

• خط القائمة: PT Sans
• لون نص القائمة: # 000000
• حجم نص القائمة: 16 بكسل
• محاذاة النص: صحيح

إعدادات القائمة المنسدلة

قم بتعديل لون خط القائمة المنسدلة أيضًا.

• لون خط القائمة المنسدلة: # 007aff

الأيقونات

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

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

تحجيم

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

• عرض الشعار الأقصى: 40٪

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

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

أضف كود CSS

سيساعدنا رمز CSS التالي على تصميم تسميات القائمة بشكل فردي وإنشاء تصميم سريع الاستجابة:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

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

بمجرد الانتهاء من تصميم العنوان ، تأكد من حفظ جميع تغييرات Divi Theme Builder قبل عرض النتيجة على موقع الويب الخاص بك!

معاينة

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

افكار اخيرة

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

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