Divi: چگونه یک منوی شناور چسبنده و قابل ارتقا ایجاد کنیم

آیا می‌خواهید با ایجاد یک منوی چسبنده قابل ارتقا در شناور با، خلاق شوید DIVI ?

در این آموزش، نحوه ایجاد یک منوی چسبنده قابل ارتقا با استفاده از شناور را به شما نشان خواهیم داد توسط Divi's Mechanic Layout Pack . 

ما دو طرح نمونه متفاوت را بررسی خواهیم کرد که می‌توانید آن‌ها را از ابتدا بازآفرینی کنید و روی هر نوع دیگری اعمال کنید وب سایت که شما ایجاد می کنید! 

منو در حالت شناور روی دسکتاپ نمایش داده می شود و با کلیک روی دستگاه های تلفن همراه فعال می شود.

بیایید برویم

بررسی

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

به عنوان مثال 1

کامپیوتر رومیزی

موبایل

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

به عنوان مثال 2

کامپیوتر رومیزی

موبایل

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

مراحل کلی

ناوبری ثابت را غیرفعال کنید

به گزینه های تم Divi دسترسی پیدا کنید

ما با چند مرحله کلی شروع می کنیم. این مراحل برای هر دو مثال یکسان است و برای رسیدن به نتیجه مطلوب ضروری است.

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

دفعات بازدید: نحوه ایجاد پوشش های سفارشی تصویر در Divi

برای این شما باید بروید DIVI >> گزینه های تم از داشبورد وردپرس

ناوبری ثابت را غیرفعال کنید

در آنجا باید غیرفعال کنید "نوار پیمایش ثابت" تا مطمئن شوید که هیچ فضایی در بالای صفحه شما باقی نمانده است.

• نوار ناوبری ثابت: غیرفعال است

نوار منوی اصلی صفحه را مخفی کنید

تنظیمات صفحه را باز کنید

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

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

منوی اصلی را با افزودن خطوط زیر کد CSS به صفحه خود مخفی کنید.

#main-header {
display: none;
}

یک بخش جدید در انتهای صفحه اضافه کنید

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

فاصله

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

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

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

ساختار ستون

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

اندازه

بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات زیر را در برگه تغییر دهید طرح تحت گزینه اندازه گیری

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

فاصله

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

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

عنصر اصلی

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

bottom: 0px;
position: fixed;

شاخص Z

و ما مطمئن خواهیم شد که خط (و ماژول Text که در مراحل بعدی اضافه خواهیم کرد) در بالای همه چیز باقی بماند محتویات از صفحه با افزایش شاخص Z، گزینه را گسترش دهید موقعیت.

• شاخص Z: 99

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

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

آخرین قسمت از مراحل کلی اضافه کردن یک ماژول کد به خط جدید است. کد CSS که در این ماژول کد اضافه می‌کنیم به ما کمک می‌کند تا به اثر آشکار در شناور دست پیدا کنیم. 

همچنین ببینید: نحوه ایجاد منوی چرخ چرخان در Hover در Divi

خطوط زیر کد CSS را در ماژول قرار دهید:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

نمونه طرح شماره 1

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

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

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

یک ماژول Text به ستون ردیف خود اضافه کنید. در محدوده ی محتویات، برای نمایش متن از سبک پاراگراف استفاده می کنیم "≡منو". 

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

رنگ پس زمینه پیش فرض

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

• زمینه: #ffffff

رنگ پس‌زمینه روی شناور

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

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

پیشینه شیب

و همچنین پس زمینه گرادیان پیش فرض را اضافه کنید.

• رنگ سمت چپ: rgba (255,255,255,0)
• رنگ راست: #ffffff
• سمت راست: 60%

تنظیمات پیش فرض متن

با رفتن به تب ادامه دهید طرح و تغییر تنظیمات متن

• قلم متن: خند
• وزن قلم: پررنگ
• رنگ متن: #021827
• حجم متن: 3vh
• جهت: مرکز

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

برخی از تنظیمات متن شناور را تغییر دهید.

• رنگ متن (Hover: rgba(255,255,255,0)
• اندازه متن (Hover): 0vh

تنظیمات متن پیوند

سپس به تنظیمات متن پیوند بروید و رنگ متن پیوند را تغییر دهید.

• رنگ متن پیوند: #000000

فهرست پیش‌فرض‌ها (رومیزی)

به تنظیمات متن فهرست پیش‌فرض بروید و آن را به دلخواه شخصی‌سازی کنید. مطمئن شوید که از «0px» برای اندازه متن در حالت پیش‌فرض آن استفاده می‌کنید.

• فونت لیست نامرتب: Khand
• سبک قلم فهرست: TT
• ترازبندی متن فهرست: در مرکز
• رنگ متن نامرتب: rgba (255,255,255,0)
• اندازه متن فهرست نامرتب: 0 پیکسل
• وزن متن فهرست: 0em
• موقعیت سبک لیست نامرتب: داخل

تنظیمات لیست ماوس را نگه دارید

سپس برخی از مقادیر را در hover تغییر دهید تا آیتم های منو ظاهر شوند.

• رنگ متن فهرست (Hover): #000000
• اندازه متن فهرست نامرتب (Hover): 2vh
• ارتفاع متن فهرست نامرتب (Hover): 2,1 em

فاصله پیش‌فرض (رومیزی)

سپس به تنظیمات فاصله (گزینه فاصله) و به ماژول Text شکل بدهید.

• حاشیه (چپ و راست): 45vw (رومیزی)، 39vw (تبلت)، 33vw (تلفن)
• پد (بالا و پایین): 2vw (رومیزی)، 4vw (تبلت)، 6vw (تلفن)

فاصله شناورها

همین مقادیر را در شناور تغییر دهید.

• حاشیه (چپ و راست): 14vw
• بالشتک (بالا و پایین): 8vw

حاشیه پیش فرض (رومیزی)

به تنظیمات حاشیه بروید و مطمئن شوید که هر یک از گوشه های گرد دارای مقدار '0px' هستند.

مرز روی شناور

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

• بالا سمت چپ: 50vw
• بالا سمت راست: 50vw

جعبه سایه

با دادن عمق به ماژول با استفاده از سایه جعبه ادامه دهید. این باعث می شود که منو در صفحه مورد توجه قرار نگیرد.

• قدرت تاری سایه های جعبه: 1000 پیکسل
• رنگ سایه: rgba (0,0,0,0.68)

کلاس CSS

همچنین یک کلاس CSS به ماژول اضافه می کنیم.

• کلاس CSS: dt-menu

گذار

در نهایت، مدت زمان انتقال را در تنظیمات انتقال کاهش دهید.

• مدت زمان انتقال: 100 میلی‌ثانیه

نمونه طرح شماره 2

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

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

بریم سراغ مثال دوم! در اینجا دوباره اضافه می کنیم "≡منو" با استفاده از سبک متن پاراگراف و آیتم های منو با استفاده از یک لیست نامرتب. همچنین پیوندی به هر یک از آیتم های منو به صورت جداگانه اضافه می کنیم.

رنگ پس‌زمینه پیش‌فرض (رومیزی)

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

• زمینه: #ffffff

رنگ پس‌زمینه روی شناور

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

• پس زمینه (Hover): #f71535

تنظیمات متن پیش‌فرض (رومیزی)

سپس به برگه بروید طرح و تغییراتی در ظاهر متن ایجاد کنید.

• قلم متن: خند
• وزن قلم: پررنگ
• رنگ متن: #021827
• حجم متن: 3vh

تنظیمات متن را نگه دارید

این تنظیمات را در حالت شناور تغییر دهید.

• رنگ متن (Hover): rgba (255,255,255,0)
• اندازه متن (Hover): 0vh

تنظیمات متن پیوند

به تنظیمات متن بروید و رنگ متن پیوند را تغییر دهید.

• رنگ متن پیوند: #ffffff

تنظیمات متن فهرست پیش‌فرض

همچنین تنظیمات طراحی آیتم های لیست نامرتب را تغییر دهید.

• فونت لیست نامرتب: Khand
• سبک قلم فهرست نامرتب: TT
• فهرست ترازبندی متن: مرکز
• رنگ متن فهرست نامرتب: rgba(255,255,255,0)
• اندازه متن فهرست: 0 پیکسل
• ارتفاع خط لیست نامرتب: 0em
• موقعیت سبک لیست نامرتب: داخل

تنظیمات لیست ماوس را نگه دارید

و برخی از این مقادیر را در حالت شناور تغییر دهید.

• رنگ متن فهرست نامرتب: #ffffff
• اندازه متن فهرست: 2vh
• ارتفاع خط لیست نامرتب: 2,1 em

فاصله پیش‌فرض (رومیزی)

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

• حاشیه (راست): 88 vw (رومیزی و تبلت)، 71 vw (تلفن)
• پد (بالا): 6 vw (رومیزی))، 10 vw (تبلت)، 18 vw (تلفن)
• پد (پایین): 4 vw (رومیزی)، 10 vw (تبلت)، 12 vw (تلفن)
• لایه سمت چپ: 1vw

فاصله شناورها

تغییر مقادیر در شناور

• حاشیه (راست): 59vw
• بالشتک: (بالا)13vw، (پایین)8vw، (چپ)1vw، (راست)13vw

مرز

و برای ایجاد این طرح ربع، حاشیه بالا سمت راست را در تنظیمات حاشیه تغییر می دهیم.

• بالا سمت راست: 50vw

جعبه سایه

همچنین برای ایجاد عمق در صفحه یک سایه کادر اضافه می کنیم.

• قدرت تاری سایه جعبه: 1000 پیکسل
• رنگ سایه: rgba (0,0,0,0.68)

کلاس CSS

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

• کلاس CSS: dt-menu

گذار

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

• مدت زمان انتقال: 100 میلی‌ثانیه

بررسی

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

مثال شماره 1

دفتر

موبایل

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

مثال شماره 2

کامپیوتر رومیزی

موبایل

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

نتیجه

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

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

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

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

...