مگا منوها یک عنصر طراحی محبوب هستند که می توانند به شما بدهند وب سایت انفجاری از ظرافت در هنگام ارائه آخرین بازدید یک لایه ناوبری اضافی راه های مختلفی برای افزودن مگا منوها به Divi وجود دارد. یکی از ساده ترین روش هایی که من استفاده کردم این استافزونه شخص ثالث با نام Divi Mega Pro .

Divi Mega Pro ساختن منوهای مگا را با استفاده از Divi Builder آسان می کند. با استفاده از کلاس CSS هر منو را می توان به هر عنصر اضافه کرد. این بدان معنی است که شما می توانید یک طرح Divi را به هر پیوند موجود در منو اضافه کنید ، اما می توانید حتی بیشتر از این پیش بروید و فقط با اضافه کردن کلاس CSS آنها را به هر عنصر از طرح Divi اضافه کنید.

این ایده آل برای ایجاد منوها و پنجره های بازشو با ماژول های فروشگاه ، تصاویر ، اسلایدرها ، نمونه کارها ، آیکون ها ، صفحه های تاریکی ، فیلم ها ، وبلاگ ها و غیره است. همچنین با Extra کار می کند.

یک منوی Mega Pro Mega ایجاد کنید

منوی Divi Mega Pro به منوی داشبورد اضافه می شود. در اینجا می توانید کلید مجوز خود را وارد کنید ، منوهایی را که ایجاد کرده اید مشاهده کرده و یک منوی جدید ایجاد کنید. هنگامی که برای افزودن یک منوی جدید کلیک می کنید ، یک ویرایشگر برای نوع پست منو خواهید دید. صفحه نمایش ساده است ، اما در اینجا چیزهای زیادی در حال انجام است.

ناشر - با استفاده از Divi Builder می توانید mega-menu یا یک راهنمای ابزار ایجاد کنید.

پس زمینه مگا نرم افزار - می توانید رنگ پس زمینه و قلم را انتخاب کنید.

مشاهده مکانها - همه صفحات را انتخاب کنید یا صفحات خاصی را نام ببرید ، و موارد استثنا را وارد کنید.

مگا نرم افزار انیمیشن - یک انیمیشن را انتخاب کنید. از افست ، افست ، پرسپکتیو ، محو شدن یا مقیاس انتخاب کنید.

مگا پرو Triggers - یک ماشه را به عنوان انتخابگر CSS اضافه کنید. هنگامی که آن را ذخیره کردید ، کلاس CSS را مشاهده می کنید که می خواهید در قسمت کلاس CSS مورد منو ، ماژول ، ردیف یا بخش جایگذاری کنید. این همان چیزی است که برای نمایش منو کلیک یا معلق می شود. همه چیز می تواند به عنوان ماشه استفاده شود و نه فقط یک مورد منو. این بدان معنی است که شما همچنین می توانید از Divi Mega Pro برای ایجاد پنجره های بازشو یا راهنما استفاده کنید.

تنظیمات نمایش Mega Pro : جهت نمایش (بالا یا پایین) را انتخاب کنید ، حاشیه بالا و پایین را به پیکسل وارد کنید ، درصدی از عرض را انتخاب کنید و یک پیکان را فعال کنید. فعال کردن پیکان ، تنظیمات بیشتری را نشان می دهد که در آن می توانید نوع پیکان (مثلث یا گرد) را انتخاب کنید ، رنگ را انتخاب کنید ، عرض و ارتفاع را تنظیم کنید و پیکان را پیش نمایش کنید.

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

پارامترهای اضافی Mega Pro - نوع ماشه (معلق یا کلیک شده) ، نوع خروجی (معلق یا کلیک شده) را انتخاب کرده و تأخیر خروج را وارد کنید.

مدلهای Divi Mega Pro

توسعه دهنده چندین مدل برای Divi Mega Pro ارائه داده است. هنگام خرید افزونه ، این الگوها در حساب شما ، در برگه الگوهای چیدمان پلاگین در دسترس هستند. این موارد برای کمک به شما در شروع طراحی منوهای بزرگ بسیار مناسب هستند. من چند مورد را در مثال های خود استفاده می کنم.

منوی دو نفره Mega Pro

هنگامی که یک مگا منو ایجاد کردید ، در لیست ظاهر می شود. در اینجا می توانید منوها را ویرایش ، سریع ویرایش یا حذف کنید. همچنین می توانید جستجو کنید ، فیلتر کنید براساس تاریخ ، مشاهده بر اساس وضعیت و غیره همچنین کلاس منحصر به فرد Mega Pro را فراهم می کند ، بنابراین می توانید به جای باز کردن هر یک از کلاس ها ، کلاس ها را از اینجا کپی کنید.

وقتی کلاس را کپی می کنید ، حتماً آن را بدون فضای اضافی بچسبانید. در غیر این صورت ، تمام منوها در صفحه دیگر کار نمی کنند.

من مطمئن هستم که اضافه کردن آن آسان نخواهد بود ، اما یک ویژگی کپی و ویرایش مفید خواهد بود. می توانید طرح های Divi را برای استفاده مجدد در کتابخانه خود ذخیره کنید ، اما این شامل تنظیمات اطراف نیست.

افزودن ماشه

در قسمت Mega Pro Triggers ، یک کلاس Mega Pro را مشاهده خواهید کرد. آن را در قسمت CSS Class عنصری که می خواهید به عنوان ماشه استفاده کنید کپی و جایگذاری کنید.

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

کلاس CSS را در قسمت منو جایگذاری کنید. اکنون این مورد منو ، فهرست بزرگ را در شناور نشان می دهد و شما را به صفحه کلیک می کند.

مشاهده خواهید کرد که Divi Mega Pro نیز در گزینه های پیوند منو یک گزینه است. آنها برای افزودن یک آیتم منو به منو که در واقع به جایی نمی رسد عالی هستند. کلاس CSS را مانند سایر موارد منو اضافه کنید.

بخش تماس در منوی مگا

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

در این مورد ، من رنگ ها را با استفاده از تنظیمات پس زمینه و صفحه نمایش به جای استفاده از Divi Builder ، کمی تغییر دادم. این یک نوار در پایین منو اضافه می کند.

فراخوانی ساده با ستون های منو

این یکی از مدل هایی است که چندین ستون اضافه می کند. من تنظیماتی را برای پس زمینه و رنگ قلم انجام می دهم. من یک پیکان هم اضافه کردم و عرض را 75٪ کردم.

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

زبانه ها

الگوی تب شامل یک ماژول کد با jQuery برای ایجاد جلوه شناور است.

من محتوا را به برگه ها اضافه کردم و آنها را با سایت تطبیق دادم. هر یک از پیوندهای سمت چپ برگه متفاوتی را در بیشتر منو نشان می دهد.

پیکربندی حباب اطلاعات

برای این مورد ، کلاس CSS را به برخی از blurb ها اضافه کردم تا بتواند یک شناور پاپ آپ کوچک ایجاد کند. پنجره بازشو فقط یک تصویر است که در زیر سایه دارد.

در تصویر بالا ، موش من روی کلمات LIVE WEBSITE قرار دارد. من هنوز موقعیت را تنظیم نکرده ام ، اما به راحتی می توان آن را در هرجایی که بخواهید نشان داده شود.

برای این مورد ، من یک پنجره بازشو ایجاد کردم تا تصویری با متن را نشان دهد. جهت نمایش را روی Low تنظیم کردم و برای اینکه در کنار تصویری که می خواهم اضافه کنم ظاهر شود ، حاشیه -300 را اضافه کردم.

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

مجوز و اسناد

شما بین چهار مجوز انتخاب می کنید:

• سایت تنها - 15 دلار در سال
• سه سایت - 29 دلار در سال
• سایت های نامحدود - 59 دلار در سال
• مادام العمر نامحدود - یکبار 129 دلار

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

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]دانلود تم DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” =_font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NAD”]DOW قالب DIVI[/vcex_button][/vc_column][/vc_row]

سایر آموزشهای دوگانه

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• چگونه برای اضافه کردن متن در محصول Divi WooCommerce
• چگونه می توان رنگ منو را بین صفحات Divi تغییر داد
• نحوه شخصی سازی شبکه های یک وبلاگ با Divi
• نحوه استفاده از ویرایشگر نقش دووی در وردپرس
• نحوه ایجاد یک نوار لغزنده تمام صفحه Divi
• چگونگی تغییر رنگ منوها بین صفحات Divi
• ویژگی هایی که احتمالاً در مورد Divi نمی دانید
• نحوه استفاده از Divi Builder در وردپرس
• نحوه استفاده از ماژول پیمایش ویدئو Divi
• نحوه استفاده از ماژول Flip Builder Divi
• نحوه اضافه کردن ماژول توصیفی در Divi Builder
• نحوه استفاده از ماژول متن دووی
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر Divi
• نحوه استفاده از ماوی رسانه اجتماعی Divi
• نحوه استفاده از ماژول فروشگاه با موضوع WordPress Divi
• نحوه استفاده از ماوی نوار کناری Divi
• نحوه استفاده از ماژول جدول قیمت دووی
• چگونه از عنوان ماژول نشریات دووی استفاده کنیم
• نحوه اضافه کردن ماژول ویدیویی از دیوی
• نحوه استفاده از ماژول ناوبری مقاله
• چگونه از ماوی جستجوی Divi استفاده کنیم
• چگونه از ماژول کیف پول Divi استفاده کنیم
• نحوه استفاده از ماژول شخص در Divi Builder
• نحوه استفاده از ماژول کیف پول با فیلتر Divi
• نحوه استفاده از ماژول کشویی عرض کامل
• نحوه استفاده از ماژول Image Divid Builder
• نحوه استفاده از ماژول ناوبری تمام عرض Divi Builder
• نحوه استفاده از ماژول گالری تصاویر
• نحوه استفاده از ماوی کارت Width Divi Builder
• نحوه استفاده از ماژول Portfolio Full Width Divi
• نحوه استفاده از ماژول هدر تمام عیار Divi
• چگونه از ماوی شمارنده Divi استفاده کنیم
• نحوه استفاده از نوار لغزنده مقالات در Divi Builder
• نحوه استفاده از ماژول Divi ایمیل Optin