آیا می خواهید یک منوی جانبی کشویی و پاسخگو در Divi ایجاد کنید؟

هنگام ایجاد یک وب سایت، اغلب تعجب می کنید که چه نوع هدر ایجاد کنید. بیشترین استفاده در وب نوار منوی افقی در بالا است، اما گزینه های دیگری مانند منوی کشویی نیز وجود دارد. 

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

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

در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از Divi's Theme Builder یک مورد ایجاد کنید.

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

بررسی

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

به Theme Builder بروید و یک سربرگ جهانی ایجاد کنید

به Theme Builder بروید

برای شروع، از منوی Divi در داشبورد وردپرس خود به Theme Builder بروید و روی “Add Global Header” کلیک کنید.

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

با انتخاب «ایجاد سربرگ جهانی» ادامه دهید.

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

تنظیمات بخش

رنگ پس زمینه

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

  • پس زمینه: rgba (255,255,255,0)

فاصله

به تب Style بروید و تمام حاشیه های پایین و بالا را بردارید.

  • راس حاشیه داخلی: 0 پیکسل
  • حاشیه داخلی پایین: 0 پیکسل

پست

در مرحله بعد، با رفتن به تب advanced و تغییر تنظیمات موقعیت، موقعیت بخش را تغییر می دهیم.

  • موقعیت: ثابت
  • مکان: مرکز بالا

خط اول را اضافه کنید

ساختار ستون

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

اندازه

بدون افزودن هیچ ماژولی ، تنظیمات ردیف را باز کرده و تنظیمات اندازه را به شرح زیر تغییر دهید:

  • حداکثر عرض: 97
  • حداکثر عرض: 100

فاصله

تنظیمات فاصله را تغییر دهید.

  • حداکثر حاشیه داخلی: 1٪
  • حاشیه داخلی پایین: 0 پیکسل

عنصر اصلی

سپس به تب advanced رفته و دو خط کد CSS را به عنصر اصلی خط اضافه کنید. این به ما کمک می کند تا به صورت عمودی تراز کنیم محتویات از ستون در ردیف ما.

display: flex;

align-items: center;

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

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

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

یک منوی جانبی کشویی و پاسخگو در Divi ایجاد کنید

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

3 فاصله به قسمت محتوا اضافه کنید

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

رنگ پس زمینه

رنگ پس زمینه ماژول را تغییر دهید.

  • پس زمینه: rgba (0,0,0,0.04)

تنظیمات متن

سپس به تب Style بروید و ارتفاع خط متن را بردارید. این به ما کمک می کند تا کنترل کاملی بر دامنه هایی که اضافه کرده ایم داشته باشیم.

  • ارتفاع خط متن: 0em

اندازه

ما قصد داریم پارامترهای اندازه ماژول را اصلاح کنیم.

  • حداکثر عرض: 120 پیکسل
  • تراز متن: سمت راست

فاصله

و با تبدیل ماژول به مربع، پارامترهای ماژول را تکمیل می کنیم. برای این کار از مقادیر سفارشی padding در تنظیمات فاصله استفاده می کنیم.

  • راس حاشیه داخلی: 40 پیکسل
  • حاشیه داخلی پایین: 60 پیکسل
  • حاشیه داخلی سمت چپ: 40 پیکسل
  • حاشیه داخلی سمت راست: 40 پیکسل

خط دوم را اضافه کنید

ساختار ستون

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

رنگ پس زمینه

بدون افزودن ماژول، تنظیمات ردیف را باز کنید و رنگ پس زمینه را به صورت زیر تغییر دهید:

  • پس زمینه: #e7e0e2

تصویر پس زمینه

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

  • اندازه تصویر پس زمینه: اندازه واقعی
  • موقعیت تصویر پس زمینه: مرکز
  • تکرار تصویر پس زمینه: تکرار

اندازه

سپس، به تب Style بروید و تنظیمات اندازه را مطابق با آن تغییر دهید:

  • از عرض ناودان سفارشی استفاده کنید: بله
  • فاصله ستون ها: 1
  • حداکثر عرض: 20% (رومیزی)، 40% (تبلت)، 60% (تلفن)
  • ارتفاع: 100vh

فاصله

همچنین تنظیمات فاصله را در اندازه های مختلف صفحه نمایش تغییر دهید.

  • حاشیه داخلی Summit: 10 VW (رومیزی)، 30 VW (تبلت)، 40 VW (تلفن)

مرز

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

  • عرض حاشیه سمت چپ: 10 پیکسل
  • رنگ حاشیه سمت چپ: #24394a
  • سبک حاشیه سمت چپ: دوبل

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

اضافه کردن محتوا

وقت آن است که اولین آیتم منوی Text Module را اضافه کنید! کپی را به کادر اضافه کنید محتویات.

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

با افزودن یک پیوند مرتبط به آیتم منو ادامه دهید.

  • آدرس لینک ماژول: #

رنگ پس زمینه

سپس رنگ پس زمینه را تغییر دهید.

  • پس زمینه: rgba (216,210,212,0.35)

تنظیمات متن

سپس به تب Style'3 بروید و تنظیمات متن را به صورت زیر تغییر دهید:

  • فونت متن: Domine
  • متن نور ملایم: متن پررنگ
  • متن رنگ متن: #000000
  • اندازه متن: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
  • تراز متن: در مرکز

فاصله

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

  • حاشیه پایین: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
  • حداکثر حاشیه داخلی: 1vw
  • حاشیه داخلی پایین: 1vw

ماژول متن کلون (1 ماژول در هر آیتم منو)

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

محتوای و پیوندهای ماژول متن تکراری را ویرایش کنید

اصلاح کنید محتویات و پیوندهای هر ماژول متن تکراری.

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

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

آخرین ماژول مورد نیاز ما در این ردیف یک ماژول Button است. یک کپی به انتخاب خود اضافه کنید.

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

همچنین یک لینک اضافه کنید.

  • آدرس لینک دکمه: #

هم ترازی

به تب Style بروید و تراز دکمه را تغییر دهید.

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

تنظیمات دکمه

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

  • استفاده از سبک های سفارشی برای دکمه: بله
  • اندازه متن دکمه: 0,7 vw (رومیزی)، 1,5 vw (تبلت)، 2,5 vw (تلفن)
  • رنگ متن دکمه: #000000
  • دکمه پس زمینه: rgba (0,0,0,0)
  • رنگ حاشیه دکمه: #24394a
  • دکمه Border Radius: 0 پیکسل
  • فاصله حروف دکمه ها: 4 پیکسل
  • دکمه فونت: هیچکدام را باز کنید
  • دکمه Soft Light: متن پررنگ
  • دکمه سبک کپی: TT

فاصله

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

  • حاشیه بالا: 5vw
  • حداکثر حاشیه داخلی: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
  • حاشیه داخلی پایین: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
  • حاشیه داخلی سمت چپ: 1,8 vw (رومیزی)، 3 vw (تبلت)، 4 vw (تلفن)
  • حاشیه داخلی سمت راست: 1,8 vw (رومیزی)، 3 vw (تبلت)، 4 vw (تلفن)
یک منوی جانبی کشویی و پاسخگو در Divi ایجاد کنید

قابلیت کشویی را اضافه کنید

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

اکنون که همه عناصر را در جای خود داریم، زمان ایجاد افکت منوی کشویی پاسخگو فرا رسیده است! ابتدا ماژول Text (حاوی دامنه ها) را در ستون سوم ردیف اول خود باز کنید و از یک شناسه CSS سفارشی در تب پیشرفته استفاده کنید. ما از این شناسه CSS برای ایجاد یک تابع کلیک در کد خود استفاده خواهیم کرد.

  • شناسه CSS: slide-in-open

کلاس CSS را به خط شماره 2 اضافه کنید

سپس خط دوم را باز کنید، به تب advanced بروید و یک کلاس CSS سفارشی اضافه کنید. با کلیک کردن، خط لغزش می یابد.

  • کلاس CSS: slide-in-menu-container
یک منوی جانبی کشویی و پاسخگو در Divi ایجاد کنید

موقعیت خط شماره 2 را تغییر دهید

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

  • موقعیت: مطلق
  • مکان: بالا سمت راست
  • افست افقی: -20٪ (رومیزی)، -40٪ (تبلت)، -60٪ (تلفن)
یک منوی جانبی کشویی و پاسخگو در Divi ایجاد کنید

کدورت خط 2 را تغییر دهید

و opacity را در حالت پیش فرض به 0 برسانید.

opacity: 0;

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

کد CSS را وارد کنید

برای ایجاد افکت تابع کلیک و استایل دادن به نماد همبرگر خود، به مقداری کد CSS نیاز داریم. یک ماژول کد به ستون دوم سطر اول خود اضافه کنید و خطوط زیر از کد CSS را بین تگ های سبک قرار دهید، همانطور که در صفحه چاپ زیر می بینید:

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 4px;

width: 100%;

background: #24394A;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2{

top: 10px;

}

.line-3{

top: 20px;

}

#slide-in-open.open .line-1{

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2{

display: none;

}

#slide-in-open.open .line-3{

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

right: 0!important;

opacity: 1!important;

}

.slide-in-menu-container {

-webkit-transition: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.5s ease !important;

}

کد JQuery را وارد کنید

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

jQuery(function($){ $('#slide-in-open'). کلیک کنید(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });

تغییرات سازنده تم و نمایش نتایج را در وب سایت ذخیره کنید

هنگامی که تمام عناصر هدر سراسری خود را کامل کردید، تنها کاری که باید انجام دهید این است که تمام تغییرات را ذخیره کرده و نتیجه را در سایت خود نمایش دهید!

بررسی

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

نتیجه

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

اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.