در این آموزش ، ما به شما نحوه ایجاد یک دکمه منوی کشویی با استفاده از ماژول تمام عرض Divi را نشان خواهیم داد. برای این کار ابتدا منویی در وردپرس ایجاد خواهیم کرد. سپس ما از ماژول منوی کامل عرض Divi برای نمایش این منو با سبک های سفارشی با استفاده از سازنده Divi و کمی CSS سفارشی استفاده خواهیم کرد. نتیجه یک دکمه کشویی کاربردی و شیک است.
بیایید شروع.
بررسی
در اینجا نمای کلی از دکمه منوی کشویی آورده شده است که ما در این آموزش ادغام خواهیم شد.
آنچه شما باید برای شروع کار
برای شروع، اگر قبلاً این کار را نکرده اید، آن را نصب و فعال کنید تم دیوی نصب شده است (یا اگر از افزونه Divi Builder استفاده نمی کنید تم دیوی). در ابتدا از سازنده Divi برای طراحی دکمه منوی کشویی استفاده می کنیم.
خودشه !
در وردپرس یک منو ایجاد کنید
قبل از شروع ایجاد منوی کشویی با Divi Builder ، ابتدا باید یک منوی وردپرس ایجاد کنیم که می خواهیم برای ماژول عرض کامل استفاده کنیم. برای این کار به داشبورد وردپرس رفته و به Appearance> Menus بروید. سپس با کلیک روی پیوند ایجاد یک منوی جدید ، وارد کردن نام منو و کلیک بر روی دکمه "ایجاد منو" یک منوی جدید ایجاد کنید.
در حال حاضر ، می توانید پیوندهای سفارشی را با "#" به عنوان حافظه مکان برای URL به همراه متن پیوند ایجاد کنید.
موارد منو را به گونه ای تنظیم کنید که مورد منوی سطح بالا دارای پیوند "بیشتر بدانید" با سه مورد زیر منو.
پس از آن ، حتما منو را ذخیره کنید.
نحوه ایجاد دکمه منوی کشویی با ماژول منوی تمام عیار Divi
پس از ایجاد منو ، می توانیم طراحی دکمه منوی کشویی را با Divi شروع کنیم. برای شروع پروژه ، یک صفحه جدید در وردپرس ایجاد کنید و از Divi Builder برای ویرایش صفحه جلویی (سازنده بصری) استفاده کنید.
پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.
محتوای جعلی ایجاد کنید
ابتدا یک ردیف یک ستونی به بخش استاندارد پیش فرض اضافه کنید.
ماژول متنی را اضافه کنید
سپس یک متن ماژول متن را با متن زیر اضافه کنید:
منوی Divi محتوای شما به اینجا می رود. این متن را به صورت درون ریز یا در تنظیمات محتوای ماژول ویرایش یا حذف کنید. همچنین می توانید هر جنبه از این محتوا را در تنظیمات ماژول طراحی کنید و حتی CSS سفارشی را برای این متن در ماژول تنظیمات پیشرفته اعمال کنید.
سپس پارامترهای طراحی را به شرح زیر به روز کنید:
بخش بالشتک
سپس تنظیمات بخش را با موارد زیر به روز کنید:
- بالشتک: 0px به پایین
فاصله خط و مرز
پس از به روزرسانی بخش ، تنظیمات خط را باز کرده و یک مرز پر و کمی را به آن اختصاص دهید.
- اثاثه یا لوازم داخلی: 10vw در بالا ، 10vw در پایین ، 5vw در سمت چپ ، 5vw در سمت راست
- عرض مرز: 1px
ایجاد دکمه منوی کشویی
به منظور ایجاد دکمه منوی کشویی ، ما از یک ماژول عرض کامل استفاده خواهیم کرد. به ما این امکان را می دهد که منوی ایجاد شده قبلی را اضافه کنیم.
منوی کامل را اضافه کنید
برای ایجاد ماژول منوی تمام عرض ، یک بخش کامل جدید را در زیر بخش استاندارد فعلی اضافه کنید.
سپس ماژول منوی تمام عرض را به خط اضافه کنید.
در پنجره بازشو تنظیمات منوی تمام عرض (زیر محتوا) ، از منوی کشویی برای انتخاب منویی که می خواهید نمایش دهید استفاده کنید. این باید همان منویی باشد که قبلاً ایجاد کردیم با نام "منوی کشویی".
سپس رنگ پیش فرض رنگ پس زمینه سفید را برای منو حذف کنید.
هنگامی که منو را با ماژول منوی تمام عرض اضافه کردید ، تنظیمات را ذخیره کنید. برای اتمام طراحی ، کمی به این ماژول باز خواهیم گشت. اما در حال حاضر ، ما می خواهیم یک پس زمینه به قسمت تمام عرض اضافه کنیم.
طراحی بخش عرض کامل را به روز کنید
تنظیمات مربوط به بخش کامل را باز کنید و موارد زیر را به روز کنید:
- شیب پس زمینه سمت چپ: # 0047d6
- رنگ شیب پس زمینه سمت راست: # 45b2ff
- حداکثر عرض: 240px
- بخش تراز: مرکز
من حداکثر عرض مقطع را روی 240px تنظیم کردم ، زیرا این مورد با عرض عرض منوی کشویی پیش فرض در Divi مطابقت دارد. همچنین برای یک دکمه در دسک تاپ و موبایل اندازه خوبی است.
- گوشه های گرد: 5px
در زبانه Advanced ، کلاس CSS ، سرریز و Z فهرست زیر را اضافه کنید.
- کلاس CSS: دکمه کشویی
- سرریز افقی: قابل مشاهده است
- سرریز عمودی: قابل مشاهده است
- شاخص Z: 14
کلاس CSS مورد نیاز است تا بعداً بتوانیم CSS خارجی خود را روی این بخش هدف قرار دهیم. باید سرریز روی قابل مشاهده باشد تا بتوانیم منوی کشویی را ببینیم. و شاخص Z به شما کمک می کند تا لیست کشویی بالاتر از همه مطالب موجود در صفحه باشد.
منوی Fulwidth را طراحی کنید
اکنون آماده طراحی ماژول Fulwidth هستیم. تنظیمات ماژول پهنای باند را باز کرده و موارد زیر را به روز کنید:
- پیوندهای منوی تمام عرض را ایجاد کنید: بله
- رنگ متن Dropdown: #ffffff
- رنگ متن منوی تلفن همراه: #ffffff
- ترتیب متن: مرکز
- رنگ پس زمینه منوی کشویی: # 45b2ff
- رنگ خط منوی کشویی: #ffffff
- رنگ پس زمینه منو: #45b2ff
- منو قلم: رمزگذاری بدون نیمه متراکم
- وزن قلم منو: نیمه پررنگ
- رنگ متن منو: #ffffff
- اندازه متن فهرست: 16px
- فاصله منو: 2px
- انیمیشن از فهرست کشویی: گسترش دهید
دکمه کشویی را قرار دهید
برای همپوشانی دکمه در حاشیه پایین ، باید حاشیه منفی بالایی را اضافه کنیم که دقیقاً نیمی از ارتفاع دکمه است.
- حاشیه: -40.5px زیاد است
همانطور که مشاهده می کنید ، فضای شناور هنوز کل منطقه دکمه را اشغال نمی کند و منوی کشویی همچنان در سمت راست قرار دارد. برای حل این مشکل ، می توانیم CSS سفارشی را اضافه کنیم.
اضافه کردن CSS سفارشی
قبل از افزودن CSS سفارشی ، مطمئن شوید که CSS ID را "پایین کشیدن" به بخش عرض کامل (نه ماژول) اضافه می کنید.
بدون شناسه CSS ، CSS زیر کار نمی کند.
برای افزودن CSS سفارشی ، تنظیمات صفحه را باز کرده و کد زیر را در کادر ورودی CSS سفارشی بچسبانید.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important؛ } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px؛ ارتفاع خط: 81px؛ } .dropdown-button .flwidthth-menu li li a a {padding: 6px 0px؛ ارتفاع خط: 1.6em؛ } .dropdown-button .et_mobile_menu li a: شناور ، .nav ul li a: شناور ، .dropdown-button. تمام پهنای منو a: hover {opacity: 1؛ } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important؛ } .dropdown-button .flwidth-menu menu {{display: block؛ } .dropdown-button .flwidth-menu .menu-item-has-children> a: first-child: after {right: 20px؛ }
نتیجه نهایی است
آخرین افکار
ایجاد یک دکمه منوی کشویی با استفاده از ماژول منوی تمام عرض Divi شامل چند مرحله اساسی است. ابتدا منویی را در وردپرس ایجاد می کنیم که می خواهیم در ماژول ادغام شود. سپس ما از سازنده Divi استفاده کرده و ماژول تمام عرض منو را به دلخواه خود تنظیم می کنیم. سپس CSS سفارشی را اضافه می کنیم تا طراحی را روی دسک تاپ و موبایل صیقل دهید. نتیجه یک منوی کشویی زیبا (و مفید) است که برای شناور دسک تاپ و کلیک موبایل ارائه می شود. امیدوارم که این مورد مفید به مجموعه ابزار طراحی شما باشد.
