loader image

ساخت منوی عمودی با صفحه ساز دیوی فارسی – راهنمای قدم به قدم + ویدیو آموزشی

نوامبر 28, 2020 | آموزش صفحه ساز دیوی


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

این آموزش به شما اجازه می‌دهد که نهایت استفاده را از منو های وردپرسی داشته باشید همچنین قدرت کافی برای استفاده از دیگر ماژول ها را نیز در این آموزش به دست خواهید آورد

نتیجه چه خواهد بود؟

اینجا یک تصویر کلی از چیزی که در نهایت به دست خواهیم آورد می بینید.

شما میتونید فایل نصبی این آموزش را رایگان دانلود کنید

برای اینکه کارتون راحتتر بشه میتونید فایل آماده این قسمت را به صورت رایگان دانلود کنید برای ایننکار لازمه تا ایمیل خودتونو توی قسمت پایین بنویسید تا فایل برای شما ایمیل بشه

اگر ایمیل خودتونو وارد کنید میتونید قالب های پولی ما روبه صورت رایگان هر هفته توی ایمیلتون داشته باشید. معامله منصفانه ایه نه؟

خب قدم اول!

خب مامیخوایم یک منوی عمدی بسازیم که توی همه صفحات سایتمون لود بشه برای شروع به داشبورد مدیریتتون توی وردپرس برید و از مسیر زیر به ویرایش قالب وبسایتتون برید

DIVI > قالب ساز

ٰروی گزینه اضافه کردن هدر کلی کلیک کنید و از منوی باز شده گزینه ساخت هدر کلی را بزنید

بعد از اون روی گزینه ساخت صفحه کلیک کنید

قدم دوم

حالا باید روی تنظیمات سکشن کلیک کنید و تنظیمات زیر را اعمال کنید

  • Width (desktop): 300px
  • Width (tablet and phone): 100%
  • Height (desktop): 100vh
  • Height (tablet and phone): auto
  • Padding (desktop): 4vh top, 0px bottom
  • Padding (tablet and phone): 0px top, 0px bottom

طراحی رو با اضافه کردن یک سایه به ماژول با تنظیمات زیر ادامه دهید

  • Box Shadow: see screenshot
  • Box Shadow Vertical Position: 0px
  • Box Shadow Blur Strength: 20px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(0,0,0,0.3)

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

  • Position: Fixed
  • Z Index: 9999

برای مطمين شدن از اینکه زیرمنو ها بیرون از سکشن نمیروند لازم است تا کد زیر را به سی اس اس های سفارشی اضافه کنید

overflow: visible !important;

حالا شما یک سکشن عمودی سمت چپ وبسایتتون دارید

قدم سوم :‌ طراحی منوی عمودی

وقتی که سکشن رو درست کردیم وقته طراحی منومونه. برای انجام این کار باید از ماژول فهرست استفاده کنیم اما این ماژول به یک سری سی اس اس اضافی هم نیاز داره که باید به اون اضافه کنیم

همچنین با یک سری تغییرات جزئی کاری میکنیم که منومون ریسپانسیو باشه و توی همه دستگاه ها به خوبی نشان داده بشه

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

برای شروع یک ردیف تک ستونه به سکشن اضافه میکنیم و بعد از آن تنظیمات ردیف رو مطابق زیر تعییر میدهیم

اندازه گذاری ها و فاصله گذاری ها

  • Gutter Width: 1
  • Width: 100%
  • Max Width: 80%
  • Padding (desktop): 3vh top, 3vh bottom
  • Padding (tablet and phone):  0px top, 0px bottom

خط دور

  • Border Width: 1px
  • Border Color: #eeeeee

اضافه کردن ماژول فهرست

خب حالا یک ماژول فهرست به ستون اضافه کنید

یک فهرست از فهرست های از قبل آماده شدتون رو انتخاب کنید

بعد از اون لوگو سایت رو انتخاب کنید

توی قسمت طراحی تنظیمات زیر را وارد کنید

  • Style: Centered
  • Menu Font: Nunito Sans
  • Menu Text Color: #535b7c
  • Menu Text Size: 18px (desktop), 14px (tablet and phone)
  • Menu Line Height: 2em
  • Dropdown Menu Line Color: #535b7c
  • Dropdown Menu Active Link Color: #535b7c
  • Shopping Cart Icon Color: #535b7c
  • Search Icon Color: #535b7c
  • Hamburger Menu Icon Color: #535b7c
  • Padding (desktop): 2vh top, 2vh bottom
  • Padding (desktop): 10px top, 10px bottom

قدم چهارم : اضافه کردم سی اس اس سفارشی(CUSTOM CSS) به فهرست

منو به یک کد سفارشی نیاز دارد تا به نتیجه نهایی می‌خواهیم نزدیکتر شود. برای شروع به قسمت تنظیمات پیشرفته بروید و کد زیر را در قسمت Menu Link و Menu Logo قرار دهید :

Menu Link Css(desktop):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Menu Link Css(tablet):

width: auto;border:none;

Menu Logo Css:

margin-bottom: 20px;

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

CSS Class: et-vert-menu

این کار باعث میشود تا این فهرست مورد هدف قرار بگیرد و کدی که بعدا اضافه میکنیم روی این ماژول تاثیر بگذارد.

اضافه کردن سی اس اس سفارشی به ماژول کد

زیر ماژول فهرست یک ماژول کد اضافه کنید

سپس کد زیر را داخل آن قرار دهید. به این نکته توجه کنید که کد باید بین دو تگ Style قرار گیرد

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

1 Comment

  1. admin

    تست

    Reply

Submit a Comment

You have to agree to the comment policy.