آیا می خواهید یک نماد همبرگر را به ماژول منو اضافه کنید DIVI ?

اگر هدر خود را در DIVI، چندین راه برای انجامش وجود دارد. 

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

این یک ظاهر حداقلی به هدر شما می دهد و در عین حال تعامل را نیز اضافه می کند.

برویم.

بررسی

قبل از فرو رفتن در این آموزش، اجازه دهید نگاهی گذرا به نتیجه بیاندازیم.

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

با Divi Builder یک قالب جهانی سربرگ جدید ایجاد کنید

به Divi Theme Builder بروید

از داشبورد وردپرس، به «Divi > تم ساز' سپس کلیک کنید "افزودن سربرگ جهانی"

قالب ساز Divi

یک سرصفحه جدید جهانی اضافه کنید

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

طراحی هدر سراسری

تنظیمات بخش

رنگ پس زمینه

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

  • رنگ پس زمینه: #f6f9fb

فاصله

به تب تغییر دهید طرح از بخش و پارامترهای زیر را تغییر دهید.

  • بالشتک (بالا و پایین): 0 پیکسل

یک خط جدید اضافه کنید

ساختار ستون

با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:

اندازه

تنظیمات خط را باز کنید، به تب بروید طرح و حداکثر عرض را در تنظیمات اندازه تغییر دهید.

  • حداکثر عرض: 1 پیکسل

فاصله

سپس بالشتک بالا و پایین را در تنظیمات فاصله تغییر دهید.

  • بالشتک (بالا و پایین): 5 پیکسل

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

منوی مورد نظر را برای افزودن انتخاب کنید

بعد، یک ماژول Menu را به ستون ردیف اضافه کنید و یک منوی پویا را انتخاب کنید.

لوگو را دانلود کنید

دانلود a آرم.

رنگ پس زمینه را حذف کنید

سپس رنگ پس‌زمینه سفید پیش‌فرض را از ماژول حذف کنید.

تنظیمات متن منو

به تب تغییر دهید طرح ماژول و پارامترهای متنی منو را بر این اساس تغییر دهید:

  • منوی فونت: Poppins
  • وزن قلم منو: نیمه پررنگ
  • رنگ متن: #003e51
  • اندازه متن منو: 16 پیکسل
  • تراز متن: راست

تنظیمات منوی کشویی

سپس تنظیمات را از منوی کشویی تغییر دهید.

  • رنگ خط منوی کشویی: #7159c8

تنظیمات نماد

تنظیمات آیکون را نیز تغییر دهید.

  • رنگ نماد سبد خرید: #670fff
  • رنگ نماد جستجو: #670fff
  • رنگ نماد منوی همبرگر: #670fff

اندازه

سپس به تنظیمات اندازه بروید و حداکثر عرض را تعیین کنید آرم.

  • لوگو حداکثر عرض: 280 پیکسل

فاصله

همچنین حاشیه پایین پیش فرض را از ماژول حذف کنید.

  • حاشیه (پایین): 0 پیکسل

بخش را چسبناک کنید

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

  • موقعیت چسبنده: چسبیدن به بالا
  • افست از عناصر چسبنده اطراف: بله
  • پیش‌فرض انتقال و سبک‌های چسبنده: بله

رنگ پس زمینه در حالت چسبناک

سپس رنگ پس زمینه قسمت را به حالت چسبنده تغییر دهید.

  • رنگ پس زمینه: #ffffff

سایه جعبه حالت چسبنده

همچنین سایه جعبه را روی قسمت اعمال کنید.

  • رنگ سایه (رومیزی): rgba (0,0,0,0)
  • رنگ سایه (چسبنده): rgba (0,0,0,0.04)

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

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

ابتدا تنظیمات ماژول منو را باز کنید، به تب بروید فناوری و یک CSS ID اختصاص دهید.

  • شناسه CSS: منوی بخش

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

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

تگ های اسکریپت و سبک را اضافه کنید

ما از کدهای CSS و JQuery استفاده خواهیم کرد. برای آماده شدن برای این کار، تگ های سبک و اسکریپت را اضافه می کنیم.

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

ما خطوط زیر از کد CSS را بین تگ های سبک قرار می دهیم:

.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

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

خطوط باز کردن کد JQuery را اضافه کنید

در مرحله بعد کد JQuery را خواهیم داشت. خطوط زیر از کد JQuery را بین تگ های اسکریپت اضافه کنید:

jQuery(function($){
$(document).ready(function(){
 
});
});

متغیرها را ایجاد کنید

در ادامه چند متغیر ایجاد کنید.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

نماد ضامن را در ماژول منو قرار دهید

در مرحله بعد، با استفاده از خط کد زیر، متغیر نماد تعویض را در ماژول Menu قرار دهید:

toggleIcon.insertAfter(desktopMenu);

یک تابع کلیک اضافه کنید

ما همچنین یک تابع کلیک اضافه می کنیم.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

تغییرات Divi Theme Builder را ذخیره کنید

اکنون که همه چیز سر جای خود است، تنها کاری که باید انجام دهید این است که تمام تغییرات Divi Theme Builder را ذخیره کرده و نتیجه را مشاهده کنید!

قالب ساز Divi

بررسی

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

نماد همبرگر در ماژول منوی Divi

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

نتیجه

در این مقاله به شما نشان دادیم که چگونه با هدر جهانی خود در Divi Theme Builder خلاق شوید. 

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

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

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

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

...