Divi: نحوه ایجاد یک منوی ناوبری عمودی

آیا می خواهید یک منوی پیمایش عمودی ایجاد کنید تا موارد بیشتری را در پیش زمینه در DIVI نشان دهد؟

منوهای پیمایش عمودی می تواند برای برخی از وب سایت هایی که به آیتم های منوی بیشتری در پیش زمینه نیاز دارند مفید باشد. منوهای افقی ممکن است برای جا دادن همه پیوندهای منوی مورد نیاز، به ویژه در عرض مرورگرهای کوچکتر، دشوار باشد. 

در این آموزش، نحوه ایجاد یک منوی ناوبری عمودی با استفاده از Divi Theme Builder را به شما نشان خواهیم داد. 

این به شما فضای بیشتری برای نمایش آیتم های منوی وردپرس می دهد.

بیایید شروع کنیم!

بررسی

در اینجا نگاهی گذرا به طرحی که در این آموزش ایجاد خواهیم کرد، است.

بریم سراغ آموزش

ایجاد یک سربرگ جهانی جدید

برای این آموزش، منوی پیمایش عمودی را در یک هدر سراسری با استفاده از تم ساز Divi ایجاد می کنیم.

برای شروع، به داشبورد وردپرس بروید و به Divi > Theme Builder بروید.

سپس روی قسمت "Add global header" کلیک کنید قالب وب سایت به طور پیش فرض و "Build Global Header" را از لیست کشویی انتخاب کنید.

همچنین بخوانید: نحوه ایجاد یک سربرگ جهانی با تم ساز در DIVI

طراحی طرح بخش عمودی

در ویرایشگر طرح بندی سرصفحه جهانی، تنظیمات بخش معمولی را از قبل باز کنید و موارد زیر را به روز کنید.

• حداکثر عرض: 300 پیکسل
• ارتفاع: 100vh

• حاشیه داخلی: 4 ولت ساعت بالا، 0 پیکسل پایین

سفارشی سازی را با افزودن یک کادر سایه به صورت زیر ادامه دهید:

• کادر سایه: اسکرین شات را ببینید
• موقعیت عمودی سایه جعبه: 0 پیکسل
• قدرت تاری سایه جعبه: 20 پیکسل
• قدرت پخش سایه جعبه: -10 پیکسل
• رنگ سایه: rgba(0,0,0,0.3)

برای اطمینان از اینکه منوی پیمایش عمودی در سمت چپ در هنگام پیمایش کاربر قابل مشاهده باقی می ماند، تب Advanced را در موقعیت ثابت به روز کنید و z-index را به صورت زیر به روز کنید:

• ایستگاه ثابت
• شاخص Z: 9999

برای اطمینان از اینکه می‌توانیم پیمایش زیر منو که خارج از بخش گسترش می‌یابد را ببینیم، CSS سفارشی زیر را به عنصر اصلی اضافه کنید:

overflow: visible !important;

بخش شما اکنون در یک طرح عمودی در سمت چپ الگو قرار می گیرد.

منوی عمودی را طراحی کنید

با در نظر گرفتن بخش، ما آماده طراحی منوی عمودی هستیم. برای انجام این کار، ما از یک ماژول منو با CSS سفارشی استفاده می کنیم تا ناوبری را برای نمایش عمودی سفارشی کنیم.

همچنین از واحد طول vh استفاده خواهیم کرد تا منو به خوبی با ارتفاع های مختلف مرورگر سازگار شود.

اضافه کردن خط

برای شروع، یک ردیف به یک ستون در بخش اضافه کنید.

در مرحله بعد، پارامترهای خط را به صورت زیر به روز کنید:

اندازه و فاصله

• از عرض ناودان سفارشی استفاده کنید: بله
• فاصله ستون ها: 1
• حداکثر عرض: 100
• حداکثر عرض: 80

• حاشیه داخلی: 3vh بالا، 3vh پایین

مرز

• عرض حاشیه: 1 پیکسل
• رنگ حاشیه: #eeeeee

ماژول منو اضافه شد

در ردیف یک ستونی، یک ماژول منوی جدید اضافه کنید.

یک منو برای نمایش در برگه انتخاب کنید محتویات.

سپس لوگوی خود را اضافه کنید سایت اینترنتی مانند محتویات پویا در زیر دکمه لوگو.

در زیر برگه Style موارد زیر را به روز کنید:

• سبک: متمرکز

• منوی قلم: Nunito Sans
• رنگ متن منو: #535b7c

• منوی اندازه متن: 18 پیکسل (رومیزی)، 14 پیکسل (تبلت و تلفن)
• ارتفاع ردیف منو: 2 em

• رنگ ردیف کشویی: #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 سفارشی را به صورت زیر به ماژول Menu اضافه کنید:

کلاس CSS: et-vert-menu

این کلاس برای هدف قرار دادن این منوی خاص در CSS سفارشی خارجی ما که با استفاده از یک ماژول Code اضافه می کنیم استفاده می شود.

افزودن CSS سفارشی با ماژول کد

در ماژول منو، یک ماژول کد اضافه کنید.

سپس کد زیر را در کادر کد قرار دهید (حتما آن را بین تگ های سبک قرار دهید):

/* 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;

}

}

دکمه و آیکون های فالو رسانه های اجتماعی را طراحی کنید

اکنون که منو کامل شده است، می‌توانیم یک دکمه اضافه کنیم و برخی از رسانه‌های اجتماعی پیوندهایی را برای تکمیل هدر عمودی دنبال کنند.

اضافه کردن خط

یک ردیف جدید یک ستون زیر ردیف فعلی اضافه کنید.

یک دکمه اضافه کنید

سپس یک ماژول Button به خط اضافه کنید.

تنظیمات دکمه را به صورت زیر به روز کنید:

• تراز دکمه: مرکز

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 18 پیکسل (رومیزی)، 14 پیکسل (تبلت و تلفن)
• رنگ متن دکمه: #ffffff
• رنگ پس زمینه دکمه: #535b7c
• عرض حاشیه دکمه: 0 پیکسل

سپس به تب advanced رفته و CSS سفارشی زیر را در عنصر اصلی قرار دهید:

عنصر اصلی CSS (رومیزی)

display:block;

width: 100%;

عنصر اصلی CSS (تبلت)

display:inherit;

آیکون های فالو رسانه های اجتماعی اضافه شد

در زیر دکمه، ماژول ما را در رسانه های اجتماعی دنبال کنید اضافه کنید.

شبکه های اجتماعی مورد نظر خود را در زیر برگه اضافه کنید محتویات.

در تب Style موارد زیر را به روز کنید:

• تراز ماژول: مرکز

• رنگ نماد: #535b7c

سپس تنظیمات هر یک از شبکه های اجتماعی را باز کرده و رنگ پس زمینه را حذف کنید.

سپس یک حاشیه کوچک بالا به صورت زیر اضافه کنید:

• حاشیه: 3vh پیک

پارامترهای خط را به روز کنید

پس از اتمام آیکون های فالو رسانه های اجتماعی، تنظیمات خط را باز کنید و موارد زیر را تنظیم کنید:

• از عرض ناودان سفارشی استفاده کنید: بله
• فاصله ستون ها: 1

• حاشیه داخلی: 3 ولت ساعت بالا، 0 پیکسل پایین

ذخیره طرح و قالب

پس از اتمام، طرح و قالب را ذخیره کنید.

نتیجه نهایی

در اینجا نتیجه نهایی در یک صفحه زنده است.

دانلود DIVI در حال حاضر!!!

نتیجه

منوی پیمایش عمودی نشان داده شده در اینجا یک موقعیت ثابت داده شده است. با این حال، اگر به فضای بیشتری برای آیتم های منو یا محتوای اضافی نیاز دارید، می توانید موقعیت بخش را به مطلق تغییر دهید

تنظیم بخش عمودی همچنین دری را برای ایجاد نوارهای جانبی سفارشی باز می کند. 

اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...