آیا می خواهید با Divi یک هدر شفاف و چسبناک ایجاد کنید؟
وقتی نوبت به تنظیم یک هدر سراسری برای شما می رسد وب سایت، راه های زیادی برای نزدیک شدن به آن وجود دارد. یکی از رویکردهای ظریف تر، هدر شفاف است.
اگر تصمیم دارید با هدر شفاف استفاده کنید اما نیاز دارید که هنگام پیمایش چسبناک باشد، این آموزش را دوست خواهید داشت. انتقال بین شفاف و چسبنده بدون دردسر است!
برویم.
بررسی
قبل از فرو رفتن در آموزش، اجازه دهید نگاهی گذرا به نتیجه بیاندازیم.
یک الگوی سربرگ جهانی جدید ایجاد کنید
به Divi > Theme Builder بروید.
بخش شماره 1 تنظیمات
رنگ پس زمینه
پس از ورود به ویرایشگر قالب، متوجه یک بخش خواهید شد. این بخش به نوار سرصفحه بالا اختصاص خواهد یافت که در پیش نمایش این مقاله می توانید متوجه آن شوید. تنظیمات بخش را باز کنید و یک رنگ پس زمینه سیاه اضافه کنید.
- پس زمینه: #000000
فاصله
به تب Section Style بروید و تمام حاشیه های داخلی (بالا و پایین) را به طور پیش فرض حذف کنید.
- راس حاشیه داخلی: 0 پیکسل
- حاشیه داخلی پایین: 0 پیکسل
یک خط جدید اضافه کنید
ساختار ستون
با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:
یک ماژول Text به ستون اضافه کنید
یک ماژول Text به ستون ردیف اضافه کنید و پیام دلخواه خود را وارد کنید.
تنظیمات متن
به تب Module Style بروید و تنظیمات متن را مطابق با آن تغییر دهید:
- فونت متن: Oswald
- سبک کپی متن: TT
- رنگ متن متن: #ffffff
- متن اندازه متن:
- دسکتاپ: 19 پیکسل
- تبلت: 18 پیکسل
- تلفن: 16 پیکسل
- تراز متن: در مرکز
بخش شماره 2 را اضافه کنید
فاصله
درست در زیر بخش اول، یک بخش معمولی دیگر را اضافه کنید. این بخش به منوی شفاف ما اختصاص داده می شود که هنگام پیمایش چسبناک می شود.
تنظیمات بخش را باز کنید و تمام حاشیه های داخلی (بالا و پایین) را به طور پیش فرض در تب Style حذف کنید.
- راس حاشیه داخلی: 0 پیکسل
- حاشیه داخلی پایین: 0 پیکسل
یک خط جدید اضافه کنید
ساختار ستون
با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:
رنگ پس زمینه شفاف
تنظیمات خط را باز کنید و یک رنگ پس زمینه کاملا شفاف روی خط اعمال کنید.
- پس زمینه: rgba (255,255,255,0)
اندازه
به تب Line Style بروید و تنظیمات اندازه را تغییر دهید.
- از عرض ناودان سفارشی استفاده کنید: بله
- فاصله ستون ها: 1
- حداکثر عرض: 100
- حداکثر عرض: 100
فاصله
سپس حاشیه های داخلی سفارشی (چپ و راست) را اضافه کنید.
- حاشیه داخلی چپ: 10%
- حاشیه داخلی راست: 10%
جعبه سایه
بعد، یک سایه جعبه شفاف اعمال کنید. در ادامه آموزش از این سایه باکس در حالت چسبناک با رنگ سایه متفاوت استفاده خواهیم کرد.
- قدرت تاری سایه جعبه: 50 پیکسل
- رنگ قلم زیرنویس: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
موقعیت
برای اطمینان از ظاهر شدن خط در بالای صفحه محتویات از صفحه، با پس زمینه شفاف، از یک موقعیت مطلق برای ردیف خود در تب پیشرفته استفاده می کنیم.
- موقعیت: مطلق
- مکان: بالا سمت چپ
نمای ستون 2
ما همچنین ستون دوم ردیف خود را در رایانه لوحی و تلفن پنهان می کنیم تا طراحی سرصفحه کمتری در اندازه های صفحه نمایش کوچکتر داشته باشیم.
ماژول منو را به ستون 1 اضافه کنید
یک منو انتخاب کنید
اکنون که تنظیمات ردیف ما انجام شده است، زمان اضافه کردن ماژول‌ها فرا رسیده است که با یک ماژول Menu در ستون 1 شروع می‌شود. منوی مورد نظر خود را انتخاب کنید.
لوگو را دانلود کنید
سپس یک آرم بارگذاری کنید.
رنگ پس زمینه را حذف کنید
همچنین رنگ پس زمینه را از ماژول حذف کنید.
تنظیمات متن منو
به تب Style ماژول بروید و تنظیمات متن منو را مطابق با آن تغییر دهید:
- منوی قلم: Oswald
- منوی نور ملایم: پررنگ
- منوی سبک کپی: TT
- رنگ متن منو: #efefef
- اندازه متن منو: 18 پیکسل
- تراز متن: سمت راست
تنظیمات منوی کشویی
تنظیمات منوی کشویی را نیز تغییر دهید.
- رنگ ردیف کشویی: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- رنگ پس زمینه منوی موبایل: rgba (0,0,0,0,95)
تنظیمات نماد
سپس رنگ آیکون ها را در تنظیمات آیکون تغییر دهید.
- رنگ نماد سبد خرید: #ffffff
- رنگ نماد جستجو: #ffffff
- رنگ نماد منوی همبرگر: #ffffff
تنظیمات لوگو
همچنین با تغییر فیلتر وارونگی تصویر، رنگ لوگوی خود را در تنظیمات لوگو تغییر می دهیم.
- وارونه تصویر: 90%
اندازه
در مرحله بعد، ما حداکثر ارتفاع را به لوگوی خود اختصاص می دهیم.
- حداکثر عرض لوگو: 40 پیکسل
فاصله
در مرحله بعد، ما پد بالا و پایین را در اندازه های صفحه نمایش کوچک اضافه می کنیم.
- حداکثر حاشیه داخلی:
- تبلت و گوشی: 10 پیکسل
- حاشیه داخلی پایین:
- تبلت و گوشی: 10 پیکسل
ماژول Button را به ستون 2 اضافه کنید
متن اضافه کنید به دکمه
در ستون 2، تنها ماژول مورد نیاز ما یک ماژول Button است. متن دلخواه خود را اضافه کنید.
تراز بندی دکمه ها
به تب Module Style بروید و تراز دکمه را تغییر دهید.
- تراز دکمه: راست
تنظیمات دکمه
دکمه بعدی را سفارشی کنید.
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه متن دکمه: 16 پیکسل
- رنگ متن دکمه: #ffffff
- دکمه پس زمینه: #ed4441
- رنگ حاشیه دکمه: #ed4441
- دکمه Border Radius: 0 پیکسل
- فاصله حروف دکمه ها: 4 پیکسل
- فونت دکمه: Oswald
- دکمه Soft Light: متن پررنگ
- دکمه سبک کپی: TT
- نمایش نماد دکمه: بله
- رنگ نماد دکمه: #1a1a1a
فاصله
و تنظیمات ماژول را با افزودن مقادیر فاصله سفارشی تکمیل کنید.
- حاشیه بالا: -70 پیکسل
- حاشیه داخلی بالا و پایین: 25 پیکسل
جلوه های چسبنده سفارشی را اعمال کنید
بخش شماره 2 را چسبناک کنید
اکنون که پایه و اساس هدر خود را گذاشته ایم، زمان اعمال افکت چسبنده است! برای انجام این کار، با باز کردن تنظیمات در بخش دوم شروع کنید و تنظیمات چسبنده زیر را در تب پیشرفته اعمال کنید:
- موقعیت چسبنده: به بالا بچسبید
- Stick Top Offset: 0px
- میمیت چسبنده پایین: هیچ
- افست از عناصر چسبنده اطراف: بله
- پیش‌فرض انتقال و سبک‌های چسبنده: بله
رنگ پس زمینه خط را بچسبانید
اکنون که گزینه sticky فعال شده است، می توانیم تغییرات گزینه sticky را در تمام عناصر موجود در بخش ایجاد کنیم. ما با باز کردن ردیف حاوی منوی خود و اعمال رنگ پس زمینه سفید روی گزینه چسبنده شروع می کنیم.
- رنگ پس زمینه: #FFFFFF
فاصله ردیف چسبنده
در مرحله بعد، ما قصد داریم مقادیر فاصله تابع چسبنده خط را تغییر دهیم.
- راس حاشیه داخلی: 0 پیکسل
- حاشیه داخلی پایین: 0 پیکسل
جعبه سایه سطر چسبنده
همچنین در حال تغییر رنگ سایه جعبه در حالت چسبنده هستیم.
- رنگ قلم زیرنویس: rgba(0,0,0,0.08)
تعیین موقعیت خط چسبنده
در مرحله بعد، موقعیت سطر را در حالت چسبنده به حالت نسبی برمی گردانیم.
- سمت: نسبی
- مبدا افست: بالا سمت چپ
تنظیمات متن منوی حالت چسبنده
در مرحله بعد، رنگ متن منو را به حالت چسبنده تغییر می دهیم.
- رنگ متن منو: #000000
تنظیمات کشویی منو در حالت چسبنده
با رنگ پس زمینه منوی موبایل در تنظیمات منوی کشویی.
- منوی موبایل، رنگ پس زمینه: #ffffff
رنگ‌های نماد منو در حالت چسبنده
همچنین رنگ نمادها را در حالت چسبنده تغییر دهید.
- رنگ نماد سبد خرید: #000000
- رنگ نماد جستجو: #000000
- رنگ نماد منوی همبرگر: #000000
فیلتر لوگو در حالت چسبنده
سپس فیلتر معکوس را از تصویر لوگو به حالت چسبناک بردارید.
- وارونگی تصویر: 0%
فاصله دکمه ها در حالت چسبناک
و با حذف حاشیه منفی بالای دکمه در حالت چسبنده، آموزش را تکمیل کنید.
- حاشیه بالا: 0 پیکسل
بررسی
اکنون که تمام مراحل را طی کردیم، بیایید آخرین نگاهی به نتیجه نهایی بیندازیم.
دانلود DIVI در حال حاضر!!!
نتیجه
در این مقاله نحوه ترکیب سازنده ی را به شما نشان دادیم تم از Divi با گزینه های چسبناک جدید. به طور خاص، ما به شما نشان دادیم که چگونه در حین پیمایش از یک هدر شفاف به یک هدر چسبنده با سبک متفاوت تغییر دهید.
این رویکرد به شما امکان می دهد طراحی صفحه خود را با منوی خود ادغام کنید در حالی که همچنان یک هدر چسبناک زیبا هنگام پیمایش حفظ کنید.
اگر می خواهید در مورد Divi بیشتر بدانید، از کاتالوگ ما دریغ نکنید آموزش های Divi. همچنین می توانید مشورت کنید نحوه ایجاد صفحه وبلاگ با ماژول Divi Blog
اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.
با این حال ، شما همچنین می توانید مشورت کنید منابع ما, اگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشاوره راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در ضمن, این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
