پرش لینک ها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

flipbox شناور تصویر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پیام بگذارید

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