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

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

Pricing table animated using CSS

چه زمانی و چرا باید از انیمیشن های CSS استفاده کنید؟ h4>

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

می توانید از آنها برای متحرک سازی ویژگی های محصول یا دکمه تماس برای اقدام استفاده کنید.

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

انیمیشن های CSS نیز سریعتر از فلش یا فیلم هستند. آنها به سرعت بارگیری می شوند و توسط اکثر مرورگرهای وب مدرن پشتیبانی می شوند.

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

با این گفته ، بیایید ببینیم چگونه می توانید به راحتی انیمیشن های CSS را به سایت وردپرس خود اضافه کنید.

راه اندازی CSS Animate! پلاگین h4>

ما از این افزونه برای این آموزش استفاده خواهیم کرد. به شما امکان می دهد با استفاده از ویرایشگر WYSIWYG انیمیشن های CSS ایجاد کنید.

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

به سادگی یک پست جدید ایجاد کنید ، و یک دکمه جدید در وردپرس خود مشاهده خواهید کرد ویرایشگر بصری با برچسب” آن را تحریک کنید! “.

Animate it button in WordPress visual editor

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

Animation editor

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

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

Select when to run the animation

هنگامی که از تنظیمات راضی شدید ، می توانید بر روی دکمه Animate it کلیک کنید تا پیش نمایش انیمیشن را مشاهده کنید.

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

CSS animateit! shortcode in post editor

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

Replace dummy content inside shortcode with your own content

اکنون که پایین هستید ، برای ذخیره یا انتشار پست کلیک کنید و سپس روی دکمه پیش نمایش کلیک کنید. محتوای خود را به زیبایی متحرک خواهید دید.

امیدواریم این مقاله به شما کمک کند یاد بگیرید چگونه می توانید به راحتی انیمیشن های CSS را در وردپرس اضافه کنید. همچنین ممکن است بخواهید مقایسه ما را با 5 بهترین صفحه ساز وردپرس کشیدن و رها کردن .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/plugins/how-to-easily-add-css-animations-in-wordpress/.

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