كيفية إنشاء قائمة تنقل عمودية (أو رأس) لموقع Divi الخاص بك

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لتحميل القالب ، انتقل إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك.

تحميل قالب موقع الويب الافتراضي العام

بعد ذلك ، في الزاوية العلوية اليمنى ، سترى رمزًا به سهمان. انقر فوق الرمز.

انتقل إلى علامة التبويب "استيراد" ، وقم بتحميل ملف JSON الذي تمكنت من تنزيله في هذا المنشور ، وانقر فوق "استيراد قوالب Divi Theme Builder".

حفظ تغييرات Divi Theme Builder

بمجرد تحميل الملف ، ستلاحظ رأسًا وتذييلًا عامًا جديدين في قالب موقع الويب الافتراضي الخاص بك. احفظ تغييرات Divi Theme Builder بمجرد أن تريد تنشيط القالب.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

الجزء 1: بناء رأس عمومي جديد

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

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

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

ثم حدد الخيار "Build from Scratch".

الجزء 2: تصميم مخطط المقطع الرأسي

داخل Global Header Layout Editor ، افتح إعدادات القسم العادي الموجود بالفعل وقم بتحديث ما يلي.

• العرض (سطح المكتب): 300 بكسل
• العرض (الجهاز اللوحي والهاتف): 100٪

• الارتفاع (سطح المكتب): 100vh
• الارتفاع (الجهاز اللوحي والهاتف): تلقائي

• الحشو (سطح المكتب): 4vh أعلى ، 0 بكسل أسفل
• المساحة المتروكة (الجهاز اللوحي والهاتف): 0 بكسل للأعلى و 0 بكسل للأسفل

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

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

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

• المركز: ثابت
• الفهرس Z: 9999

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

overflow: visible !important;

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

الجزء 3: تصميم القائمة العمودية

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

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

مضيفا الصف

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

ثم قم بتحديث إعدادات الصف كما يلي:

الحجم والحشو

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 80٪
• الحشوة (سطح المكتب): 3vh أعلى ، 3vh أسفل
• المساحة المتروكة (الجهاز اللوحي والهاتف): 0 بكسل للأعلى و 0 بكسل للأسفل

الحدود

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

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

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

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

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

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

• النمط: توسيط
• خط القائمة: Nunito Sans
• لون نص القائمة: # 535b7c
• حجم نص القائمة: 18 بكسل (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط القائمة: 2em
• لون خط القائمة المنسدلة: # 535b7c
• لون الارتباط النشط للقائمة المنسدلة: # 535b7c

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

• الحشوة (سطح المكتب): 2vh أعلى ، 2vh أسفل
• المساحة المتروكة (سطح المكتب): 10 بكسل للأعلى ، 10 بكسل للأسفل

الجزء 4: إضافة 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 المخصص الخارجي الذي سنضيفه باستخدام وحدة التعليمات البرمجية.

إضافة CSS مخصص مع وحدة التعليمات البرمجية

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

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

/*Style Vertical Navigation Menu*/  
.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: 10px 0 !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 all and (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;
}
}

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

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

مضيفا الصف

أضف صفًا جديدًا مكونًا من عمود واحد تحت الصف الحالي.

مضيفا الزر

ثم أضف وحدة زر جديدة إلى الصف.

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

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

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

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

display:block;
width: 100%;

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

display:inherit;

إضافة أيقونات متابعة وسائل التواصل الاجتماعي

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

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

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

• محاذاة الوحدة: المركز
• لون الأيقونة: # 535b7c

ثم افتح إعدادات كل شبكة واحذف لون الخلفية.

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

• الهامش: 3vh أعلى

تحديث إعدادات الصف

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

• عرض الحضيض: 1
• المساحة المتروكة (سطح المكتب): 3vh أعلى ، 0 بكسل أسفل
• الحشوة (الجهاز اللوحي والهاتف): 10 بكسل في الأعلى

حفظ التخطيط والقالب

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

النتيجة النهائية

ها هي النتيجة النهائية على الصفحة الحية.

كيفية إضافة قائمة التنقل العمودية إلى منطقة النص في قالب الصفحة

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

للقيام بذلك ، افتح Global Header Layout Editor واحفظ القسم الرأسي (الذي يحتوي على القائمة) في مكتبة Divi الخاصة بك.

ثم اخرج من محرر التخطيط وأنشئ قالبًا جديدًا وقم بتعيينه لأي صفحة (صفحات) تريدها. النقر لإنشاء نص مخصص لقالب الصفحة.

حدد لبنائه من الصفر.

أضف مقطع عرض كامل جديد إلى التخطيط.

ثم أضف وحدة محتوى منشور Fullwidth إلى القسم.

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

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

width: calc(100% - 300px);
margin-left:300px !important;

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

width: 100%;

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

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

ثم افتح وحدة الشفرة داخل تخطيط القسم واستبدل مقتطف الشفرة هذا ...

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

مع هذا…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

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

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!