كيفية عرض فئات منشورات المدونة بصريًا في رأس Divi الخاص بك

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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

كيفية تحميل ملف JSON

قم بفك ضغط المجلد المضغوط الذي تمكنت من تنزيله أعلاه. بعد ذلك ، انتقل إلى موقع WordPress الخاص بك> Divi> مكتبة Divi وقم بتحميل JSON.

بمجرد حفظ التخطيط الخاص بك في مكتبة Divi ، يمكنك الانتقال إلى Divi Theme Builder واستيراد التخطيط المحفوظ بالنقر فوق "إضافة رأس عام" أو "إضافة رأس مخصص" وتحديد "إنشاء رأس عام / مخصص". انتقل إلى علامة التبويب "التخطيطات المحفوظة الخاصة بك" في مكتبة Divi ، وحدد التخطيط الذي قمت بتحميله في الخطوة السابقة واحفظ جميع تغييرات Divi Theme Builder.

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

1. أضف فئة CSS إلى عنصر قائمة المدونة

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

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

تمكين خيار فئة CSS

في الجزء العلوي من الصفحة ، تأكد من تمكين خيار فئات CSS داخل خيار الشاشة.

أضف فئات CSS إلى عنصر قائمة المدونة

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

• فئات CSS: المستوى الأول من المستوى الأول -1

2. قم بإنشاء رأس مخصص باستخدام منشئ سمات Divi

انتقل إلى Divi Theme Builder

بمجرد وضع فئات CSS لعنصر القائمة في مكانها الصحيح ، فقد حان الوقت للانتقال إلى Divi. انتقل إلى Divi Theme Builder وحدد "إضافة رأس عام / مخصص".

ابدأ في إنشاء رأس عام

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

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

لون الخلفية

داخل محرر القالب ، ستلاحظ قسمًا. افتح هذا القسم وقم بتطبيق لون خلفية بيضاء.

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

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

اختر قائمة

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

تحميل الشعار

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

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

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

• خط القائمة: Roboto Mono
• نمط خط القائمة: أحرف كبيرة
• لون نص القائمة: # 000000
• حجم نص القائمة: 18 بكسل
• تباعد أحرف القائمة: -1 بكسل

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

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

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

إعدادات الرموز

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

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

فئة CSS

وأكمل إعدادات الوحدة بإضافة فئة CSS.

• فئة CSS: فئة القائمة

3. إنشاء تصميم قائمة منسدلة للمدونة

أضف الصف رقم 2

هيكل العمود

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

لون الخلفية

افتح إعدادات الصف واستخدم لون الخلفية الأبيض.

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 80vw (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
• أقصى عرض: 50vw (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تباعد

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

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل
• الحشو الأيسر: 10 بكسل
• الحشو السفلي: 10 بكسل

مربع الظل

نحن نستخدم ظل الصندوق الخفيف أيضًا.

• مربع قوة طمس الظل: 30 بكسل
• لون الظل: rgba (0،0،0،0.13) (سطح المكتب) ، rgba (0،0،0،0) (الجهاز اللوحي والهاتف)

فئة CSS

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

• فئة CSS: القائمة المنسدلة القائمة المنسدلة -1

موقع

انتقل إلى علامة التبويب خيارات متقدمة وقم بتغيير موضع الصف أيضًا.

• الموضع: مطلق (سطح المكتب) ، نسبي (كمبيوتر لوحي وهاتف)
• الموقع: أعلى اليمين
• الإزاحة العمودية: 100 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الفهرس Z: 11

كلا العمودين عنصر رئيسي

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

width: 50% !important;

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

أضف اسم الفئة

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

أضف رابط الفئة

أضف رابطًا لفئتك التالية.

خلفية متدرجة

ثم قم بتطبيق الخلفية المتدرجة التالية:

• اللون 1: rgba (0،0،0،0.08)
• اللون 2: # 0a0a0a
• موقف البداية: 60٪
• موضع النهاية: 60٪
• وضع التدرج فوق صورة الخلفية: نعم

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

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

• حجم صورة الخلفية: الحجم الفعلي
• تكرار صورة الخلفية: كرر X (أفقيًا)

إعدادات النص

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

• خط النص: روبوتو مونو
• وزن خط النص: غامق
• لون النص: #ffffff
• حجم النص: 1.9vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 3.5vw (هاتف)
• تباعد الحروف النصية: -0.1vw
• ارتفاع خط النص: 1em

تحجيم

قم بتغيير إعدادات التحجيم بعد ذلك.

• العرض: 99٪
• محاذاة الوحدة: يسار

تباعد

قم بتعديل إعدادات التباعد أيضًا.

• الهامش السفلي: 10 بكسل
• الهامش الأيمن: 1٪ (تابلت وهاتف)
• الحشو العلوي: 60٪ (سطح المكتب) ، 40٪ (الجهاز اللوحي والهاتف)
• حشوة سفلية: 4٪
• الحشوة اليسرى: 2٪

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

وأكمل إعدادات الوحدة بإضافة سطر واحد من كود CSS إلى العنصر الرئيسي للوحدة.

cursor: pointer;

استنساخ وحدة النص ووضع نسخة مكررة في العمود 2

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

تعديل وحدة النص في العمود 2

تغيير اسم الفئة والارتباط

قم بتعديل عنوان الفئة والارتباط في الوحدة النمطية المكررة.

تغيير صورة الخلفية

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

• تكرار صورة الخلفية: لا يوجد تكرار

تغيير الحجم

قم بتغيير محاذاة الوحدة النمطية في إعدادات التحجيم التالية.

• محاذاة الوحدة: صحيح

استنساخ كلتا الوحدتين مرة واحدة

بمجرد الانتهاء من كلتا الوحدتين (واحدة في كل عمود) ، يمكنك استنساخ كل منهما مرة واحدة.

تغيير أسماء الفئات والروابط

قم بتغيير أسماء الفئات والروابط داخل الوحدات المكررة.

تغيير صور الخلفية

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

• حجم صورة الخلفية: صالح
• تكرار صورة الخلفية: لا يوجد تكرار

• حجم صورة الخلفية: صالح
• موضع صورة الخلفية: أسفل اليمين

4. أضف CSS & JQuery Code

أضف وحدة التعليمات البرمجية أسفل وحدة القائمة النمطية في الصف رقم 1

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

أضف كود CSS

أضف الأسطر التالية من كود CSS إلى Code Module:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

أضف كود JQuery

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

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. قم بتمكين فئة CSS بمجرد الانتهاء من تخصيص عناصر قائمة المدونة المنسدلة

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

6. إضافة المزيد من القوائم المنسدلة لفئة المنشور

صف فئة استنساخ المدونة

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

الوصول إلى صف مكرر في لوحة الطبقات

نظرًا لأننا نستخدم تحديد المواقع المطلق على سطح المكتب ، فسيتم وضع الصفوف فوق بعضها البعض. للوصول إلى الصفوف بشكل فردي ، افتح لوحة الطبقات داخل Divi Builder وافتح إعدادات الصف المكرر.

تغيير فئة CSS للصف المكرر

قم بتغيير فئة CSS الثانية في صفك المكرر. تأكد من أن الرقم الذي تستخدمه متتالي.

• فئة CSS: القائمة المنسدلة -2 القائمة المنسدلة

أضف فئات CSS إلى عناصر القائمة في المظهر

بعد ذلك ، انتقل مرة أخرى إلى قائمة WordPress الخاصة بك داخل لوحة المعلومات الخاصة بك وأضف فئات CSS التالية إلى عنصر قائمة آخر ، وبذلك تكون قد انتهيت:

• فئات CSS: المستوى الأول من المستوى الأول -2

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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