شمارنده های متحرک اعداد در وب به عنوان راهی برای نمایش اعداد محبوب هستند. données برای برجسته کردن ارزش خدمات، مطالعات موردی و غیره DIVI دارای یک ماژول شمارنده اعداد اختصاصی است که می توان از آن برای تولید آسان شمارنده های اعداد متحرک استفاده کرد.
با این حال، در این آموزش، ما به شما نشان می‌دهیم که چگونه شمارنده‌های عددی ایجاد کنید که با استفاده از اسکرول متحرک شوند. DIVI. استفاده از گزینه های موقعیت و افکت های پیمایشی DIVI، ما یک طرح ساده برای نمایش تاریخ با اعداد پیمایشی طراحی خواهیم کرد.
قسمت 1: ایجاد بخش عنوان
در این قسمت اول یک عنوان ساده برای طرح ایجاد خواهیم کرد.
ابتدا یک ردیف از یک ستون به بخش اضافه کنید.
سپس یک ماژول متن جدید به خط اضافه کنید.
را به روز کنید محتویات ماژول متن با عناصر زیر:
تاریخ را ذخیره کنید
سپس سبک متن عنوان را به صورت زیر به روز کنید:
- فونت عنوان 2: پراتا
- مورد 2 اندازه متن: 130 پیکسل (دسک تاپ) ، 70 پیکسل (تبلت) ، 40 پیکسل (تلفن)
قسمت 2: ایجاد پیشخوان با انیمیشن پیمایش
در این قسمت بعدی ، سه شمارنده ایجاد خواهیم کرد که اعداد پیمایشی را تا زمانی که متوقف شوند برای نمایش تاریخ (ماه ، روز و سال) متحرک می کنند. هر شمارنده با استفاده از مجموع 5 ماژول متن و یک ماژول جدا کننده ساخته خواهد شد. اولین ماژول متن به عنوان برچسب شمارنده (یعنی ماه ، روز ، سال) عمل می کند. چهار ماژول متنی بعدی هر کدام دارای یک عدد متفاوت هستند (در حال انجام است) که در پیمایش با استفاده از جابجایی حرکت عمودی در Divi متحرک می شوند. ماژول جدایی پایین به پنهان کردن سرریز اعداد کمک می کند.
در اینجا چگونه است.
یک خط دوم اضافه کنید
در زیر سطر موجود ، سطر دیگری را به یک ستون اضافه کنید.
تنظیمات خط
قبل از افزودن ماژول ، پارامترهای سطر را به صورت زیر به روز کنید:
- عرض روده: 1
- بالشتک: 0px زیاد ، 0px کم
پارامترهای ستون
سپس تنظیمات ستون را باز کرده و پر کردن را به شرح زیر به روز کنید:
- بالشتک (میز): 100px کم
- لنت (تبلت و تلفن): 0px کم است
ماژول متنی را اضافه کنید
سپس یک ماژول متنی را به ستون اضافه کنید.
محتوا / برچسب
برای محتویات از ماژول متن، کلمه "ماه" را اضافه کنید.
تنظیمات طراحی متن
پس از آن محتویات اضافه شده، تنظیمات طراحی را به صورت زیر به روز کنید:
- رنگ زمینه: #ffffff
- فونت متن: بحث
- اندازه متن: 40px
- ارتفاع خط متن: 2em
- عرض: 100٪
- padding: 20 پیکسل در بالا ، 20 پیکسل در پایین ، 20 پیکسل در سمت چپ ، 20 پیکسل در سمت راست
- عرض مرز پایین: 5px
- رنگ حاشیه پایین: #eeeeee
موقعیت
سپس در زیر زبانه پیشرفته ، گزینه های موقعیت را به شرح زیر به روز کنید:
- موقعیت: نسبی
- شاخص Z 1
برای شماره اول یک ماژول متن اضافه کنید
پس از قرار گرفتن اولین ماژول متن ، می توانیم اعدادی را که روی پیمایش حرکت می کنند اضافه کنیم. برای افزودن شماره اول ، یک ماژول متن جدید در زیر ماژول متن "ماه" اضافه کنید.
تعداد / محتوا را اضافه کنید
سپس برچسب ماژول متن را به روز کنید تا "آسان شماره" را برای مرجع آسان تر بخوانید. سپس محتوا را با شماره "1" به روز کنید.
تنظیمات طراحی برای شماره
در زیر برگه طراحی ، موارد زیر را به روز کنید:
- قلم متن: پراتا
- رنگ متن متن: # 8ab2d3
- اندازه متن متن: 70px
- فاصله نامه نامه: 4px
- ارتفاع خط متن: 1.5em
- لنت: 20px سمت چپ
توجه: اعداد دارای اندازه متن 70px و طول خط 1.5em هستند ، بدین معنی که ارتفاع کل ماژول متن نزدیک به 100px خواهد بود. این مهم است که به خاطر داشته باشید هر زمان که شروع به اضافه کردن جبران حرکت عمودی کنیم. به عنوان مثال ، اضافه کردن یک افست عمودی "1" به ماژول متن ، ماژول متن را دقیقاً 100 پیکسل که ارتفاع ماژول متن است منتقل می کند.
جلوه های شماره اول را حرکت دهید
جلوه های پیمایش زیر را به ماژول متن اضافه کنید.
در زیر برگه حرکت عمودی ، موارد زیر را به روز کنید:
- فعال کردن حرکت عمودی: بله
- شروع افست: 1 (با 10٪)
- متوسط افست: 0 (با 20٪)
- افست نهایی: -1 (با 30٪)
در تب Fade In و Fade Out ، موارد زیر را به روز کنید:
- محو شدن در داخل و خارج را فعال کنید: بله
- کدورت اولیه: 0٪ (با 10٪)
- کدورت متوسط: 100٪ (با 20٪)
- کدورت پایان: 0٪ (تا 30٪)
اطمینان حاصل کنید که ماشه را برای اثر حرکت در بالای کلیپ تنظیم کنید:
- راه انداز اثر حرکت: عنصر بالا
ماژول متن را برای شماره دوم ایجاد کنید
شماره اول را کپی کنید
پس از ایجاد شماره اول ، آن را کپی کنید تا ماژول متن شماره دوم ایجاد شود. سپس برای مرجع بهتر ، برچسب را در نمای لایه ها به روز کنید.
شماره / محتوا را به روز کنید
پارامترهای دوم ماژول متن دیجیتال را باز کنید و محتوا را با شماره "02" به روز کنید.
موقعیت را به روز کنید
سپس گزینه های موقعیت را به شرح زیر به روز کنید:
- مقام: مطلق
- افست عمودی: 126px
جلوه های پیمایش را به روز کنید
سپس جلوه های پیمایش را به شرح زیر به روز کنید:
در برگه حرکت عمودی ، موارد زیر را به روز کنید:
- شروع افست: 1 (با 20٪)
- متوسط افست: 0 (با 30٪)
- افست نهایی: -1 (با 40٪)
در تب Fade In و Fade Out ، موارد زیر را به روز کنید:
- کدورت اولیه: 0٪ (با 20٪)
- کدورت متوسط: 100٪ (با 30٪)
- کدورت پایان: 0٪ (تا 40٪)
برای شماره سوم یک ماژول متنی ایجاد کنید
شماره دوم را کپی کنید
برای ایجاد ماژول متن برای شماره سوم ، ماژول متن را برای شماره دوم کپی کنید.
شماره / محتوا را به روز کنید
محتوا را با شماره "03" به روز کنید.
جلوه های پیمایش را به روز کنید
سپس جلوه های پیمایش را به روز کنید:
در برگه حرکت عمودی ، موارد زیر را به روز کنید:
- شروع افست: 1 (با 30٪)
- متوسط افست: 0 (با 40٪)
- افست نهایی: -1 (با 50٪)
در تب Fade In و Fade Out ، موارد زیر را به روز کنید:
- کدورت اولیه: 0٪ (با 30٪)
- کدورت متوسط: 100٪ (با 40٪)
- کدورت پایان: 0٪ (تا 50٪)
برای شماره چهارم یک ماژول متن ایجاد کنید
شماره تکراری سوم
برای ایجاد شماره چهارم برای پیشخوان پیمایش ، ماژول متن را برای شماره سوم کپی کنید.
شماره / محتوا را به روز کنید
محتوا را با شماره "04" به روز کنید.
جلوه های پیمایش را به روز کنید
سپس جلوه های پیمایش را به روز کنید:
در برگه حرکت عمودی ، موارد زیر را به روز کنید:
- شروع افست: 1 (با 40٪)
- متوسط افست: 0 (با 50٪)
- افست پایان: 0 (با 60٪)
در تب Fade In و Fade Out ، موارد زیر را به روز کنید:
- کدورت اولیه: 0٪ (با 40٪)
- کدورت متوسط: 100٪ (با 50٪)
- کدورت پایان: 100٪ (تا 60٪)
یک جداکننده پایین اضافه کنید
در زیر آخرین ماژول متن ، یک ماژول جدا کننده جدید اضافه کنید. این برای پنهان کردن سرریز پایین متن پیمایشی در نظر استفاده می شود.
سپس NO را برای نمایش جداکننده انتخاب کنید.
تنظیمات سبک و موقعیت
طرح جداکننده را به شرح زیر به روز کنید:
- رنگ زمینه: #ffffff
- عرض: 100٪
- ارتفاع: 100px
- عرض بالای مرز: 5px
در تب Advanced ، موارد زیر را به روز کنید:
- غیرفعال کردن در: تلفن و رایانه لوحی
- مقام: مطلق
- محل سکونت: پایین سمت چپ
مهم: فضایی که جدا کننده اشغال خواهد کرد ، قبلاً با اضافه کردن یک پر پایین 100 پیکسلی به ستون ایجاد شده است. اگر این بالشتک را اضافه نکنید ، جدا کننده با ارقام همپوشانی دارد.
ایجاد پیشخوان ها و ستون های اضافی
ستون شماره 1 را کپی کرده و محتوا را به روز کنید
برای ایجاد پیشخوان جدید ، ستون کپی 1. این یک ستون دوم با تمام عناصر موجود به طور خودکار ایجاد می کند.
سپس تمام کاری که شما باید انجام دهید این است که محتوای تمام ماژول های متن را با متن و شماره جدید به روز کنید.
ستون شماره 2 را کپی کرده و محتوا را به روز کنید
هنگامی که محتوای تمام ماژول های متن در ستون 2 به روز شد ، ستون 2 را کپی کنید تا شمارنده سوم برای سال ایجاد شود. سپس محتوای هر ماژول متن را در صورت لزوم به روز کنید.
نتیجه نهایی
نتیجه نهایی است.
منابع دیگر
- نحوه استفاده از ماژول شمارنده شمارنده در Divi
- نحوه استفاده از ماژول پیشخوان مدور در دیوی
- چگونه می توان شمارنده های دایره ای ایجاد کرد که در Divi زنده می شوند
آخرین افکار
این طرح ساده با پیمایش شمارنده اعداد متحرک باید برای نمایش مفید باشد données دیجیتال به روشی جدید و منحصر به فرد. با خیال راحت مفهوم تاریخ را کنار بگذارید و از شمارنده ها برای هر چیزی که می توانید رویاپردازی کنید استفاده کنید!
