رفتن به محتوای اصلی

نحوه ایجاد انیمیشن پیمایش در دیوی

Divi: ساده ترین قالب وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

صفحه About You یکی از مهمترین صفحات وب سایت شماست. این اجازه می دهد تا مردم بهتر شما را بشناسند و تصمیم بگیرند که آیا گام بعدی را راحت می گذارند. اگر به دنبال یک روش آسان برای گنجاندن داستان سرایی در این صفحه هستید ، این آموزش را دوست خواهید داشت. ما از جلوه های پیمایشی Divi برای ایجاد یک انتقال روان قصه در اسکرول استفاده خواهیم کرد. به محض کمرنگ شدن بخشی از داستان ، قسمت دیگری ظاهر می شود. احساس خواندن یک داستان جالب را به بازدیدکنندگان می دهد. 

نتیجه نهایی احتمالی

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

انیمیشن Divi

1. اولین بخش تمام صفحه را ایجاد کنید

یک بخش جدید اضافه کنید

رنگ پس زمینه

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

  • رنگ زمینه: # 000000
بخش پس زمینه Divi

اندازه

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

  • ارتفاع حداقل: 100vh
ارتفاع مقطع Divi

2. اضافه کردن یک خط متحرک

یک خط جدید اضافه کنید

ساختار ستون

سپس با استفاده از ساختار ستون زیر یک ردیف جدید به بخش خود اضافه کنید:

یک خط divi اضافه کنید

اندازه

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

  • عرض: 100٪
  • حداکثر عرض: 100٪
حداکثر پیکربندی عرض divi

فاصله

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

  • بالشتک سمت چپ: 20vw (میز) ، 10vw (تبلت و تلفن)
  • بالشتک سمت راست: 20vw (میز) 10vw (رایانه لوحی و تلفن)
بالشتک divi را سفارشی کنید

انیمیشن

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

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

  • سبک انیمیشن: کمرنگ شدن
  • مدت زمان انیمیشن: 3000ms
  • منحنی سرعت انیمیشن: ورود آسان
  • تکرار انیمیشن: یکبار
انیمیشن بخش Divi

موقعیت

در آخر ، با اصلاح گزینه های موقعیت ، مطمئن خواهیم شد که خط در مرکز ظرف قسمت قرار دارد.

  • موقعیت: مطلق
  • محل سکونت: مرکز
موقعیت لغو divi

3. عنوان را با جلوه های پیمایش درج کنید

ماژول متن # 1 را به ستون اضافه کنید

محتوای H1 را اضافه کنید

تنها ماژول مورد نیاز ما در این خط ، یک ماژول متنی با محتوای H1 است.

تقسیم titire را طراحی کنید

عنوان 1 تنظیمات متن

به برگه طراحی ماژول بروید و تنظیمات متن H1 را به صورت زیر تغییر دهید:

  • فونت عنوان: نونیتو
  • وزن وزن قلم عنوان: نیمه پررنگ
  • رنگ متن سربرگ: #ffffff
  • اندازه متن سربرگ: 7vw (دسکتاپ) ، 9vw (تبلت) ، 11vw (تلفن)
پیکربندی قلم Divi

حرکت عمودی

ما همچنین یک انیمیشن عمودی ظریف اضافه خواهیم کرد.

  • حرکت عمودی را فعال کنید: بله
  • شروع افست: 0 (با 50٪)
  • متوسط ​​افست: 10 (با 100٪)
  • افست نهایی: 10
انیمیشن متن Divi

اثر پیمایش ورودی و خروجی

با یک اثر محو شدن ورودی و خروجی.

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

  • محو شدن درون و بیرون را فعال کنید: بله
  • کدورت اولیه: 100٪
  • کدورت متوسط: 100٪ (با 55٪)
  • کدورت پایان: 0٪ (تا 62٪)
انتخاب انیمیشن Opacity

مقیاس گذاری اثر پیمایش به بالا و پایین

نکته آخر اینکه ، ما همچنین از یک اثر پیمایش در مقیاس بالا و پایین استفاده خواهیم کرد.

  • فعال کردن مقیاس بالا و پایین: بله
  • مقیاس شروع: 100٪ (تا 40٪)
  • مقیاس متوسط: 95٪ (به 74٪)
  • مقیاس پایان: 90٪
متن انیمیشن Divi

4. یکبار کل بخش را کلون کنید و متن توضیحات را با جلوه های پیمایش درج کنید

عنوان و محتوا را ویرایش کنید

پس از اتمام بخش اول ، می توانید آن را کاملاً شبیه سازی کنید. ماژول متن را در داخل ظرف بخش تکراری باز کنید و از یک نسخه H2 استفاده کنید.

بخش تقسیم تکراری

پارامترهای متن ماژول H2 Text را تغییر دهید

تنظیمات متن H2 را بر این اساس تغییر دهید:

  • عنوان 2 پلیس: نونیتو
  • عنوان قلم 2: نیمه پررنگ
  • مورد 2 رنگ متن: #ffffff
  • مورد 2 اندازه متن: 5vw (دسک تاپ) ، 7vw (رایانه لوحی) ، 8vw (تلفن)
  • ارتفاع خط 2: 1em (دفتر) ، 1.2 لیتر (رایانه لوحی و تلفن)
داستان در پیمایش

ماژول متن # 2 را به ستون اضافه کنید

اضافه کردن محتوا

سپس ماژول متن دیگری با توضیحات محتوای مورد نظر خود را به ستون اضافه کنید.

داستان در پیمایش

تنظیمات متن

تنظیمات متن را برای ماژول متن به شرح زیر تغییر دهید:

  • فونت متن: Sans Open
  • رنگ متن: #ffffff
  • اندازه متن: 1vw (دسک تاپ) ، 2.5vw (رایانه لوحی) ، 3vw (تلفن)
  • ارتفاع خط متن: 3.1em (میز) ، 2.5 لیتر (رایانه لوحی و تلفن)
داستان در پیمایش

فاصله

همچنین از یک حاشیه بالا استفاده کنید.

  • حاشیه بالایی: 8vw
داستان در پیمایش

اثر پیمایش ورودی و خروجی

بعد ، به جلوه های پیمایش در برگه پیشرفته بروید و از تنظیمات fade in و fade out زیر استفاده کنید:

  • محو شدن درون و بیرون را فعال کنید: بله
  • کدورت اولیه: 100٪
  • کدورت متوسط: 0٪ (با 31٪)
  • کدورت نهایی: 0٪ (تا 35٪)
انیمیشن پیمایشی ماژول متن Divi

مقیاس گذاری اثر پیمایش به بالا و پایین

همچنین یک اثر افزایش و کاهش مقیاس بندی را اضافه کنید.

به راحتی فروشگاه آنلاین خود را ایجاد کنید

دانلود رایگان WooCommerce، بهترین پلاگین تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتال خود را در وردپرس. [توصیه میشود]

  • فعال کردن مقیاس بالا و پایین: بله
  • مقیاس شروع: 100٪ (تا 40٪)
  • مقیاس متوسط: 95٪ (به 74٪)
  • مقیاس پایان: 90٪
ماژول متن divi اقتباس انیمیشن

اکنون می توانید این بخش آخر را بارها و بارها کلون کنید. با این حال ، شما نیاز به تنظیم محتوای هر بخش برای نیازهای خود دارید.

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

نتیجه نمونه

آخرین افکار

در این مقاله ، ما به شما نشان داده ایم که چگونه می توانید با استفاده از جلوه های پیمایش داخلی Divi ، در صفحه About خود یک داستان بگویید. جلوه ای که ایجاد کردیم باعث می شود نسخه پشت سر هم کمرنگ و ناپدید شود و باعث شود بازدیدکنندگان احساس کنند در حال خواندن یک داستان هستند. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید! اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.

این مقاله حاوی نظر 1

  1. بسیار ممنونم که آموزش شما خیلی به من کمک کرد
    آیا می دانید چگونه می توان انتقال صفحات را با divi انجام داد؟ من این پلاگین را پیدا کردم که به نظر می رسد خوب کار می کند https://divi-page-transition.com در سایت من شما چی فکر میکنید ؟

دیدگاهتان را بنویسید

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

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

بازگشت به بالا