ایجاد افکت های اسکرول با استفاده از Section Divider یک تکنیک ساده و سرگرم کننده است که می تواند به شما زندگی بیافزاید وب سایت با استفاده از تم وردپرس دیوی تقسیم بخش همچنان یک عنصر طراحی همه کاره است که برای افزودن خلاقیت به انتقال شما مفید است. محتویات صفحه
اما با افکت‌های اسکرول Divi، تقسیم‌کننده‌های بخش جالب‌تر می‌شوند! ترفند این است که بخشی را جدا کنید که به سبک انتخابی تقسیم کننده اختصاص دارد. سپس می توانید انواع حرکات تولید شده توسط اسکرول را به بخش اضافه کنید تا جلوه های اسکرول زیبایی را به عنوان پس زمینه برای محتویات از صفحه
بیایید شروع کنیم!
نتیجه احتمالی
در اینجا مروری بر طراحی هایی است که پس از اتمام این آموزش قادر خواهیم بود به آنها دست یابیم.
نحوه ایجاد تقسیم کننده های بخش پیمایش متحرک با Divi
ایجاد دو بخش محتوا
یک ردیف اضافه کنید
برای شروع ، یک ردیف با یک ستون در بخش پیش فرض ایجاد کنید.
حاشیه بخش (برای تست)
برای اهداف آزمایش ، حاشیه بالایی را به بخش اضافه کنید تا بتوانیم جایی برای پیمایش داشته باشیم. تنظیمات بخش را باز کنید و موارد زیر را اضافه کنید:
- حاشیه برتر: 80vh
ماژول متنی را اضافه کنید
در ردیف یک ستون ، یک ماژول متن جدید اضافه کنید.
محتوای ماژول متن
درون محتویات از بدنه، عنوان H2 زیر را اضافه کنید:
<h2>Section Avec Séparateurs</h2>
طراحی ماژول متن
تحت تنظیمات طراحی ، موارد زیر را به روز کنید:
- فونت متن: Roboto
- ترتیب متن: مرکز
- مورد 2 رنگ متن: # bae0d8
- هدر 2 اندازه متن: 80px (دسک تاپ) ، 50 پیکسل (تبلت) ، 30 پیکسل (تلفن)
یک بخش محتوای دوم اضافه کنید
در قسمت قبلی ، یک قسمت منظم جدید اضافه کنید.
یک ردیف اضافه کنید
در قسمت جدید ، یک سطر را به یک ستون اضافه کنید.
ماژول متنی را اضافه کنید
سپس یک ماژول متن جدید به خط اضافه کنید.
طراحی ماژول متن
فعلاً می توانیم محتوای بالشتک پیش فرض را در داخل بدنه نگه داریم. بیایید به تب Design برویم و موارد زیر را به روز کنیم:
- فونت متن: Roboto
- رنگ متن متن: #ddddddd
- اندازه متن: 16px
- ارتفاع خط متن: 1,5 em
- تراز متن: سمت چپ
- حداکثر عرض: 400 px
- ترتیب ماژول: مرکز
تنظیمات بخش
حتماً رنگ زمینه پیش فرض قسمت را حذف کنید ، اما یک زمینه کاملاً شفاف به آن بدهید. سپس می توانیم بالشتک بالایی را برداشته و یک حاشیه پایین برای اهداف تست پیمایش اضافه کنیم.
برای انجام این کار ، تنظیمات بخش را باز کرده و موارد زیر را به روز کنید:
- رنگ زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- حاشیه پایین: 80vh
- چسباندن: 0px
ایجاد جداکننده بخش متحرک
پس از اتمام دو بخش محتوا ، ما آماده هستیم تا بخش را برای تقسیم کننده های بخش متحرک خود اضافه کنیم.
یک بخش جدید اضافه کنید
پیش بروید و یک بخش منظم جدید در وسط دو بخش محتوای ایجاد کنید.
متن بخش
و دوباره ، رنگ زمینه پیش فرض قسمت را حذف کنید ، اما موارد زیر را به روز کنید:
- رنگ زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
طراحی تقسیم بخش
نگران نباشید ، ما رنگ زمینه خود را با تقسیم کننده بخش ایجاد می کنیم. برای انجام این کار ، بر روی زبانه طراحی کلیک کنید و یک تقسیم کننده بالا و پایین را به بخش زیر اضافه کنید:
طراحی تقسیم برتر
- سبک تقسیم کننده برتر: تصویر را ببینید
- رنگ تقسیم بالا: # 524fbf
- ارتفاع تقسیم کننده بالایی: 20vw
- تکرار افقی تقسیم بالایی: 0,6x
- تلنگر تقسیم بالا: افقی
طراحی تقسیم پایین
- سبک تقسیم پایین: تصویر را ببینید
- رنگ جداکننده پایین: # 524fbf
- قد تقسیم کننده پایین: 20vw
- تکرار افقی تقسیم پایین: 0,5x
- شیب تقسیم کننده پایین: افقی و عمودی
ارتفاع بخش و بالشتک
از آنجا که این بخش صرفاً برای طراحی تقسیم کننده است ، می توانیم از ارتفاع و بالشتک خلاص شویم تا فقط سبک تقسیم کننده نمایش داده شود و فضای غیرضروری بین دو بخش محتوایی وجود نداشته باشد. موارد زیر را به روز کنید:
- ارتفاع: 0px
- بالشتک: 0px زیاد ، 0px کم
جلوه های پیمایش جداکننده بخش
سپس جلوه های پیمایشگر زیر را به بخش بدهید:
زیر زبانه حرکت افقی ...
- حرکت افقی را فعال کنید: بله
می توانیم تنظیمات پیش فرض این مورد را از نمای دفتر .
سپس پارامترهای حرکت افقی را روی آن به روز کنید قرص :
- شروع افست: 3 (با 0٪ پنجره)
- میانگین جابجایی: 0 (با 50٪ نمای دید)
- جابجایی پایان: -3 (در 100٪ نمای دید)
زیر زبانه مقیاس بالا و پایین موارد زیر را در صفحه به روز کنید دفتر ...
- مقیاس شروع: 200٪ (با 0٪ پنجره)
- مقیاس متوسط: 150٪ (با 45٪ -65٪ از نمای نمایش)
- مقیاس پایان: 150٪ (در 100٪ نمای دید)
سپس جلوه Scaling Up and Down را روی به روز کنید قرص به شرح زیر است:
- مقیاس شروع: 400٪ (با 0٪ پنجره)
- مقیاس متوسط: 300٪ (با 45٪ -65٪ از نمای نمایش)
- مقیاس پایان: 400٪ (در 100٪ نمای دید)
دلیل اصلی نیاز به تنظیم جلوه های حرکتی در رایانه لوحی (و تلفن) به دلیل مقادیر حرکت افقی با استفاده از واحدهای طول پیکسل است (یعنی 3 = 300 پیکسل) ، که مطلق و متناسب با عرض مرورگر نیست.
حال بیایید نتیجه نهایی تقسیم بخش انیمیشن پیمایشگر خود را ببینید.
آخرین افکار
متحرک کردن تقسیم کننده های بخش در طومار یک روش سرگرم کننده و موثر برای زنده کردن یک صفحه وب است. امیدوارم که این کار به شما الهام بخشد تا بتوانید حتی خود خلاقیت بیشتری در طراحی ایجاد کنید.
