دیتکو - لوگو
Search
Close this search box.

نحوه افزودن جلوه های شناور تصویر در وردپرس (مرحله به مرحله)

فهرست عنوان محتوای صفحه

[ad_1]

آیا می خواهید یاد بگیرید که چگونه جلوه های شناور تصویر را در وردپرس اضافه کنید؟

جلوه های شناور تصویر می تواند باعث تعامل و جذابیت بیشتر سایت شما شود. با این کار اولین برداشت بهتری ایجاد می شود و زمان صرف شده در سایت شما بهبود می یابد.

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

نحوه افزودن افکت های شناور تصویر در وردپرس

جلوه های شناور تصویر چیست؟

جلوه های شناور تصویر به شما امکان می دهد عناصر تعاملی را به تصاویر ثابت خود مانند انیمیشن ها ، جلوه بزرگنمایی ، پنجره بازشو و موارد دیگر اضافه کنید.

به عنوان مثال ، شما می توانید تصاویری داشته باشید که برای آشکار کردن قیمت شما یا پیوند به نمونه کارها ، تلنگر می زند.

همچنین شناورهای تصویر راهی خلاقانه برای نمایش عکس ها ، گالری ها و عکس های کوچک به شما می دهد.

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

  • زمانی را که بازدید کنندگان در سایت شما می گذرانند بهبود ببخشید
  • روش های خلاقانه ای برای ارائه محتوا به بازدیدکنندگان خود ارائه دهید
  • به کاربران خود اطلاع دهید که یک عنصر سایت قابل کلیک است

چگونه جلوه های شناور تصویر را در وردپرس ایجاد کنیم

بهترین روش برای افزودن جلوه های شناور تصویر به خود وب سایت وردپرس با استفاده از یک افزونه وردپرس است.

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

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

در این آموزش ، ما چهار روش مختلف برای افزودن جلوه های شناور مورد نیاز را به شما نشان خواهیم داد.

1. افزودن جلوه های Flipbox شناور تصویر در وردپرس

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

می توانید این انیمیشن را به تصاویر خود اضافه کنید تا متن آشکار شود یا حتی تصویر را در حالت شناور تغییر دهید.

flipbox شناور تصویر

می توانید نحوه تلنگر تصویر ، همراه با طراحی تصویر در دو طرف را کنترل کنید.

اگر شما عکاس، می توانید از این کار برای نمایش کارهای خود و جدا کردن نمونه کارها استفاده کنید.

ساده ترین راه برای اضافه کردن جلوه های تصویر flipbox با پلاگین وردپرس است. یک افزونه به شما امکان می دهد این جلوه ها را به سرعت ایجاد و شخصی سازی کنید.

ما توصیه می کنیم از Flipbox – عکسهای عالی Flip Boxes با تصویر پلاگین این بهترین افزونه flipbox و hover image برای وردپرس است.

این افزونه به شما امکان می دهد به سادگی جلوه های سفارشی flipbox را به تصاویر وردپرس خود اضافه کنید.

تنظیمات افزونه flipbox شناور تصویر

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

برای جزئیات بیشتر ، به راهنمای ما مراجعه کنید نحوه ایجاد پوشش و شناور flipbox در وردپرس.

2. افزودن بزرگنمایی تصویر و بزرگنمایی جلوه ها در وردپرس

جلوه های بزرگنمایی تصویر به کاربران شما امکان می دهد جزئیاتی را که نمی توانند در یک تصویر با اندازه معمولی مشاهده کنند ، ببینند.

این یک اثر عالی برای آموزش محصولات و تصاویر با جزئیات بالا است.

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

بزرگنمایی تصویر

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

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

تنظیمات افزونه WP Image Zoom

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

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

3. افزودن جلوه های متحرک تصویر در وردپرس

انواع افکت های شناور اضافی وجود دارد که می توانید به وردپرس اضافه کنید.

به عنوان مثال ، شما گالری تصاویر متحرک ، تصاویر جعبه سبک ، تصاویر مقایسه ، پوشش متن و موارد دیگر دارید.

جلوه انیمیشن تصویر

برای افزودن جلوه های شناور مانند اینها ، استفاده از Image Hover Effects Ultimate پلاگین

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

اولین کاری که باید انجام دهید نصب و فعال سازی Image Hover Effects Ultimate پلاگین برای جزئیات بیشتر ، به راهنمای گام به گام ما مراجعه کنید نحوه نصب افزونه وردپرس.

پس از نصب و فعال سازی افزونه ، باید روی “Image Hover” در مدیر وردپرس خود کلیک کنید. با این کار هشت افکت مختلف شناور تصویر ایجاد می شود.

اثر شناور تصویر را انتخاب کنید

برای این آموزش ، ما از جلوه “عنوان” استفاده خواهیم کرد. این متن متحرک را بر روی تصویر شما در یک موشواره اضافه می کند.

ابتدا بر روی کادر ‘Caption Effects’ کلیک کنید. با این کار منویی از گزینه های مختلف انیمیشن برای انتخاب از بین آنها ظاهر می شود.

تصویر متحرک شناور ایجاد سبک

وقتی جلوه تصویری را که دوست دارید پیدا کردید ، روی “ایجاد سبک” کلیک کنید.

در کادر بازشو ، اثر شناور خود را نامگذاری کرده و طرح را انتخاب کنید. شماره چیدمانی که انتخاب می کنید با توالی مرتب تصاویر مطابقت دارد.

فراموش نکنید که روی “ذخیره” کلیک کنید.

شناور تصویر جدید را نامگذاری کنید

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

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

تنظیمات انیمیشن را شناور کنید

اگر تغییراتی ایجاد کنید ، مشاهده می شوید که در کادر “پیش نمایش” ظاهر می شوند.

برای تغییر تصویر پیش فرض ، روی تصویر بروید و گزینه “ویرایش” را کلیک کنید.

ویرایش انیمیشن شناور

در این پنجره می توانید عنوان و توصیف خود را که در حالت شناور نشان داده می شود تغییر دهید.

برای بارگذاری تصویر خود ، روی کادر زیر عنوان “Image” کلیک کنید و تصویری را از کتابخانه رسانه خود بارگذاری یا انتخاب کنید.

تغییر تصویر شناور تصویر

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

پس از پایان کار ، روی “ارسال” کلیک کنید.

تصویر کوتاه شناور

برای افزودن تصویر به وب سایت خود ، کد کوتاه را در کادر “کد کوتاه” کپی کنید.

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

جایگذاری کد کوتاه انیمیشن شناور

اطمینان حاصل کنید که روی “انتشار” یا “به روز رسانی” کلیک کنید تا تغییرات خود را ذخیره کنید و تصویر را به حالت زنده در آورید.

4. افزودن جلوه های بازشو Image Hover در وردپرس

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

اگر بخواهید افکت شناور تصویری دیگری را که توسط افزونه های بالا پوشش داده نشده است ، اضافه کنید؟

بهترین راه برای انجام این کار با a است CSS سفارشی وردپرس پلاگین این به شما امکان می دهد بدون نیاز به ویرایش هیچ کدی ، تصاویر خود را بصری تغییر دهید.

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

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

جلوه های شناور CSS

انواع افکت های CSS داخلی به طور خاص برای تصاویر وجود دارد.

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

پس از نصب افزونه ، باید روی دکمه “ادامه به فعال سازی محصول” کلیک کنید.

CSS Hero را فعال کنید

این به شما در روند فعال سازی پلاگین راهنمایی می کند.

پس از فعال شدن افزونه می توانید تصاویر خود را شخصی سازی کنید.

صفحه یا پستی را باز کنید که دارای تصویر یا تصاویری است که می خواهید آن را متحرک کنید و “CSS Hero” را در بالای صفحه کلیک کنید.

با این کار منوی ویرایشگر باز می شود ، جایی که می توانید انواع جلوه های مختلف CSS را اضافه کنید.

ما در حال قرار دادن یک پنجره بازشو در مورد اثر شناور هستیم. ابتدا باید روی تصویری که می خواهید ویرایش کنید کلیک کنید ، سپس روی “Snippets” کلیک کنید.

پس از آن ، روی “Hover Effects” کلیک کنید.

جلوه های شناور CSS Hero

با این کار منویی از جلوه های مختلف CSS ظاهر می شود. در مرحله بعدی ، جلوه “.hvr-pop” را انتخاب کرده و روی “اعمال” کلیک کنید.

روی «ذخیره و انتشار» کلیک کنید و جلوه CSS به طور خودکار بر روی تصاویر شما اعمال می شود.

تغییرات شناور تصویر را ذخیره کنید

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

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

پست نحوه افزودن جلوه های شناور تصویر در وردپرس (مرحله به مرحله) اولین بار در ظاهر شد WPBeginner.



[ad_2]

منبع محتوا

2 پاسخ

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای درخواست مشاوره رایگان، از ساعت 8 الی 22 تماس بگیرید.

09338752044