Divi: نحوه اضافه کردن دکمه اسکرول به پایین در ماژول Fullwidth Header

آیا می‌خواهید به ماژول سرصفحه Fullwidth خود اضافه کنید DIVI یک دکمه اسکرول پایین؟

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

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

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

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

ابتدا بیایید به طرح هایی که در این مقاله ایجاد خواهیم کرد نگاه کنیم.

مثال 1

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

اکنون DIVI را دانلود کنید!!!

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

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

اکنون DIVI را دانلود کنید!!!

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

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

همچنین ببینید: Divi: نحوه ایجاد نمودار سازمانی با ماژول Blurb

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

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

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

• تقسیم کننده ها: کم
• سبک: سبک هشتم
• رنگ: #e5e8f0
• ارتفاع: 10vw

متن سرصفحه

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

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

تصاویر هدر

حرکت به تصاویر و یک تصویر هدر را انتخاب کنید. من یک تصویر ارائه شده با را انتخاب می کنم بسته چیدمان درمانی.

پس زمینه سربرگ

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

• توقف های گرادیان:
  • 25٪: #2e5b61
  • 100٪: RGBA (46، 91، 97، 0,5)

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

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

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

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

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

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

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

• ساخت تمام صفحه: بله

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

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

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

تصویر سربرگ

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

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

متن عنوان سربرگ

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

• عنوان :
  • سطح عنوان: H1
  • فونت: Cormorant Garamond
  • وزن قلم: پررنگ
  • رنگ متن: #e1ecea

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

• اندازه متن عنوان: 90 پیکسل، 40 پیکسل، 24 پیکسل
• ارتفاع خط عنوان: 1,1 em

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

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

• عنوان فرعی :
  • فونت: Inter
  • وزن قلم: پررنگ
  • رنگ متن: #e1ecea

را تنظیم کنید اندازه در 22 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی، و 16 پیکسل برای تلفن ها. تغییر دهید ارتفاع سطر در ساعت 1,6

• اندازه متن زیرنویس: 22 پیکسل، 20 پیکسل، 16 پیکسل
• ارتفاع خط زیرنویس: 1,6 em

دکمه هدر

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

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

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

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

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

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

دفعات بازدید: Divi: چگونه یک بخش Fluid Hero ایجاد کنیم

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

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

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

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

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

ما از تمام این پارامترها استفاده خواهیم کرد.

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

مثال شماره 1

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

• نماد: نماد اول
• رنگ: #e1ecea
• اندازه: 66 پیکسل (رومیزی و تبلت)، 50 پیکسل (تلفن)

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

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

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

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

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

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

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

برای بهترین نتیجه، باید به اندازه آیکون و رنگ پس‌زمینه دکمه دقت کنیم.

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

• نماد: نماد هشتم
• رنگ: #0e4951
• اندازه: 60 پیکسل (رومیزی)، 56 پیکسل (تبلت)، 50 پیکسل (تلفن)

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

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

اگر بخواهید رنگ ها را طوری ترکیب کنید که یک رنگ پس زمینه پشت نماد برش داشته باشید، چه؟ ما می توانیم این کار را با CSS انجام دهیم. 

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

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

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

سپس به برگه بروید فناوری و به فیلد بروید دکمه اسکرول پایین و این CSS را وارد کنید:

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

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

نتایج نمونه های مختلف

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

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

اکنون DIVI را دانلود کنید!!!

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

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

اکنون DIVI را دانلود کنید!!!

نتیجه

این نمای کلی ما از چهار دکمه اسکرول به پایین است که می توانید در ماژول Fullwidth Header Divi خود قرار دهید. دکمه اسکرول شامل چندین نماد برای انتخاب است و می توانید رنگ و اندازه آن را تنظیم کنید. 

با استفاده از فیلد CSS، می توانید دکمه را بیشتر سفارشی کنید. ترکیبی از گزینه های یک ظاهر طراحی دکمه و CSS به شما امکانات طراحی زیادی را با دکمه های اسکرول پایین می دهد.

امیدوارم این برای سایت وبلاگ بعدی شما مفید باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...