بلوک انیمیشن Kadence Lottie در نسخه رایگان Kadence Blocks نوآوری را به وردپرس اضافه می کند که هیچ افزونه رایگان دیگری ارائه نمی دهد: راهی بدون کد برای افزودن آسان انیمیشن به هر سایت وردپرسی.
برای جشن راه‌اندازی Kadence Lottie Block، ما فروش انیمیشن Get Animated with Kadence را ارائه می‌دهیم که ۲۵٪ تخفیف برای همه بسته‌های سالانه ارائه می‌دهد. این فروش امشب (22 فوریه 2022) به پایان می رسد، پس از آن استفاده کنید!
kt-btns_9e68a8-6c .kt-btn-wrap-0 {margin-right: 5px;}. rtl .kt-btns_9e68a8-6c .kt-btn-wrap-0 {margin-left: 5px; margin-right: 0px ;}. wp-block-cadence-advancedbtn.kt-btns_9e68a8-6c .kt-btn-wrap-0 .kt-button {color: #fff; background: # 097bb3; border-color: # 097bb3;}. wp- block-cadence-advancedbtn.kt-btns_9e68a8-6c .kt-btn-wrap-0 .kt-button: شناور، .wp-block-kadence-advancedbtn.kt-btns_9e68a8-6c .kt-btn-wrap-0. -button: focus {color: #ffffff; border-color: # 0073e6;}. wp-block-kadence-advancedbtn.kt-btns_9e68a8-6c .kt-btn-wrap-0 .kt-button :: قبل از {نمایش: no kt-btn. -wrap-0 .kt-button: focus {background: # 3699ff;}
در این پست می خواهیم روشی عالی برای استفاده از انیمیشن Lottie در فوتر سایت با استفاده از قالب های Kadence Elements به شما نشان دهیم. این ابزار ساخت تم یک ویژگی حرفه ای است که می توانید با یکی از بسته های موجود در حال حاضر آن را دریافت کنید. امروز ما دو مقاله قبلی در مورد الگوهای عناصر Kadence و اعلامیه خود در Lottie Block را ارتقا می دهیم، که ممکن است بخواهید آنها را نیز بررسی کنید.
قالب‌های Kadence Elements ساده‌ترین راه برای سفارشی‌سازی طرح‌بندی صفحات خاص در وردپرس هستند و انیمیشن‌های Lottie بهترین راه برای افزودن انیمیشن‌های با کیفیت بالا و باند پایین به سایت وردپرس شما هستند. الگوهای Kadence Elements و Lottie Animations با هم فرصتی منحصر به فرد برای کاربران Kadence ایجاد می کنند تا محتوای شخصی شده چشم نواز را به سایت های خود اضافه کنند.
البته هر جا که از بلوک استفاده می کنید می توانید از بلوک Lottie Animation استفاده کنید. و کارهای بیشتری می توانید با الگوهای عناصر Kadence انجام دهید. با این حال، در اینجا یک مورد استفاده ساده و سرگرم کننده را نشان می دهیم که می توانید از هر دو استفاده کنید.
الزامات
برای اطمینان از انجام این کار به چند چیز نیاز دارید.
ابتدا مطمئن شوید که نسخه رایگان Kadence Blocks را نصب کرده اید. اینجاست که به بلوک Lottie Animations دسترسی خواهید داشت. بلوک Lottie برای استفاده در هر جایی که از بلوک ها استفاده می کنید در دسترس است.
سپس مطمئن شوید که Kadence Pro را با مجوز خود برای دسترسی به قالب های Kadence Elements نصب و فعال کرده اید. می‌توانید افزونه Kadence Pro را از صفحه دانلودها در ناحیه حساب KadenceWP.com دریافت کنید.
پس از نصب و فعال سازی، به آدرس زیر بروید ظاهر> کادنس و سوئیچ کنید موارد پیوست شده بر. با این کار به قالب های Kadence Elements و تم های ساخت دسترسی خواهید داشت.
پاورقی سفارشی خود را با الگوهای Kadence Elements ایجاد کنید
سپس به ظاهر> Kadence> عناصر برای اضافه کردن یک قالب جدید روی «افزودن جدید» کلیک کنید و سپس انتخاب کنید قالب از انواع آیتم های انتخاب شده
سپس عنوانی را به قالب مورد خود اضافه کنید که برای شما آشنا باشد، اما نه چیزی که از جلوی سایت شما قابل مشاهده باشد. فقط چیزی را در اینجا اضافه کنید که به شما در شناسایی الگوی خود در wp-admin در آینده کمک کند.
برای تنظیمات Kadence Elements Templates، در زیر Layout، Footer Replacement و سپس Page by> Custom را انتخاب کنید. سپس برای یافتن صفحه ای که می خواهید پاورقی را جایگزین کنید، گزینه Select items را کلیک کنید. می‌توانید چندین صفحه را انتخاب کنید یا فقط پاورقی را برای یک صفحه جایگزین کنید.
فوتر منحصر به فرد خود را طراحی کنید
برای فوتر خود، ما در حال ایجاد یک پاورقی سفارشی برای صفحه پیوندهای Pawsome Bodhi هستیم که برای جایگزینی Linktree او با صفحه ای در سایت خودش ایجاد کردیم. سایت خودش از قالب اولیه Yosemite استفاده می کند، اما او می خواهد یک صفحه منحصر به فرد باشد. بنابراین، او از الگوهای Kadence Elements برای ایجاد یک فوتر منحصر به فرد فقط برای این سایت استفاده می کند. او نمادهای اجتماعی خود را اضافه کرده است، اما مایل است کمی انیمیشن با انیمیشن لوتی پخش شود تا مردم بتوانند با او ارتباط برقرار کنند.
برای انیمیشن، او به LottieFiles.com می رود تا ببیند چه چیزی برای انیمیشن «تماس با ما» که با طرح مورد نظر او کار می کند، پیدا می کند. مانند سگ ها، بودی به سرعت حواسش پرت می شود و در عوض انیمیشنی جذاب و سرگرم کننده را انتخاب می کند. چه کسی دوست کورگی را دوست ندارد؟
# kt-layout-id_46a2c1-df> .kt-row-column-wrap {padding-top: -250px; padding-bottom: 0px;}
برای افزودن این انیمیشن به فوتر خود، مرد او ابتدا یک بلوک طرح بندی سطر سه ستونی با تفکیک 25/50/25 را انتخاب می کند.
در ستون وسط، بلوک Lottie Animations را انتخاب کنید.
به LottieFiles می رویم و روی انیمیشن کلیک می کنیم. این یک مودال حاوی برخی تنظیمات انیمیشن را نشان می‌دهد که می‌توانیم آنها را تغییر دهیم یا نه، اما پیوندی به فایل Lottie نیز وجود دارد که می‌توانیم از یک تصویر راه دور استفاده کنیم. ما در حال کپی کردن این URL هستیم.
وقتی URL را برای URL انیمیشن Lottie در بلوک Kadence Lottie خود قرار می دهیم، ویرایشگر پست ما انیمیشن جدید را به ما نشان می دهد. ما همچنین، البته، یک برچسب آریا اضافه می کنیم تا هرکسی که از صفحه خوان های جایگزین استفاده می کند بداند چه چیزی دارد. همچنین در هر دو ستون 25 درصدی، چند فاصله در قسمت راست و چپ Lottie Block اضافه می کنیم.
اگر بخواهیم پیوندی به انیمیشن Lottie اضافه کنیم، می توانیم به راحتی این کار را در بلوک Section که بلوک Lottie Animation را احاطه کرده است، انجام دهیم. از سوئیچ نمایش فهرست ویرایشگر بلاک وردپرس برای انتخاب بخشی که حاوی Lotti است استفاده کنید و سپس پیوند را وارد کنید اتصال همپوشانی همانطور که در زیر نشان داده شده است.
افزودن یک انیمیشن Lottie به پاورقی سفارشی آسان است
با Kadence، افزودن انیمیشن به پاورقی سفارشی آسان است. Kadence Elements Templates کنترل خلاقانه کاملی را برای سفارشی کردن هر صفحه، گروهی از صفحات، دستگاه ها، کاربران و موارد دیگر باز می کند. ویژگی های جدید موجود در بلوک های Kadence را اضافه کنید و امکانات خلاقانه شما بی پایان است.
در حالی که Lottie Animations Block در نسخه رایگان Kadence Blocks موجود است، الگوهای Kadence Elements فقط در افزونه Kadence Theme Pro در دسترس هستند.
تمامی بسته های سالانه در حال حاضر با 25 درصد تخفیف به فروش می رسد، اما این فروش امروز به پایان می رسد.
kt-btns_1228d5-16 .kt-btn-wrap-0 {margin-right: 5px;}. rtl .kt-btns_1228d5-16 .kt-btn-wrap-0 {margin-left: 5px; margin-right: 0px ;}. wp-block-kadence-advancedbtn.kt-btns_1228d5-16 .kt-btn-wrap-0 .kt-button {color: #fff; background: # 097bb3; border-color: # 097bb3;}. wp- block-cadence-advancedbtn.kt-btns_1228d5-16 .kt-btn-wrap-0 .kt-button: شناور، .wp-block-kadence-advancedbtn.kt-btns_1228d5-16 .kt-btn-wrap-0. -button: focus {color: #ffffff; border-color: # 0073e6;}. wp-block-kadence-advancedbtn.kt-btns_1228d5-16 .kt-btn-wrap-0 .kt-button :: قبل از {display: no -wrap-0 .kt-button: focus {background: # 3699ff;}