Divi: كيفية إنشاء قائمة تنقل عمودية

هل ترغب في إنشاء قائمة تنقل عمودية بحيث تعرض المزيد من العناصر في المقدمة في DIVI؟

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

في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء قائمة تنقل عمودية باستخدام Divi Theme Builder. 

سيعطيك هذا مساحة أكبر لعرض عناصر قائمة WordPress الخاصة بك.

لنبدأ!

مسح

إليك نظرة سريعة على التصميم الذي سنقوم بإنشائه في هذا البرنامج التعليمي.

دعنا نذهب إلى البرنامج التعليمي.

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

بالنسبة لهذا البرنامج التعليمي ، سننشئ قائمة التنقل العمودية في رأس عام باستخدام أداة إنشاء السمات Divi

للبدء ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder.

ثم انقر فوق منطقة "إضافة رأس عالمي" لقالب موقع الويب الافتراضي وحدد "إنشاء رأس عالمي" من القائمة المنسدلة.

اقرأ أيضا: كيفية إنشاء رأس عام باستخدام منشئ السمات في DIVI

تصميم تخطيط القسم العمودي

في محرر تخطيط الرأس العام ، افتح إعدادات القسم العادية الموجودة بالفعل وقم بتحديث ما يلي.

• أقصى عرض: 300 بكسل
• الارتفاع: 100 فولت

• الهامش الداخلي: 4vh أعلى ، 0 بكسل أسفل

استمر في التخصيص عن طريق إضافة مربع ظل كما يلي:

• مربع الظل: انظر الصورة
• صندوق الظل الرأسي: 0 بكسل
• قوة طمس ظل الصندوق: 20 بكسل
• قوة انتشار الظل المربع: -10 بكسل
• لون الظل: rgba (0,0,0,0.3،XNUMX،XNUMX،XNUMX)

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

• محطة ثابتة
• مؤشر Z: 9999

للتأكد من أنه يمكننا رؤية قائمة التنقل الفرعية التي ستمتد خارج القسم ، أضف CSS المخصص التالي إلى العنصر الرئيسي:

overflow: visible !important;

سيكون القسم الخاص بك الآن في تخطيط عمودي على الجانب الأيسر من القالب.

صمم القائمة العمودية

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

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

مضيفا الخط

للبدء ، أضف صفًا إلى عمود في القسم.

بعد ذلك ، قم بتحديث معلمات الخط على النحو التالي:

التحجيم والتباعد

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

• الهامش الداخلي: 3vh أعلى ، 3vh أسفل

الحدود

• عرض الحدود: 1 بكسل
• لون الحد: #eeeeee

وحدة القائمة المضافة

داخل الصف المكون من عمود واحد ، أضف وحدة قائمة جديدة.

حدد القائمة التي تريد عرضها في علامة التبويب "المحتوى".

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

ضمن علامة تبويب النمط ، قم بتحديث ما يلي:

• النمط: توسيط

• قائمة الخط: Nunito Sans
• لون نص القائمة: # 535b7c

• قائمة حجم النص: 18 بكسل (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع صف القائمة: 2 م

• لون صف القائمة المنسدلة: # 535b7c
• القائمة المنسدلة Active Link Color: # 535b7c

• لون أيقونة عربة التسوق: # 535b7c
• لون رمز البحث: # 535b7c
• لون أيقونة قائمة همبرغر: # 535b7c

• الهامش الداخلي: 2vh أعلى ، 2vh أسفل

تمت إضافة CSS مخصص للقائمة

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

رابط قائمة CSS (سطح المكتب):

width: 100%;

padding: 1vh 15px;

background: #f8f8f8;

border-radius: 3px;

border: 1px solid #eeeeee;

رابط قائمة CSS (جهاز لوحي):

width: auto;

border:none;

شعار القائمة CSS:

margin-bottom: 20px;

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

فئة CSS: et-vert-menu

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

إضافة CSS مخصص مع وحدة Code

ضمن وحدة القائمة ، أضف وحدة رمز.

ثم الصق الكود التالي في مربع الشفرة (تأكد من وضعه بين علامات النمط):

/* Menu de Navigation Style Vertical*/

.et-vert-menu .et_pb_menu__menu>nav>ul {

  flex-direction: column;

  margin-left: 0px!important;

  margin-right: 0px!important;

  width: 100%;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li {

  margin: 10px0!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {

  display:block!important;

  padding: 0px!important;

  }

  .et-vert-menu .et_pb_menu__menu>nav>ul ul {

    padding: 0px!important;

    top: 0px!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {

  left:calc(100%- 1px) !important;

  top:0px!important;

  }

.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {

  content: "5"!important; /*change arrow icon for submenu*/

  right: 20px!important;

  }

.et-vert-menu .nav li ul {

    left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/

  }

@media alland (min-width: 981px) {

.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {

    width: 100%; /*width of the vertical navigation menu*/

  }

/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/

#et-main-area {

  width: calc(100%- 300px);

  margin-left: 300px;

}

}

تصميم زر متابعة وسائل التواصل الاجتماعي والأيقونات

الآن وقد اكتملت القائمة ، يمكننا إضافة زر وتتبع بعض الوسائط الاجتماعية الروابط لإكمال العنوان الرأسي.

مضيفا الخط

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

إضافة زر

ثم أضف وحدة زر إلى الخط.

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

• محاذاة الزر: المنتصف

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 18 بكسل (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 535b7c
• عرض حد الزر: 0 بكسل

بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة والصق CSS المخصص التالي في العنصر الرئيسي:

عنصر CSS الرئيسي (سطح المكتب)

display:block;

width: 100%;

عنصر CSS الرئيسي (الكمبيوتر اللوحي)

display:inherit;

تمت إضافة الوسائط الاجتماعية لمتابعة الرموز

أسفل الزر ، أضف وحدة تابعنا على الوسائط الاجتماعية.

أضف شبكات التواصل الاجتماعي التي تريدها ضمن علامة التبويب المحتوى.

في علامة التبويب "النمط" ، قم بتحديث ما يلي:

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

• لون الأيقونة: # 535b7c

ثم افتح الإعدادات الخاصة بكل شبكة من الشبكات الاجتماعية وقم بإزالة لون الخلفية.

ثم أضف هامشًا علويًا صغيرًا على النحو التالي:

• الهامش: 3vh الذروة

تحديث معلمات الخط

بمجرد الانتهاء من أيقونات متابعة الوسائط الاجتماعية ، افتح إعدادات الخط واضبط ما يلي:

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

• الهامش الداخلي: 3vh أعلى ، 0 بكسل أسفل

حفظ التخطيط والنموذج

بمجرد الانتهاء من ذلك ، احفظ التخطيط والقالب.

نتيجة نهائية

ها هي النتيجة النهائية على صفحة مباشرة.

تحميل DIVI Now !!!

الخاتمة

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

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

إذا واجهت أي مخاوف أو اقتراحات، دعنا نجدنا فيها قسم التعليقات لمناقشته.

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...