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

چگونه یک پیشخوان متحرک را به پیمایش در Divi اضافه کنیم

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

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

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

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

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

قسمت 1: ایجاد بخش عنوان

در این قسمت اول یک عنوان ساده برای طرح ایجاد خواهیم کرد.

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

ماژول بخش divi را ثبت کنید

سپس یک ماژول متن جدید به خط اضافه کنید.

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

تاریخ را ذخیره کنید
تاریخ 1 را ذخیره کنید

سپس سبک متن عنوان را به صورت زیر به روز کنید:

  • فونت عنوان 2: پراتا
  • مورد 2 اندازه متن: 130 پیکسل (دسک تاپ) ، 70 پیکسل (تبلت) ، 40 پیکسل (تلفن)
اصلاح عنوان Divi

قسمت 2: ایجاد پیشخوان با انیمیشن پیمایش

در این قسمت بعدی ، سه شمارنده ایجاد خواهیم کرد که اعداد پیمایشی را تا زمانی که متوقف شوند برای نمایش تاریخ (ماه ، روز و سال) متحرک می کنند. هر شمارنده با استفاده از مجموع 5 ماژول متن و یک ماژول جدا کننده ساخته خواهد شد. اولین ماژول متن به عنوان برچسب شمارنده (یعنی ماه ، روز ، سال) عمل می کند. چهار ماژول متنی بعدی هر کدام دارای یک عدد متفاوت هستند (در حال انجام است) که در پیمایش با استفاده از جابجایی حرکت عمودی در Divi متحرک می شوند. ماژول جدایی پایین به پنهان کردن سرریز اعداد کمک می کند.

در اینجا چگونه است.

یک خط دوم اضافه کنید

در زیر سطر موجود ، سطر دیگری را به یک ستون اضافه کنید.

تنظیمات خط

قبل از افزودن ماژول ، پارامترهای سطر را به صورت زیر به روز کنید:

  • عرض روده: 1
  • بالشتک: 0px زیاد ، 0px کم
پیکربندی مرز Divi

پارامترهای ستون

سپس تنظیمات ستون را باز کرده و پر کردن را به شرح زیر به روز کنید:

  • بالشتک (میز): 100px کم
  • لنت (تبلت و تلفن): 0px کم است
پیکربندی فاصله ستون Divi

ماژول متنی را اضافه کنید

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

یک ماژول متن divi اضافه کنید

محتوا / برچسب

برای محتوای ماژول متن ، کلمه "ماه" را اضافه کنید.

تقسیم ماه را مشخص کنید

تنظیمات طراحی متن

پس از افزودن محتوا ، تنظیمات طراحی را به شرح زیر به روز کنید:

  • رنگ زمینه: #ffffff
  • فونت متن: بحث
  • اندازه متن: 40px
  • ارتفاع خط متن: 2em
  • عرض: 100٪
  • padding: 20 پیکسل در بالا ، 20 پیکسل در پایین ، 20 پیکسل در سمت چپ ، 20 پیکسل در سمت راست
  • عرض مرز پایین: 5px
  • رنگ حاشیه پایین: #eeeeee
موقعیت

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

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

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

  • موقعیت: نسبی
  • شاخص Z 1
ماژول وردپرس Prata

برای شماره اول یک ماژول متن اضافه کنید

پس از قرار گرفتن اولین ماژول متن ، می توانیم اعدادی را که روی پیمایش حرکت می کنند اضافه کنیم. برای افزودن شماره اول ، یک ماژول متن جدید در زیر ماژول متن "ماه" اضافه کنید.

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

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

سپس برچسب ماژول متن را به روز کنید تا "آسان شماره" را برای مرجع آسان تر بخوانید. سپس محتوا را با شماره "1" به روز کنید.

ماژول عدد divi را اضافه کنید

تنظیمات طراحی برای شماره

در زیر برگه طراحی ، موارد زیر را به روز کنید:

  • قلم متن: پراتا
  • رنگ متن متن: # 8ab2d3
  • اندازه متن متن: 70px
  • فاصله نامه نامه: 4px
  • ارتفاع خط متن: 1.5em
  • لنت: 20px سمت چپ
پیکربندی رنگ Divi

توجه: اعداد دارای اندازه متن 70px و طول خط 1.5em هستند ، بدین معنی که ارتفاع کل ماژول متن نزدیک به 100px خواهد بود. این مهم است که به خاطر داشته باشید هر زمان که شروع به اضافه کردن جبران حرکت عمودی کنیم. به عنوان مثال ، اضافه کردن یک افست عمودی "1" به ماژول متن ، ماژول متن را دقیقاً 100 پیکسل که ارتفاع ماژول متن است منتقل می کند.

جلوه های شماره اول را حرکت دهید

جلوه های پیمایش زیر را به ماژول متن اضافه کنید.

در زیر برگه حرکت عمودی ، موارد زیر را به روز کنید:

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

در تب Fade In و Fade Out ، موارد زیر را به روز کنید:

  • محو شدن در داخل و خارج را فعال کنید: بله
  • کدورت اولیه: 0٪ (با 10٪)
  • کدورت متوسط: 100٪ (با 20٪)
  • کدورت پایان: 0٪ (تا 30٪)

اطمینان حاصل کنید که ماشه را برای اثر حرکت در بالای کلیپ تنظیم کنید:

  • راه انداز اثر حرکت: عنصر بالا
پیکربندی متن divi ماژول انیمیشن

ماژول متن را برای شماره دوم ایجاد کنید

شماره اول را کپی کنید

پس از ایجاد شماره اول ، آن را کپی کنید تا ماژول متن شماره دوم ایجاد شود. سپس برای مرجع بهتر ، برچسب را در نمای لایه ها به روز کنید.

ماژول متن divi 1 را کپی کنید

شماره / محتوا را به روز کنید

پارامترهای دوم ماژول متن دیجیتال را باز کنید و محتوا را با شماره "02" به روز کنید.

تقسیم شماره 2

موقعیت را به روز کنید

سپس گزینه های موقعیت را به شرح زیر به روز کنید:

  • مقام: مطلق
  • افست عمودی: 126px
تغییر موقعیت ماژول متن divi

جلوه های پیمایش را به روز کنید

سپس جلوه های پیمایش را به شرح زیر به روز کنید:

در برگه حرکت عمودی ، موارد زیر را به روز کنید:

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

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

  • شروع افست: 1 (با 20٪)
  • متوسط ​​افست: 0 (با 30٪)
  • افست نهایی: -1 (با 40٪)

در تب Fade In و Fade Out ، موارد زیر را به روز کنید:

  • کدورت اولیه: 0٪ (با 20٪)
  • کدورت متوسط: 100٪ (با 30٪)
  • کدورت پایان: 0٪ (تا 40٪)
divi اثر پیمایش انیمیشن

برای شماره سوم یک ماژول متنی ایجاد کنید

شماره دوم را کپی کنید

برای ایجاد ماژول متن برای شماره سوم ، ماژول متن را برای شماره دوم کپی کنید.

نسخه تکراری ماژول شماره 3

شماره / محتوا را به روز کنید

محتوا را با شماره "03" به روز کنید.

ماژول متن divi را اصلاح کنید

جلوه های پیمایش را به روز کنید

سپس جلوه های پیمایش را به روز کنید:

در برگه حرکت عمودی ، موارد زیر را به روز کنید:

  • شروع افست: 1 (با 30٪)
  • متوسط ​​افست: 0 (با 40٪)
  • افست نهایی: -1 (با 50٪)

در تب Fade In و Fade Out ، موارد زیر را به روز کنید:

  • کدورت اولیه: 0٪ (با 30٪)
  • کدورت متوسط: 100٪ (با 40٪)
  • کدورت پایان: 0٪ (تا 50٪)
ویرایش انیمیشن ماژول متن

برای شماره چهارم یک ماژول متن ایجاد کنید

شماره تکراری سوم

برای ایجاد شماره چهارم برای پیشخوان پیمایش ، ماژول متن را برای شماره سوم کپی کنید.

تقسیم ماژول متن divi شماره 4

شماره / محتوا را به روز کنید

محتوا را با شماره "04" به روز کنید.

مقدار ماژول متن divi را پیکربندی کنید

جلوه های پیمایش را به روز کنید

سپس جلوه های پیمایش را به روز کنید:

در برگه حرکت عمودی ، موارد زیر را به روز کنید:

  • شروع افست: 1 (با 40٪)
  • متوسط ​​افست: 0 (با 50٪)
  • افست پایان: 0 (با 60٪)

در تب Fade In و Fade Out ، موارد زیر را به روز کنید:

  • کدورت اولیه: 0٪ (با 40٪)
  • کدورت متوسط: 100٪ (با 50٪)
  • کدورت پایان: 100٪ (تا 60٪)
ماژول پیکربندی انیمیشن 4 divi

یک جداکننده پایین اضافه کنید

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

ماژول جدا کننده divi را اضافه کنید

سپس NO را برای نمایش جداکننده انتخاب کنید.

جداکننده divi را نمایش ندهید

تنظیمات سبک و موقعیت

طرح جداکننده را به شرح زیر به روز کنید:

  • رنگ زمینه: #ffffff
  • عرض: 100٪
  • ارتفاع: 100px
  • عرض بالای مرز: 5px

در تب Advanced ، موارد زیر را به روز کنید:

  • غیرفعال کردن در: تلفن و رایانه لوحی
  • مقام: مطلق
  • محل سکونت: پایین سمت چپ

مهم: فضایی که جدا کننده اشغال خواهد کرد ، قبلاً با اضافه کردن یک پر پایین 100 پیکسلی به ستون ایجاد شده است. اگر این بالشتک را اضافه نکنید ، جدا کننده با ارقام همپوشانی دارد.

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

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

ایجاد پیشخوان ها و ستون های اضافی

ستون شماره 1 را کپی کرده و محتوا را به روز کنید

برای ایجاد پیشخوان جدید ، ستون کپی 1. این یک ستون دوم با تمام عناصر موجود به طور خودکار ایجاد می کند.

سپس تمام کاری که شما باید انجام دهید این است که محتوای تمام ماژول های متن را با متن و شماره جدید به روز کنید.

تقسیم divi کل ستون

ستون شماره 2 را کپی کرده و محتوا را به روز کنید

هنگامی که محتوای تمام ماژول های متن در ستون 2 به روز شد ، ستون 2 را کپی کنید تا شمارنده سوم برای سال ایجاد شود. سپس محتوای هر ماژول متن را در صورت لزوم به روز کنید.

نتیجه نهایی

نتیجه نهایی است.

منابع دیگر

آخرین افکار

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

این مقاله حاوی نظرات 0

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

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

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

بازگشت به بالا
0 سهام
سهم
صدای جیر جیر
ثبات