Divi: نحوه ایجاد یک منوی کشویی و فشاری

آیا می خواهید ایجاد کنید یک منوی کشویی و فشاری در DIVI که عناصر صفحه شما را پنهان نمی کند؟

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

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

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

بیایید برویم

بررسی

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

منوی فشاری کشویی را با سازنده تم Divi بسازید

ایجاد یک منوی جهانی جدید

برای ایجاد منو، یک سربرگ جهانی جدید در Divi Theme Builder ایجاد می کنیم.

به Divi > Theme Builder بروید.

دفعات بازدید: نحوه ایجاد هدر سراسری با فرم ورود در DIVI

سپس بر روی قسمت "افزودن هدر جهانی" در قسمت کلیک کنید قالب وب سایت به صورت پیش فرض. از لیست کشویی، "Build Global Header" را انتخاب کنید.

ایجاد منوی فشار

اولین عنصری که قرار است با هم بسازیم، بخش push menu است. این بخش حاوی آیتم های منو است که با کلیک بر روی دکمه تغییر منو، بالا و پایین می شوند.

تنظیمات بخش

تنظیمات بخش پیش فرض را باز کنید و تنظیمات را به صورت زیر به روز کنید:

زمینه

• پس زمینه: #1a1e36

حاشیه داخلی

• حاشیه داخلی: 0px بالا، 0px پایین

کلاس CSS

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

• کلاس CSS: et-push-menu

خط 1 را اضافه کنید

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

پارامترهای خط 1

در مرحله بعد، پارامترهای خط را به صورت زیر به روز کنید:

اندازه

• از عرض ناودان سفارشی استفاده کنید: بله
• فاصله ستون ها: 1
• حداکثر عرض: 100
• حداکثر عرض: 1 پیکسل

فاصله

• حاشیه: بالا 3vh، پایین 3vh

مرز

• عرض حاشیه پایین: 1px
• رنگ حاشیه پایین: rgba (255,255,255,0.2)

CSS سفارشی

در تب پیشرفته، CSS سفارشی زیر را به عنصر اصلی اضافه کنید:

display:flex;
justify-content:center;
align-items:center;

پارامترهای ستون

هنگامی که تنظیمات ردیف تعریف شد، تنظیمات ستون را باز کنید و یک قطعه CSS سفارشی را به عنصر اصلی اضافه کنید:

display:flex;
align-items:center;
justify-content:center;

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

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

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

همچنین راهنمای ما در مورد: نحوه ایجاد یک منوی ناوبری عمودی در DIVI

تنظیمات دکمه

سپس تنظیمات دکمه را به صورت زیر به روز کنید:

محتویات

• متن دکمه: طراحی

• URL پیوند دکمه: # (بعداً با URL سفارشی خود جایگزین کنید)

سبک

• استفاده از سبک های سفارشی برای دکمه: بله
• رنگ متن دکمه: #ffffff

• پهنای حاشیه دکمه: 0 پیکسل
• قلم دکمه: مونتسرات
• دکمه نور نرم: سنگین

• دکمه نماد: بله
• دکمه نماد: [انتخاب شما]
• فقط نمایش نماد روی دکمه شناور: خیر
• محل قرارگیری نماد دکمه: سمت چپ

ستون تکراری

اکنون برای ایجاد دکمه های اضافی برای منو، می توانیم ستون را کپی کنیم. برای این طرح، بیایید ستون را 4 بار کپی کنیم تا در مجموع 5 آیتم/دکمه منو در یک ردیف پنج ستونی به ما بدهیم.

خط 2 را اضافه کنید

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

همچنین بخوانید: نحوه افزودن فرم تماس به سربرگ جهانی در DIVI

برای ایجاد خط بعدی، خط 1 را کپی کنید.

تمام ستون ها به جز یکی را حذف کنید

سپس تمام ستون ها را به جز یک ستون در ردیف تکراری حذف کنید.

پارامترهای خط 2

پارامترهای خط 2 را به صورت زیر به روز کنید:

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

• عرض حاشیه پایین: 0px

پارامترهای ستون

سپس یک حاشیه به شکل زیر به ستون اضافه کنید:

• عرض حاشیه سمت راست: 1 پیکسل
• رنگ حاشیه سمت راست: rgba(255,255,255,0.2)

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

هنگامی که ستون حاشیه سمت راست را داشت، تنظیمات دکمه را باز کنید و موارد زیر را به روز کنید:

• اندازه متن دکمه: 14 پیکسل

• دکمه Soft Light: متن پررنگ
• فاصله حروف دکمه ها: 2 پیکسل
• سبک کپی دکمه: TT
• دکمه نماد: خیر

ستون تکراری

همانطور که قبلا انجام دادیم، بیایید ستون را کپی کنیم تا دکمه ها و ستون های اضافی ایجاد کنیم. برای این طرح، بیایید ستون را 3 بار کپی کنیم تا در مجموع 4 دکمه در یک ردیف 4 ستونی به ما بدهد.

حاشیه را از آخرین ستون حذف کنید

از آنجایی که نمی خواهیم آخرین ستون حاشیه مناسب داشته باشد، تنظیمات ستون 4 را باز کرده و عرض حاشیه را به روز کنید:

• عرض حاشیه سمت راست: 0 پیکسل

ایجاد نوار هدر اصلی

در مرحله بعد، بخش اصلی نوار هدر را ایجاد می کنیم. این نوار سرصفحه همیشه قابل مشاهده خواهد بود و حاوی آرم سایت ما، یک تماس برای اقدام و دکمه تغییر منوی ما خواهد بود.

اضافه کردن یک بخش

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

همچنین ببینید: نحوه ایجاد یک سربرگ جهانی با تم ساز در DIVI

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

تنظیمات بخش

اکنون برچسب بخش جدید را برای خواندن "Header Section" به روز کنید. سپس تنظیمات بخش را باز کنید و موارد زیر را به روز کنید:

فاصله

• حاشیه داخلی: 0px بالا، 0px پایین

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

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

تنظیمات خط

پارامتر ردیف را باز کنید و موارد زیر را به روز کنید:

اندازه

• عرض ناودان: 1
• عرض: 90٪
• ارتفاع: 70 پیکسل

فاصله

• حاشیه داخلی: 0px بالا، 0px پایین

CSS سفارشی

در تب پیشرفته، CSS سفارشی زیر را به عنصر اصلی اضافه کنید:

display:flex;
align-items:center;

با این کار ستون ها در ردیف به صورت عمودی در مرکز قرار می گیرند.

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

برای ایجاد CTA اصلی در قسمت هدر، می توانیم از دکمه ردیف دوم در قسمت بالا استفاده کنیم. دکمه را از ستون 1 ردیف 2 قسمت بالایی کپی کرده و در ستون 1 ردیف قسمت هدر قرار دهید.

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

سپس تنظیمات دکمه تکراری را باز کرده و موارد زیر را به روز کنید:

• متن دکمه: ثبت نام

• اندازه متن دکمه: 14 پیکسل
• رنگ متن دکمه: #1a1e36

• دکمه نماد: بله
• دکمه نماد: فلش سمت راست (نگاه کنید به تصویر)

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

در ستون وسط، یک ماژول Image اضافه کنید. به این ترتیب لوگوی سایت را به صورت پویا اضافه می کنیم.

نشانگر را روی ناحیه تصویر نگه دارید و روی نماد «استفاده از محتوای پویا» کلیک کنید. از منوی کشویی، "لوگوی سایت" را انتخاب کنید.

تنظیمات تصویر

سپس در زیر تب Style موارد زیر را به روز کنید:

• تراز تصویر: در مرکز

• حداکثر ارتفاع: 55 پیکسل

یک نماد همبرگر سفارشی اضافه کنید

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

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

برای ایجاد نماد منو، از یک ماژول متنی با کد HTML سفارشی استفاده می کنیم که با CSS خارجی استایل می شود.

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

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

سپس کد HTML زیر را به محتوای ماژول متن اضافه کنید:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

زمینه

به ماژول متن یک رنگ پس زمینه بدهید:

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

قالب بندی متن

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

• عرض: 70 پیکسل
• تراز ماژول: سمت راست
• ارتفاع: 70 پیکسل

• حاشیه داخلی: 20 پیکسل بالا، 20 پیکسل پایین، 16 پیکسل چپ، 16 پیکسل راست

کلاس CSS

در تب پیشرفته، کلاس CSS زیر را اضافه کنید:

• کلاس CSS: et-push-menu-toggle

کد اضافه کنید

برای اینکه عملکردی را به خانه بیاوریم که این منوی فشاری کشویی کار کند، CSS و jQuery سفارشی خود را به یک ماژول کد اضافه می کنیم.

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

سپس کد زیر را قرار دهید (نکته: این کد را در تگ بپیچید سبک برای اینکه به درستی کار کند):

.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}

سپس این کد را مستقیماً در زیر کپی و جای‌گذاری کنید (مهم: این کد را در برچسب‌های اسکریپت بپیچید تا به درستی کار کند):

(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );

متن دکمه و پیوندها را به روز کنید

در نهایت، می‌توانیم همه دکمه‌ها را با متن دکمه لازم و آدرس‌های لینک به‌روزرسانی کنیم.

انجام شده است !

تنظیمات را ذخیره کنید

فراموش نکنید که چیدمان و تنظیمات Theme Builder را ذخیره کنید.

نتیجه نهایی

برای دیدن نتیجه نهایی، صفحه مورد نظر خود را بررسی کنید سایت اینترنتی.

چسبناک بسازید

اگر می‌خواهید یک نسخه «چسبنده» از منو داشته باشید، فقط قطعه کد CSS زیر را به ماژول کد (بین تگ‌های سبک) اضافه کنید:

header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
  overflow-y: visible !important;
}

در اینجا نتیجه است.

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

نتیجه

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

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

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

...