نیاز برای ایجاد یک منوی شناور شفاف در DIVI ?
آیا به دنبال راهی برای قرار دادن هدر کلی خود در بالای بخش های اصلی صفحات خود هستید؟ در آموزش DIVI امروز ما دقیقاً به شما نشان خواهیم داد که چگونه این کار را انجام دهید.
ما قصد داریم یک هدر جهانی خیره کننده از ابتدا ایجاد کنیم (با استفاده از سازنده تم de DIVI) و یک افکت شناور در نوار منو اعمال می کنیم.
برویم.
بررسی
قبل از فرو رفتن در این آموزش، اجازه دهید نگاهی گذرا به نتیجه ای که می خواهیم به دست آوریم بیندازیم.
به Divi's Theme Builder بروید و یک قالب جدید اضافه کنید
بیا دیگه در Divi > Theme Builder.
سربرگ جهانی ایجاد کنید با Divi Theme Builder
روی «افزودن سربرگ جهانی» کلیک کنید و با انتخاب «ساخت سربرگ جهانی» ادامه دهید.
تنظیمات بخش
رنگ پس زمینه
پس از ورود به ویرایشگر قالب، متوجه یک بخش در صفحه خواهید شد. این قسمت را باز کنید و رنگ پس زمینه را به رنگ کاملا شفاف تغییر دهید. این اجازه می دهد تا همه چیز در زیر بخش نشان داده شود.
- پس زمینه: rgba(0,0,0,0)
اندازه
سپس به تب Section Style رفته و حداکثر عرض را تغییر دهید.
- حداکثر عرض (نگاه کنید به تصویر): 100%
فاصله
همچنین تمام حاشیه های داخلی پیش فرض Top و Bottom را حذف کنید.
- راس حاشیه داخلی: 0 پیکسل
- حاشیه داخلی پایین: 0 پیکسل
شاخص Z
و مطمئن شوید که بخش در بالای همه چیز باقی می ماند محتویات از قسمت hero باید z-index را در تنظیمات دید افزایش دهیم.
- شاخص Z: 99999
یک خط جدید اضافه کنید
ساختار ستون
پس از تکمیل تنظیمات بخش، می توانید با استفاده از ساختار ستون زیر یک ردیف جدید اضافه کنید:
اندازه
بدون افزودن ماژول، تنظیمات ردیف را باز کنید و تنظیمات اندازه را به صورت زیر تغییر دهید:
- هماهنگ کردن ارتفاع ستون: بله
- حداکثر عرض: 100
- حداکثر عرض: 100
فاصله
سپس حاشیه های داخلی سفارشی (بالا و پایین) را اضافه کنید.
- حداکثر حاشیه داخلی: 2vw
- حاشیه داخلی پایین: 0vw
عنصر اصلی
سپس، به تب Advanced بروید و با افزودن یک خط کد CSS به عنصر ردیف اصلی، مطمئن شوید که ستون‌ها در اندازه‌های صفحه کوچک‌تر در کنار یکدیگر قرار می‌گیرند.
display: flex;
ستون 2
رنگ پس زمینه
با باز کردن تنظیمات ستون 2 ادامه دهید و رنگ پس زمینه را به رنگ نیمه شفاف تغییر دهید.
- رنگ پس زمینه: rgba (255,255,255,0.71)
مرز
همچنین یک حاشیه پایین به ستون اضافه کنید.
- عرض حاشیه پایین: 2px
- رنگ دکمه و حاشیه پایین: #f4583f
جعبه سایه
و با افزودن یک سایه باکس ظریف یک افکت شناور ایجاد کنید.
- جعبه سایه: [مشاهده عکسبرداری]
- موقعیت شروع: 20 پیکسل
- قدرت تاری سایه کمان: 50 پیکسل
- قدرت پخش سایه جعبه: -20 پیکسل
- رنگ فونت زیرنویس: rgba(0,0,0,0.23)
یک ماژول Image به ستون 1 اضافه کنید
لوگو را دانلود کنید
هنگامی که تنظیمات سطر و ستون را کامل کردید، زمان اضافه کردن ماژول ها است، که با یک ماژول Image در ستون 1 شروع می شود. یک لوگو با پس زمینه شفاف بارگذاری کنید.
هم ترازی
به تب Module Style بروید و تراز را تغییر دهید.
- تراز تصویر: در مرکز
اندازه
همچنین عرض ماژول را در تنظیمات اندازه تغییر دهید.
- حداکثر عرض: 8 VW (رومیزی)، 14 VW (تبلت)، 21 VW (تلفن)
ماژول منو را به ستون 2 اضافه کنید
یک منو انتخاب کنید
بیایید به ستون بعدی برویم. در آنجا، تنها ماژول مورد نیاز ما یک ماژول منو است. منوی مورد نظر خود را انتخاب کنید.
رنگ پس زمینه را حذف کنید
سپس به تنظیمات پس زمینه رفته و رنگ پس زمینه را حذف کنید.
وضع
به تب Module Style بروید و طرح را تغییر دهید.
- سبک: متمرکز
- منوی کشویی: پایین
متن منو
تنظیمات متن منو را نیز استایل دهید.
- قلم منو: Mulish
- رنگ متن منو: #6f6666
- منوی اندازه متن: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
منوی کشویی
سپس تنظیمات را از منوی کشویی تغییر دهید.
- رنگ ردیف کشویی: #f4583f
آیکون های
از همین رنگ برای رنگ نماد منوی همبرگر در تنظیمات نماد استفاده کنید.
- رنگ نماد منوی همبرگر: #f4583f
فاصله
تنظیمات ماژول را با افزودن لایه بالا و پایین در تنظیمات Spacing تکمیل کنید.
- حداکثر حاشیه داخلی: 1,5 vw
- حاشیه داخلی پایین: 1,5 vw
ماژول Button را به ستون 3 اضافه کنید
اضافه کردن متن به دکمه
به ستون بعدی و آخر می رویم. یک ماژول دکمه با متن دلخواه خود اضافه کنید.
هم ترازی
سپس تراز بندی ماژول را تغییر دهید.
- تراز دکمه ها: در مرکز
تنظیمات دکمه
با سفارشی کردن دکمه بر این اساس ادامه دهید:
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه متن دکمه: 0,9 vw (رومیزی)، 1,5 vw (تبلت)، 2,5 vw (تلفن)
- رنگ متن دکمه: #ffffff
- دکمه پس زمینه: #f4583f
- پهنای حاشیه دکمه: 0 پیکسل
- رنگ حاشیه دکمه: #f4583f
- دکمه Border Radius: 0 پیکسل
- فونت دکمه: Mulish
- دکمه کم نور: متن پررنگ
فاصله
تنظیمات ماژول را با افزودن بالشتک سفارشی در اندازه های مختلف صفحه کامل کنید.
- حاشیه داخلی بالا و پایین: 1vw (رومیزی)، 2vw (تبلت)، 3vw (تلفن)
- حاشیه داخلی چپ و راست: 2vw (رومیزی)، 3vw (تبلت)، 4vw (تلفن)
پارامترهای بخش اضافی
مورد اصلی پیش فرض
پس از تکمیل سفارشی سازی کلی، یک کار دیگر وجود دارد. قسمت را بالای محتویات از صفحه شما برای این کار باید دو خط کد CSS را به عنصر اصلی بخش اضافه کنیم.
position: absolute;
top: 0;
عنصر اصلی در شناور
مطمئن شوید که همان خطوط کد CSS را به گزینه شناور عنصر اصلی اضافه کنید. این کار از سوسو زدن بخش با نگه داشتن ماوس روی آن جلوگیری می کند.
position: absolute;
top: 0;
تغییرات سازنده را ذخیره کنید و نتیجه را مشاهده کنید
پس از تکمیل بخش، می توانید هدر جهانی را ذخیره کرده و نتیجه را در سایت خود نمایش دهید!
بررسی
اکنون که تمام مراحل را طی کردیم، اجازه دهید آخرین نگاهی به نتیجه داشته باشیم.
دانلود DIVI در حال حاضر!!!
نتیجه
بنابراین ! برای این مقاله تمام شد. ما به شما نشان دادیم که چگونه یک نوار منوی شناور و شفاف با Divi's Theme Builder ایجاد کنید. هدر بالای قسمت اول صفحه یا پست شما قرار می گیرد.
برای آشنایی با Divi's Theme Builder، می‌توانید مقاله ما را نیز بخوانید نحوه ایجاد یک سربرگ جهانی با تم ساز Divi
همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
