هنگام نمایش چندین تماس برای اقدام در صفحه خود ، ایجاد یک اثر پیمایشی تعاملی که عناصر مختلف را متحد می کند می تواند مفید باشد. یک راه حل این است که ماژول ها را به عناصر ثابت تبدیل کنیم در حالی که آنها در ظرف ستون خود حرکت می کنند. در آموزش امروز ، ما به شما نشان خواهیم داد که چگونه یک طراحی زیبا ایجاد کنید که از این روش استفاده کند. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید!
برویم.
بررسی
قبل از اینکه به آموزش برویم ، بیایید نگاهی نهایی به نحوه کار آن با اندازه های مختلف صفحه بیندازیم.
بیایید شروع به بازیابی کنیم!
یک بخش جدید اضافه کنید
با اضافه کردن یک بخش منظم جدید به صفحه ای که در آن کار می کنید شروع کنید.
فاصله
تنظیمات بخش را باز کنید و حاشیه پایین و بالا را برای اندازه های مختلف صفحه تغییر دهید.
- بالای اثاثه یا لوازم داخلی: 7vw (دسک تاپ) ، 10vw (رایانه لوحی) ، 15vw (تلفن)
- اثاثه یا لوازم داخلی در پایین: 20vw (دسک تاپ) ، 7vw (رایانه لوحی) ، 10vw (تلفن)
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:
اندازه
بدون افزودن ماژول ، تنظیمات ردیف را باز کرده و اجازه دهید کل عرض بخش را اشغال کند. او همچنین است خیلی مهم گزینه 'Equalize Column Heights' را فعال کنید. با این کار ، فضای خالی در ستون ها ایجاد می کنید که به ماژول های ثابت اجازه می دهد هنگام پیمایش صفحه آزادانه حرکت کنند.
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- برابری ارتفاعات ستون: بله
- عرض: 100٪
- حداکثر عرض: 100٪
ستون 2 بالشتک بالایی
سپس تنظیمات ستون 2 را باز کرده و مقداری پرکننده بالایی را روی دسک تاپ اضافه کنید.
- بالشتک بالایی: 20vw (دسک تاپ) ، 0vw (رایانه لوحی و تلفن)
ستون 3 بالشتک بالایی
همچنین یک مقدار پر سفارشی بالا را به ستون سوم اضافه کنید.
- بهترین بالشتک: 40vw (دسک تاپ) ، 0vw (رایانه لوحی و تلفن)
ستون 4 بالشتک بالایی
و پارامترهای خط را نیز با اضافه کردن مقدار پر بیشتر به ستون 4 تکمیل کنید.
- بالشتک بالایی: 60vw (دسک تاپ) ، 0vw (رایانه لوحی و تلفن)
CTA را به ستون 1 اضافه کنید
اضافه کردن محتوا
وقت آن است که اضافه کردن ماژول ها را شروع کنیم! اولین ماژول مورد نیاز ما در ستون 1 یک ماژول CTA (Call to Action) است. درج کنید محتویات د votre choix.
پیوند
همچنین یک لینک به دکمه اضافه کنید. این اجازه می دهد تا دکمه در طراحی نمایش داده شود.
- نشانی اینترنتی لینک دکمه: #
رنگ پس زمینه
رنگ پس زمینه ماژول را بعد از آن تغییر دهید.
- رنگ پسزمینه: #ffffff
تنظیمات متن
به برگه Design بروید و تنظیمات عمومی متن را تغییر دهید.
- ترتیب متن: مرکز
- رنگ متن: تیره
تنظیمات متن عنوان
همچنین تنظیمات متن عنوان را تغییر دهید.
- عنوان عنوان سطح: H3
- عنوان متن: طیفی
- عنوان متن رنگی: # 000000
- اندازه عنوان متن: 2vw (دسک تاپ) ، 4vw (رایانه لوحی) ، 6vw (تلفن)
تنظیمات متن بدن
با پارامترهای بدنه متن.
- قلم بدنه: Fira Sans
- وزن قلم: سبک
- متن رنگ بدن: # 000000
- اندازه متن بدن: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- ارتفاع بدن: 1.8em
تنظیمات دکمه
فراموش نکنید که دکمه ماژول CTA خود را نیز سبک کنید.
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- رنگ متن دکمه: #ffffff
- رنگ پس زمینه دکمه: #444eff
- عرض حاشیه دکمه: 0px
- شعاع حاشیه دکمه: 50vw
- قلم دکمه: Fira Sans
- بالشتک بالایی: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- اثاثه یا لوازم داخلی در پایین: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- بالشتک سمت چپ: 3vw (دسک تاپ) ، 7vw (رایانه لوحی) ، 13vw (تلفن)
- اثاثه یا لوازم داخلی در سمت راست: 3vw (دسک تاپ) ، 7vw (رایانه لوحی) ، 13vw (تلفن)
فاصله
سپس به تنظیمات فاصله رفته و حاشیه داخلی و زیرین سفارشی را اضافه کنید.
- بالشتک بالایی: 8vw
- بالشتک پایین: 8vw
مرز
همچنین زاویه های گرد را به ماژول اضافه کنید.
- گوشه های دور: 1vw (همه گوشه ها)
جعبه سایه
با اضافه کردن یک سایه جعبه ظریف ، طرح ماژول را تمام کنید.
- سایه جعبه موقعیت افقی: 10px
- Box Shadow Blur Force: 50px
- رنگ سایه: rgba (0,0,0,0,08،XNUMX،XNUMX،XNUMX،XNUMX)
کلاس CSS
حال ، برای اینکه جلوه اسکرول چسبنده کار کند ، لازم است که در انتهای این آموزش چند خط کد CSS اضافه کنیم. به عنوان آماده سازی ، ما یک کلاس CSS را به ماژول CTA اضافه خواهیم کرد.
- کلاس CSS: sticky-cta
یک ماژول تصویر به ستون 1 اضافه کنید
آپلود تصویر
بیایید به سراغ مد بعدی و آخر برویم که در ستون 1 به آن نیاز داریم ، این یک حالت تصویری است. یک تصویر PNG به انتخاب خود بارگذاری کنید.
هم ترازی
تراز بندی تصویر را در مرحله بعدی تغییر دهید.
- تراز بندی تصویر: مرکز
اندازه
حتماً عرض کامل را نیز به ماژول وارد کنید.
- پهنای باند نیرو: بله
فاصله
با رفتن به تنظیمات فاصله و افزودن مقادیر فاصله سفارشی برای اندازه های مختلف صفحه ، تنظیمات ماژول را کامل کنید.
- حاشیه بالایی: -5vw (رایانه لوحی و تلفن)
- حاشیه پایین: -12vw (دسک تاپ) ، 5vw (رایانه لوحی و تلفن)
- بالشتک سمت چپ: 3vw (دسک تاپ) ، 10vw (رایانه لوحی) ، 25vw (تلفن)
- اثاثه یا لوازم داخلی در سمت راست: 3vw (دسک تاپ) ، 10vw (رایانه لوحی) ، 25vw (تلفن)
دو ماژول را سه بار کلون کنید و ستون های باقی مانده را قرار دهید
پس از اتمام هر دو ماژول در ستون 1 ، می توانید آنها را سه بار کپی کرده و تکراری ها را در ستون های باقی مانده از ردیف قرار دهید.
تغییر تصاویر
اطمینان حاصل کنید که تصویر را در هر ماژول تکراری تغییر دهید.
محتوای CTA و رنگ پس زمینه دکمه ها را تغییر دهید
را نیز تغییر دهید محتویات CTA با رنگ های پس زمینه دکمه.
- ماژول CTA #2: #89ffb4
- ماژول CTA #3: #ff89f1
- ماژول CTA #4: #ffd389
کلاس CSS را به ماژول های تصویر در ستون های 1 ، 2 و 3 اضافه کنید
اکنون ، برای اطمینان از اینکه اثر چسبنده بر روی تصاویر نیز کار می کند ، باید یک کلاس CSS به ماژول های تصویر در ستون های 1 ، 2 و 3 اضافه کنیم.
- کلاس CSS: تصویر چسبنده
خط 2 را اضافه کنید
ساختار ستون
تنها چیزی که باقی می ماند افزودن کد CSS است. برای این کار ، یک خط جدید اضافه کنید.
ماژول کد را با کد CSS اضافه کنید
ماژول کد را به خط اضافه کنید ، کد CSS را در زیر وارد کنید و تمام شد!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
بررسی
اکنون که همه مراحل برداشته شده است ، بیایید نگاهی نهایی به آنچه در اندازه های مختلف صفحه نمایش رخ داده است ، بررسی کنیم.
آخرین افکار
در این مقاله ، ما به شما نشان دادیم که چگونه ماژول ها را در ظرف ستون خود ثابت نگه دارید. استفاده از این تکنیک می تواند جلوه های پیمایشی خیره کننده ای ایجاد کند که به شما امکان می دهد فراخوانهای مختلف عمل را در صفحه خود برجسته کنید. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید! اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.
