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

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

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

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

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

رنگ پس زمینه

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

• رنگ زمینه: # 000000

اندازه

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

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

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

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

ساختار ستون

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

اندازه

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

• عرض: 100٪
• حداکثر عرض: 100٪

فاصله

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

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

انیمیشن

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

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

موقعیت

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

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

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

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

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

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

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

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

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

حرکت عمودی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تنظیمات متن

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

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

فاصله

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

• حاشیه بالایی: 8vw

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

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

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

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

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

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

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

بررسی

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

آخرین افکار

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