چگونه یک دکمه اسکرول پایین را در ماژول هدر Divi Fullwidth خود اضافه کنید

ماژول هدر تمام عرض Divi شامل دکمه ای است که به کاربر نشان می دهد که می تواند به پایین اسکرول کند. پس از کلیک بر روی آن، به طور خودکار به بخش بعدی هدایت می شوند. این یک دکمه ساده با چند نماد برای انتخاب است و رنگ و اندازه آن کاملاً قابل تنظیم است. در این پست، نحوه سفارشی سازی آن را بررسی می کنیم و چهار دکمه اسکرول به پایین را می بینیم که می توانید در ماژول هدر Divi Fullwidth خود قرار دهید. همچنین خواهیم دید که چگونه آن را با CSS برای گزینه های طراحی بیشتر استایل کنیم.

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

مشاهده دکمه های اسکرول به پایین

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

مثال یکی برای دکمه های اسکرول رومیزی به پایین

دکمه های اسکرول پایین تلفن مثال اول

دکمه های اسکرول رومیزی به پایین مثال دوم

دکمه های اسکرول تلفن به پایین مثال دو

دکمه های اسکرول رومیزی به پایین مثال سوم

دکمه های اسکرول تلفن به پایین مثال سه

دکمه های اسکرول رومیزی به پایین مثال چهار

دکمه های اسکرول پایین تلفن مثال چهار

دکمه های اسکرول به پایین طراحی هدر با عرض کامل

ابتدا طرح هدر تمام عرض خود را ایجاد می کنیم. من آن را از ابتدا با استفاده از طرح هایی از بسته طرح درمانی رایگان موجود در Divi می سازم. یک صفحه جدید ایجاد کنید و a را اضافه کنید ماژول هدر عرض کامل به یک برگه جدید با عرض کامل.

تقسیم کننده بخش تمام عرض

برای این هدر تمام عرض یک جداکننده اضافه می کنیم. تنظیمات را برای بخش عرض کامل.

سپس به جداکننده ها. را کلیک کنید در ذیل و 8 را انتخاب کنید^هفتم سبک جدایی رنگ را روی #e5e8f0 قرار دهید و 10vw را برای ارتفاع وارد کنید. تنظیمات بخش را ببندید.

• جداکننده: پایین
• سبک جداکننده: 8^هفتم سبک
• رنگ: #e5e8f0
• ارتفاع: 10vw

متن عنوان با عرض کامل

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

• عنوان: سفر خود را برای احساس بهتر از امروز آغاز کنید.
• زیرنویس: نام، درمانگر دارای مجوز
• دکمه یک متن: قرار ملاقات بگذارید
• محتویات بدنه: ندارد

تصاویر هدر با عرض کامل

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

پس زمینه هدر با عرض کامل

به پایین بروید زمینه. رنگ پس زمینه را حذف کرده و تب Gradient را انتخاب کنید. رنگ اولین استاپ گرادیان را به #2e5b61 تغییر دهید و موقعیت را روی 25 درصد قرار دهید. گرادیان Stop دوم را روی 100% بگذارید و رنگ را به rgba تغییر دهید (46,91,97,0.5).

• گرادیان استاپ یک: #2e5b61، 25%
• توقف شیب دوم: rgba(46,91,97,0.5) 100%

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

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

تصویر پس زمینه هدر تمام عرض

سپس انتخاب کنید تب تصویر پس زمینه و یک تصویر تمام صفحه را انتخاب کنید. من از تصویر دیگری از Therapy Layout Pack استفاده می کنم.

طرح هدر با عرض کامل

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

نماد در هدر به پایین اسکرول کنید

سپس فعال کنید نمایش دکمه اسکرول پایین. ما این دکمه را در مثال‌هایمان سبک می‌کنیم، بنابراین فعلاً آن را در تنظیمات پیش‌فرضش رها می‌کنیم.

• نمایش دکمه اسکرول پایین: بله

تصویر هدر تمام عرض

سپس به تصویر و گوشه های گرد بالا سمت چپ را برای دسکتاپ به 200 پیکسل تغییر دهید. بقیه گوشه های گرد را روی 0px قرار دهید. گوشه های گرد را برای تبلت ها و تلفن ها به 100 پیکسل تغییر دهید.

• دسکتاپ با گوشه های گرد: 200 پیکسل بالا سمت چپ، 0 پیکسل بقیه
• تبلت‌ها و تلفن‌های با گوشه‌های گرد: 200 پیکسل بالا سمت چپ، 0 پیکسل بقیه

متن سرصفحه تمام عرض

سپس به متن عنوان. از H1 برای سطح عنوان استفاده کنید. Cormorant Garamond را برای فونت عنوان انتخاب کنید، وزن را روی Bold و رنگ را روی #e1ecea قرار دهید.

• سطح عنوان: H1
• فونت: Cormorant Garamond
• وزن: نیمه مشکی
• رنگ: #e1ecea

سپس تنظیم کنید اندازه برای هر سه اندازه صفحه نمایش از 90 پیکسل برای رایانه های رومیزی، 40 پیکسل برای رایانه های لوحی و 24 پیکسل برای تلفن ها استفاده کنید. ارتفاع خط را به 1.1 em تغییر دهید.

• اندازه: 90px, 40px, 24px
• ارتفاع خط: 1.1 em

متن زیرنویس هدر تمام عرض

سپس به متن زیرنویس. فونت را به Inter، وزن را به Bold و رنگ را به #e1ecea تغییر دهید.

• فونت: Inter
• وزن: نیمه مشکی
• رنگ: #e1ecea

نگرش اندازه حداکثر 22 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی و 16 پیکسل برای تلفن ها. تغییر دادن ارتفاع خط تا 1.6em

• اندازه: 22px, 20px, 16px
• ارتفاع خط: 1.6 میلی متر

دکمه هدر تمام عرض

به پایین بروید تا تنظیمات برای دکمه یک و فعال کنید از سبک های سفارشی برای دکمه یک استفاده کنید. اندازه را به 14 پیکسل، رنگ متن را به #2e5b61 و رنگ پس زمینه را به #e1ecea تغییر دهید.

• از سبک های سفارشی برای دکمه یک استفاده کنید: بله
• اندازه متن: 14 پیکسل
• رنگ متن: #2e5b61
• پس زمینه دکمه: #e1ecea

تغییر دادن عرض حاشیه به 0px و شعاع مرزی تا 50 پیکسل از Inter برای فونت استفاده کنید و وزن را به Semi Bold تغییر دهید.

• عرض فریم: 0 پیکسل
• شعاع حاشیه: 50 پیکسل
• فونت: Inter
• وزن: نیمه ضخیم

برای پد دکمهاز 20 پیکسل برای بالا و پایین و 40 پیکسل برای چپ و راست استفاده کنید.

• بالشتک: 20 پیکسل بالا و پایین، 40 پیکسل چپ و راست

نمونه هایی از دکمه های اسکرول پایین در هدر

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

دکمه های اسکرول به پایین شامل سه تنظیمات هستند. هر تنظیم را می توان به طور مستقل برای هر اندازه صفحه تنظیم کرد. تنظیمات شامل:

• انتخاب نماد – از بین 11 نماد انتخاب کنید. اینها شامل انواع طرح های فلش با پس زمینه یا بدون پس زمینه، از جمله ساده، گرد، و جامد است.
• رنگ – انتخابگر رنگ پیش‌فرض Divi.
• اندازه – تنظیم پیش فرض اندازه Divi.

همچنین شامل یک فیلد CSS در تب Advanced است. ما از تمام این تنظیمات استفاده خواهیم کرد.

دکمه اسکرول به پایین مثال یک

برای مثال اول، از یک نماد بدون دایره بدون پس‌زمینه استفاده می‌کنیم. اولین نماد را انتخاب کنید، رنگ را به #e1ecea تغییر دهید و اندازه را به 66 پیکسل برای رایانه های رومیزی، 60 پیکسل برای تبلت ها و 50 پیکسل برای تلفن ها تغییر دهید.

• نماد: 1^St آیکون
• رنگ: #e1ecea
• اندازه: 66 پیکسل برای دسکتاپ، 60 پیکسل برای تبلت، 50 پیکسل برای تلفن

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

دکمه اسکرول به پایین مثال دو

برای مثال دوم، از نماد دایره استفاده خواهیم کرد. آیکون هفتم را انتخاب کرده و رنگ را به #e8c553 تغییر دهید. ما نماد را بزرگتر برای این یکی تنظیم می کنیم. اندازه را به 78 پیکسل برای رایانه های رومیزی، 70 پیکسل برای رایانه های لوحی و 60 پیکسل برای تلفن ها تغییر دهید.

• نماد: 7^هفتم آیکون
• رنگ: #e8c553
• اندازه: 78 پیکسل برای دسکتاپ، 70 پیکسل برای تبلت، 60 پیکسل برای تلفن

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

مثال سه برای دکمه اسکرول به پایین

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

آیکون هشتم را انتخاب کرده و رنگ آن را به #0e4951 تغییر دهید. اندازه را برای رایانه های رومیزی 60 پیکسل، برای تبلت ها 56 پیکسل و برای تلفن ها 50 پیکسل تنظیم کنید.

• نماد: 8^هفتم آیکون
• رنگ: #0e4951
• اندازه: 60 پیکسل برای دسکتاپ، 56 ​​پیکسل برای تبلت، 50 پیکسل برای تلفن

سبز سایه تیره تری از سبز در پس زمینه است. سایه تیره‌تر بالای سبز خودنمایی می‌کند و همچنان با بقیه چیدمان مطابقت دارد.

دکمه اسکرول به پایین مثال چهار

اگر بخواهید رنگ ها را با هم ترکیب کنید تا یک رنگ پس زمینه پشت نماد برش داشته باشید، چه؟ ما می توانیم این کار را با CSS انجام دهیم. برای این مثال، از CSS برای ایجاد یک شکل پس‌زمینه در پشت آیکون استفاده می‌کنیم که از طریق نماد بریده شده نشان داده می‌شود. خود نماد از تنظیمات پیش فرض استفاده می کند.

آیکون یازدهم را انتخاب کرده و رنگ آن را به #e1ecea تغییر دهید. ما نماد را برای این مورد کوچکتر می کنیم و یک شکل پس زمینه بزرگ ایجاد می کنیم. اندازه را به 50 پیکسل برای رایانه های رومیزی، 40 پیکسل برای رایانه های لوحی و 30 پیکسل برای تلفن ها تغییر دهید.

• نماد: 11^هفتم
• رنگ نماد: #e1ecea
• اندازه: 50 پیکسل برای دسکتاپ، 40 پیکسل برای تبلت، 30 پیکسل برای تلفن

سپس به تب Advanced بروید و به قسمت CSS روی دکمه اسکرول پایین بروید و این CSS را وارد کنید:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

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

دکمه هایی برای پیمایش به پایین نتایج

اولین مثال از دکمه اسکرول پایین روی دسکتاپ

دکمه اسکرول تلفن به پایین، مثال یک

دسکتاپ اسکرول پایین دکمه مثال دو

دکمه اسکرول تلفن به پایین، مثال دو

مثال سه برای دکمه اسکرول پایین روی دسکتاپ

دکمه اسکرول تلفن به پایین مثال سه

دکمه اسکرول رومیزی به پایین مثال چهارم

دکمه اسکرول تلفن به پایین مثال چهار

پایان افکار

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

ما می خواهیم از تو بشنویم. آیا دکمه‌های اسکرول به پایین را در ماژول هدر Divi Fullwidth خود سبک می‌کنید؟ در نظرات به ما اطلاع دهید.