هنگام طراحی صفحه خدمات خود، باید مطمئن شوید که شما آخرین بازدید به تمام خدمات مختلفی که ارائه می کنید توجه کنید. در بسیاری از موارد این تنها یک سرویس خاص خواهد بود که آنها به دنبال آن هستند، اما اگر روشی ساده در ساختار خدمات خود ارائه دهید، به احتمال زیاد آخرین بازدید با همه آنها برخورد کنید
در این آموزش، ما به شما نشان خواهیم داد که چگونه با افکت های اسکرول خلاق شوید DIVI و یک انتقال خدمات بدون درز ایجاد کنید. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!
برویم.
نتیجه احتمالی
قبل از اینکه به آموزش برویم ، بیایید نگاهی به نتیجه در اندازه های مختلف صفحه بیندازیم.
1 ، ساختار عناصر را از نو بسازید
بخش شماره 1 را اضافه کنید
فاصله
با افزودن بخش جدیدی به صفحه ای که در آن کار می کنید ، شروع کنید. تنظیمات بخش را باز کنید و مقادیر padding را در اندازه های مختلف صفحه تغییر دهید.
- بالشتک بالایی: 80 پیکسل (دسک تاپ و رایانه لوحی) ، 0px (تلفن)
- بالشتک پایین: 80px
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر ، اضافه کردن یک ردیف جدید:
اندازه
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و تغییرات زیر را در پارامترهای بعدی اعمال کنید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 90٪
- حداکثر عرض: 1580px
فاصله
سپس یک حاشیه بالا و پایین سفارشی اضافه کنید.
- حاشیه بالایی: 200px
- حاشیه پایین: 200px
ماژول متن را به ستون 1 اضافه کنید
محتوای H2 را اضافه کنید
زمان اضافه کردن ماژول ها فرا رسیده است که با یک ماژول متنی در ستون 1 شروع می شود محتویات H2 به انتخاب شما
تنظیمات متن H2
به برگه طراحی ماژول بروید و تنظیمات متن H2 را به صورت زیر تغییر دهید:
- عنوان 2 پلیس: فصلنامه
- هدر 2 اندازه متن: 80px (دسک تاپ) ، 50 پیکسل (تبلت) ، 40 پیکسل (تلفن)
- ارتفاع خط 2 از سر: 1.2em
فاصله
سپس حاشیه پایینتری را در تبلت و تلفن اضافه کنید.
- حاشیه پایین: 50 پیکسل (فقط رایانه لوحی و تلفن)
ماژول متن را به ستون 2 اضافه کنید
اضافه کردن محتوا
بیایید به ستون دوم برویم. در آنجا اولین ماژول مورد نیاز ما یک ماژول متنی با یک معین است محتویات شرح.
تنظیمات متن
به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:
- فونت متن: کابین
- سبک فونت متن: حروف بزرگ
- رنگ متن: # 000000
- اندازه متن: 18px (دسک تاپ) ، 15px (رایانه لوحی) ، 13px (تلفن)
- فاصله نامه متن: 3px (دسک تاپ) ، 1px (رایانه لوحی و تلفن)
- ارتفاع خط متن: 3em
ماژول جداسازی را به ستون 2 اضافه کنید
دید
ماژول بعدی و نهایی که در این ستون نیاز داریم ، ماژول جداسازی است. مطمئن شوید که گزینه "Show Separator" فعال باشد.
- جداکننده را نشان دهید: بله
خط
سپس رنگ خط ماژول را تغییر دهید.
- رنگ خط: # 000000
اندازه
سپس برخی از پارامترهای اندازه را تغییر دهید.
- وزن تقسیم: 3px
- عرض: 28٪
فاصله
ما همچنین حاشیه برتر اضافه می کنیم.
- حاشیه بالایی: 10px
بخش شماره 2 را اضافه کنید
فاصله
بیایید به بخش منظم بعدی برویم. بالشتک بالایی پیش فرض را از قسمت بردارید.
- بالشتک بالایی: 0px
سرریزهای
همچنین سرریزها را نیز مخفی کنید.
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
یک خط جدید اضافه کنید
ساختار ستون
اضافه کردن یک ردیف اول با استفاده از ساختار ستون زیر:
اندازه
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کنید ، به پارامترهای بعدی سازی دسترسی پیدا کنید و تغییرات زیر را انجام دهید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- برابری ارتفاعات ستون: بله
- عرض: 90٪
- حداکثر عرض: 1580px
فاصله
سپس تمام بالشتک های پیش فرض بالایی و پایین را حذف کنید.
- بالشتک بالایی: 0px
- بالشتک پایین: 0px
تنظیمات ستون 1
رنگ پس زمینه
سپس تنظیمات ستون 1 را باز کرده و رنگ پس زمینه را تغییر دهید.
- رنگ زمینه: # f7f7f7
فاصله
تنظیمات ستون را با افزودن مقادیر padding سفارشی در اندازه های مختلف صفحه کامل کنید.
- بالشتک بالایی: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)
- بالشتک پایین: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)
- بالشتک چپ: 8٪
- بالشتک راست: 8٪
تنظیمات ستون 2
فاصله
ادامه کار را با باز کردن تنظیمات در ستون 2 ادامه دهید. به برگه پیشرفته بروید و مقادیر padding سفارشی را در اندازه های مختلف صفحه اضافه کنید.
- بالشتک بالایی: 100 پیکسل (دسک تاپ) ، 50 پیکسل (رایانه لوحی و تلفن)
- بالشتک پایین: 200px
- بالشتک سمت چپ: 150 پیکسل (میز) ، 0 عدد (تبلت و تلفن)
ماژول جداسازی را به ستون 1 اضافه کنید
دید
در ستون اول ، اولین ماژول مورد نیاز ما یک ماژول جداسازی است. مطمئن شوید که گزینه "Show Separator" فعال باشد.
- جداکننده را نشان دهید: بله
خط
سپس رنگ خط ماژول را تغییر دهید.
- رنگ خط: # 000000
اندازه
همچنین در پارامترهای اندازه تغییراتی ایجاد کنید.
- وزن تقسیم: 3px
- عرض: 50٪
ماژول متن را به ستون 1 اضافه کنید
محتوای H3 را اضافه کنید
ماژول بعدی که در ستون 1 نیاز داریم یک ماژول متنی است محتویات H3
تنظیمات متن H3
به برگه طراحی ماژول بروید و تنظیمات متن H3 را تغییر دهید:
- عنوان 3 پلیس: فصلنامه
- رنگ متن مورد 3: # 000000
- مورد 3 اندازه متن: 50 پیکسل (دسک تاپ) ، 40 پیکسل (تبلت) ، 35 پیکسل (تلفن)
- ارتفاع خط 3 از سر: 1.1em
ماژول متن را به ستون 2 اضافه کنید
اضافه کردن محتوا
در ستون دوم ، اولین ماژول مورد نیاز ماژول متنی است که دارای برخی از توضیحات است.
تنظیمات متن
تنظیمات متن ماژول را به شرح زیر تغییر دهید:
- فونت متن: کابین
- سبک فونت متن: حروف بزرگ
- اندازه متن: 18px (دسک تاپ) ، 15px (رایانه لوحی) ، 13px (تلفن)
- فاصله نامه متن: 3px (دسک تاپ) ، 1px (رایانه لوحی و تلفن)
- ارتفاع خط متن: 3em
ماژول دکمه را به ستون 2 اضافه کنید
یک کپی اضافه کنید
آخرین و آخرین ماژول مورد نیاز ماژول دکمه است. نسخه ای از انتخاب خود را وارد کنید.
تنظیمات دکمه
سپس دکمه را سبک کنید.
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 20 پیکسل
- رنگ متن دکمه: #ffffff
- رنگ پس زمینه دکمه: # 000000
- عرض مرز دکمه: 0px
- قلم دکمه: فصلنامه
- وزن قلم دکمه: جسورانه
فاصله
همچنین بالشتک سفارشی را اضافه کنید.
- بالشتک بالایی: 50px
- بالشتک پایین: 50px
- لبه چپ: 100px
- بالشتک راست: 100 پیکسل
موقعیت
و دکمه را بر این اساس مجدداً تغییر دهید:
- مقام: مطلق
- محل سکونت: پایین سمت چپ
هر بار که لازم باشد خط را کلون کنید
پس از اتمام کل خط و تمام ماژول های آن ، می توانید کل خط را سه بار کلون کنید.
همه مطالب را تغییر دهید
حتماً تمام مطالب را به صورت خطوط تکراری ویرایش کنید.
2. از جلوه های پیمایش استفاده کنید
جلوه های پیمایش ردیف اول
حرکت افقی
هنگامی که تمام خطوط موجود در بخش خود را کامل کردید ، وقت آن است که جلوه های پیمایش را اضافه کنید. خط اول بخش را باز کرده و حرکت افقی را اضافه کنید.
- حرکت افقی را فعال کنید: بله
- شروع افست: -5
- متوسط افست: 0 (با 26٪)
- پایان افست: 0
- اثر حرکت ماشه: وسط عنصر
محو و داخل می شوند
همچنین از یک اثر محو شدن ورودی و خروجی استفاده کنید.
- محو شدن درون و بیرون را فعال کنید: بله
- کدورت اولیه: 100٪
- کدورت متوسط: 100٪ (با 50٪)
- کدورت پایان: 0٪ (تا 53٪)
- اثر حرکت ماشه: وسط عنصر
جلوه های پیمایش ردیف میانه
حرکت عمودی
بعد ، ما جلوه های پیمایشی را به تمام خطوط بین خط اول و آخرین بخش اضافه خواهیم کرد. ابتدا از یک حرکت عمودی استفاده کنید:
- حرکت عمودی را فعال کنید: بله
- شروع افست: -4
- متوسط افست: 0 (با 26٪)
- پایان افست: 0
- اثر محرک حرکت: وسط عنصر
محو و داخل می شوند
همچنین یک اثر محو شدن داخل و خارج را فعال کنید.
- محو شدن درون و بیرون را فعال کنید: بله
- کدورت اولیه: 0٪
- کدورت متوسط: 100٪ (از 27٪ تا 50٪)
- افست پایان: 0 (با 53٪)
- اثر حرکت ماشه: وسط عنصر
جلوه های پیمایش خط آخر
حرکت عمودی
سپس آخرین خط بخش را باز کرده و حرکت عمودی زیر را اضافه کنید:
- حرکت عمودی را فعال کنید: بله
- شروع افست: -4
- متوسط افست: 0 (با 26٪)
- پایان افست: 0
- اثر حرکت ماشه: وسط عنصر
محو و داخل می شوند
با یک اثر محو شدن ورودی و خروجی و تمام می شوید!
- محو شدن درون و بیرون را فعال کنید: بله
- کدورت اولیه: 0٪
- کدورت متوسط: 100٪ (از 27٪ تا 50٪)
- کدورت پایان: 100٪ (تا 53٪)
- اثر حرکت ماشه: وسط عنصر
نتیجه نهایی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
آخرین افکار
در این مقاله نحوه ایجاد یک انتقال سرویس زیبا با افکت های اسکرول را به شما نشان دادیم DIVI. حتی قبل از ناپدید شدن یکی از سرویس‌ها، دیگری شروع به ظاهر شدن می‌کند و یک انتقال خوب را ایجاد می‌کند که برای چشم آسان است. این رویکرد به شما کمک می کند تا هر سرویس را در سطح فردی برجسته کنید. شما همچنین توانستید فایل JSON را به صورت رایگان دانلود کنید! اگر سوال یا پیشنهادی دارید، در قسمت نظرات زیر نظر خود را درج کنید.
