حروف بزرگ متن یک جعبه متن پیمایشی را در اختیار شما قرار می دهد وب سایت که خوانندگان را با گزیده های مفیدی درگیر می کند محتویات. به آنها تیکر (یا تیکر اخبار) نیز گفته می شود و اغلب برای نمایش یک جریان ثابت از به روز رسانی اخبار در بالا یا پایین صفحه استفاده می شود. . معمولاً اسکرول انیمیشن با یک خط انجام می شود محتویات در یک حلقه به طوری که اطلاعات به طور مکرر نمایش داده شود. متاسفانه، <marquee>برچسب html منسوخ شده ، ما برای ایجاد حاشیه در این روزها به CSS و JavaScript اعتماد می کنیم. با این حال ، با Divi ، می توانید یک مستطیل انتخاب ساده ایجاد کنید بدون اینکه نگران کد سفارشی باشید.

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

بیایید شروع.

بررسی

آنچه شما باید برای شروع کار

برای شروع کار به موارد زیر نیاز دارید:

1. Le تم دیوی نصب شده و فعال
2. صفحه جدید ایجاد شده برای ساختن از ابتدا در قسمت جلویی (سازنده بصری)

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

آغاز مفهوم

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

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

با ایجاد یک بخش منظم با یک ردیف ستون شروع کنید.

سپس ، قبل از افزودن ماژول ، ردیف را با عرض ثابت ، جعبه سایه و شعاع به روز کنید ، مانند این موارد:

• حداکثر عرض: 200px
• اثاثه یا لوازم داخلی: 10px در بالا ، 10px در پایین
• گوشه های گرد: 10px
• Box Shadow: تصویر را ببینید
• سرریز افقی: پنهان
• سرریز عمودی: پنهان

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

وقتی خط کامل شد ، یک ماژول متن جدید به خط اضافه کنید.

سپس به روز رسانی کنید محتویات از بدنه با یک خط متن. در حال حاضر، مطمئن شوید که خط متن به خط دیگری تقسیم نمی شود.

• بدن: "این یک جمله است"

طراحی ماژول متن

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

• حاشیه: -100٪ در سمت چپ ، 100٪ در سمت راست

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

• سبک انیمیشن: اسلاید
• جهت انیمیشن: درست است
• مدت زمان انیمیشن: 5000ms
• شدت انیمیشن: 100٪
• کدورت شروع انیمیشن: 100٪
• انیمیشن منحنی سرعت: خطی
• تکرار انیمیشن: حلقه

نتیجه

بیایید نتیجه را اکنون ببینیم.

ایجاد خطوط متن طولانی تر

در طراحی متن انتخاب ساده بالا ، عرض خط متن را به همان عرض خط محدود کردیم. با این حال ، اگر بخواهیم یک متن طولانی تر با همان عرض ایجاد کنیم ، باید تنظیمات را کمی تغییر دهیم.

ابتدا روی ماژول متن قرار دهید و بدنه متن را با موارد زیر جایگزین کنید:

این یک فاز با لینک است

عرض و حاشیه بیشتری اضافه کنید تا متن طولانی ترین متن را داشته باشد

همانطور که مشاهده کردید ، متن به جای یک خط به سه خط تقسیم شده است.

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

• عرض: 207٪
• حاشیه: -207٪ در سمت چپ ، 207٪ در سمت راست
• شدت انیمیشن: 75٪

ترفند در اینجا این است که عرض را افزایش دهید و مقادیر حاشیه را به روز کنید تا فقط فضای کافی برای یک متن متن باقی بماند. سپس شدت انیمیشن را طوری تنظیم کنید که فاصله زیادی بین انیمیشن حلقه ای ایجاد نشود.

نتیجه

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

مکث متن انتخاب را در حالت شناور نگه دارید

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

قطعه CSS را برای مکث انیمیشن در شناور اضافه کنید

برای افزودن قطعه css ، تنظیمات ماژول متن را باز کرده و کد CSS سفارشی زیر را به عنصر اصلی اضافه کنید زیر برگه شناور :

انیمیشن-بازی-حالت: متوقف شده است.

نتیجه نهایی

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

این همه این آموزش است ، امیدوارم این روش به شما آموزش داده باشد که چگونه یک متن پیمایشی را در Divi اضافه کنید.