نحوه افزودن جلوه های شناور تصویر در وردپرس - آیا می خواهید یاد بگیرید که چگونه جلوه های شناور تصویر را در وردپرس اضافه کنید؟
جلوه های شناور تصویر می تواند باعث تعامل و جذابیت بیشتر سایت شما شود. با این کار اولین برداشت بهتری ایجاد می شود و زمان صرف شده در سایت شما بهبود می یابد.
در این مقاله ، مرحله به مرحله نحوه افزودن افکت های شناور تصویر در وردپرس را به شما نشان خواهیم داد.
جلوه های شناور تصویر چیست؟
جلوه های شناور تصویر به شما امکان می دهد عناصر تعاملی را به تصاویر ثابت خود مانند انیمیشن ها ، جلوه بزرگنمایی ، پنجره بازشو و موارد دیگر اضافه کنید.
به عنوان مثال ، شما می توانید تصاویری داشته باشید که برای آشکار کردن قیمت شما یا پیوند به نمونه کارها ، تلنگر می زند.
همچنین شناورهای تصویر راهی خلاقانه برای نمایش عکس ها ، گالری ها و عکس های کوچک به شما می دهد.
تصاویر تعاملی و عناصر شناور از بسیاری جهات می توانند به سایت شما کمک کنند:
- زمانی را که بازدید کنندگان در سایت شما می گذرانند بهبود ببخشید
- روش های خلاقانه ای برای ارائه محتوا به بازدیدکنندگان خود ارائه دهید
- به کاربران خود اطلاع دهید که یک عنصر سایت قابل کلیک است
چگونه جلوه های شناور تصویر را در وردپرس ایجاد کنیم
بهترین روش برای افزودن افکت های شناور تصویر به وب سایت وردپرس خود استفاده از یک افزونه وردپرس است.
با استفاده از یک پلاگین ، نیازی به صرف ویرایش ، قالب بندی و افزودن CSS برای ایجاد جلوه های تصویری نیست. فقط کار میکنه
انواع افزونه هایی وجود دارد که می توانید برای ایجاد جلوه ها و انیمیشن های منحصر به فرد شناور تصویر استفاده کنید.
در این آموزش ، ما چهار روش مختلف برای افزودن جلوه های شناور مورد نیاز را به شما نشان خواهیم داد.
1. افزودن جلوه های Flipbox شناور تصویر در وردپرس
فلیپ جعبه جعبه ای است که وقتی موشواره روی آن قرار می گیرد ، ورق می زند.
می توانید این انیمیشن را به تصاویر خود اضافه کنید تا متن آشکار شود یا حتی تصویر را در حالت شناور تغییر دهید.
می توانید نحوه تلنگر تصویر ، همراه با طراحی تصویر در دو طرف را کنترل کنید.
اگر عکاس هستید ، می توانید از این کار برای به نمایش گذاشتن کارهای خود و جدا کردن نمونه کارهای خود استفاده کنید.
ساده ترین راه برای اضافه کردن جلوه های تصویر flipbox با پلاگین وردپرس است. یک افزونه به شما امکان می دهد این جلوه ها را به سرعت ایجاد و شخصی سازی کنید.
توصیه می کنیم از
افزونه Flipbox - Awesomes Flip Boxes Image Overlay استفاده کنید. این بهترین افزونه flipbox و hover image برای وردپرس است.
این افزونه به شما امکان می دهد به سادگی جلوه های سفارشی flipbox را به تصاویر وردپرس خود اضافه کنید.
همراه با ده ها جلوه مختلف انیمیشن و قالب از پیش ساخته شده. حتی می توانید رنگ ها را کنترل کرده و CSS سفارشی خود را اضافه کنید.
برای جزئیات بیشتر ، به راهنمای ما در مورد نحوه ایجاد پوشش و شناور flipbox در وردپرس مراجعه کنید .
2. افزودن بزرگنمایی تصویر و بزرگنمایی جلوه ها در وردپرس
جلوه های بزرگنمایی تصویر به کاربران شما امکان می دهد جزئیاتی را که نمی توانند در یک تصویر با اندازه معمولی مشاهده کنند ، ببینند.
این یک اثر عالی برای آموزش محصولات و تصاویر با جزئیات بالا است.
همچنین می توانید از آن در فروشگاه آنلاین خود برای افزودن جلوه بزرگنمایی مانند آمازون استفاده کنید.
ساده ترین راه برای افزودن بزرگنمایی تصویر و بزرگنمایی جلوه ها به تصاویر ، استفاده از افزونه وردپرس است.
توصیه می کنیم از افزونه
WP Image Zoom استفاده کنید. این افزونه به شما امکان می دهد به سادگی بزرگنمایی و بزرگنمایی جلوه ها را به تصاویر خود اضافه کنید.
همچنین به ویژگی هایی مجهز است که به شما امکان می دهد شکل لنز زوم ، سطح بزرگنمایی و موارد دیگر را انتخاب کنید.
برای جزئیات بیشتر ، به راهنمای ما در مورد نحوه افزودن بزرگنمایی بزرگنمایی تصاویر در وردپرس مراجعه کنید .
3. افزودن جلوه های متحرک تصویر در وردپرس
انواع افکت های شناور اضافی وجود دارد که می توانید به وردپرس اضافه کنید.
به عنوان مثال ، شما گالری تصاویر متحرک ، تصاویر جعبه سبک ، تصاویر مقایسه ، پوشش متن و موارد دیگر دارید.
برای افزودن جلوه های شناور مانند این موارد ، توصیه می کنیم از پلاگین
Image Hover Effects Ultimate استفاده کنید.
این افزونه بسیار سبک وزن است ، بنابراین تاثیری در عملکرد وب سایت و سرعت بارگذاری شما نخواهد داشت . همچنین استفاده از آن بسیار آسان است. با چند کلیک می توانید جلوه های تصویری بی نظیری را اضافه کنید.
اولین کاری که باید انجام دهید نصب و فعال سازی افزونه
Image Hover Effects Ultimate است. برای اطلاعات بیشتر ، به راهنمای گام به گام نحوه نصب افزونه وردپرس مراجعه کنید .
پس از نصب و فعال سازی افزونه ، باید روی "Image Hover" در مدیر وردپرس خود کلیک کنید. با این کار هشت افکت مختلف شناور تصویر ایجاد می شود.
برای این آموزش ، ما از جلوه "عنوان" استفاده خواهیم کرد. این متن متحرک را بر روی تصویر شما در یک موشواره اضافه می کند.
ابتدا بر روی کادر 'Caption Effects' کلیک کنید. با این کار منویی از گزینه های مختلف انیمیشن برای انتخاب از بین آنها ظاهر می شود.
وقتی جلوه تصویری را که دوست دارید پیدا کردید ، روی "ایجاد سبک" کلیک کنید.
در کادر بازشو ، اثر شناور خود را نامگذاری کرده و طرح را انتخاب کنید. شماره چیدمانی که انتخاب می کنید با توالی مرتب تصاویر مطابقت دارد.
فراموش نکنید که روی "ذخیره" کلیک کنید.
در صفحه بعد ، گزینه های مختلفی برای سفارشی کردن اثر شناور خود دارید.
با این حال ، گزینه های پیش فرض انیمیشن را ترک خواهیم کرد.
اگر تغییراتی ایجاد کنید ، مشاهده می شوید که در کادر "پیش نمایش" ظاهر می شوند.
برای تغییر تصویر پیش فرض ، روی تصویر بروید و گزینه "ویرایش" را کلیک کنید.
در این پنجره می توانید عنوان و توصیف خود را که در حالت شناور نشان داده می شود تغییر دهید.
برای بارگذاری تصویر خود ، روی کادر زیر عنوان "Image" کلیک کنید و تصویری را از کتابخانه رسانه خود بارگذاری یا انتخاب کنید.
اگر می خواهید تصویر شما کاربران را به صفحه دیگری در وب سایت شما برساند ، می توانید پیوند و متن دکمه ای را نیز اضافه کنید.
پس از پایان کار ، روی "ارسال" کلیک کنید.
برای افزودن تصویر به وب سایت خود ، کد کوتاه را در کادر "کد کوتاه" کپی کنید.
سپس ، هر صفحه ، پست یا ویجتی را که می خواهید تصویر شما در آن ظاهر شود باز کنید و کد کوتاه را جایگذاری کنید.
اطمینان حاصل کنید که روی "انتشار" یا "به روز رسانی" کلیک کنید تا تغییرات خود را ذخیره کنید و تصویر را به حالت زنده در آورید.
افزونه های بالا به شما کمک می کنند ویژگی هایی مانند تلنگر جعبه ، جلوه های شناور ، انیمیشن و موارد دیگر را اضافه کنید.
اگر بخواهید افکت شناور تصویری دیگری را که توسط افزونه های بالا پوشش داده نشده است ، اضافه کنید؟
بهترین راه برای این کار داشتن یک افزونه CSS سفارشی وردپرس است. این به شما امکان می دهد بدون نیاز به ویرایش هیچ کدی ، تصاویر خود را بصری تغییر دهید.
شما می توانید فایل های CSS خود را به صورت دستی ویرایش کنید یا از طریق سفارشی سازی وردپرس CSS را اضافه کنید ، با این حال ، ساده ترین گزینه استفاده از پلاگین است.
توصیه می کنیم از افزونه CSS Hero استفاده کنید. این افزونه به شما امکان می دهد بدون نوشتن یک خط کد ، تقریباً هر سبک CSS را در سایت وردپرسی خود ویرایش کنید.
انواع افکت های CSS داخلی به طور خاص برای تصاویر وجود دارد.
برای اطلاعات بیشتر در مورد نصب یک افزونه ، به راهنمای ما در مورد نحوه نصب یک افزونه وردپرس مراجعه کنید .
پس از نصب افزونه ، باید روی دکمه "ادامه به فعال سازی محصول" کلیک کنید.
این به شما در روند فعال سازی پلاگین راهنمایی می کند.
پس از فعال شدن افزونه می توانید تصاویر خود را شخصی سازی کنید.
صفحه یا پستی را باز کنید که دارای تصویر یا تصاویری است که می خواهید آن را متحرک کنید و " CSS Hero " را در بالای صفحه کلیک کنید.
با این کار منوی ویرایشگر باز می شود ، جایی که می توانید انواع جلوه های مختلف CSS را اضافه کنید.
ما در حال قرار دادن یک پنجره بازشو در مورد اثر شناور هستیم. ابتدا باید روی تصویری که می خواهید ویرایش کنید کلیک کنید ، سپس روی "Snippets" کلیک کنید.
پس از آن ، روی "Hover Effects" کلیک کنید.
با این کار منویی از جلوه های مختلف CSS ظاهر می شود. در مرحله بعدی ، جلوه ".hvr-pop" را انتخاب کرده و روی "اعمال" کلیک کنید.
روی «ذخیره و انتشار» کلیک کنید و جلوه CSS به طور خودکار بر روی تصاویر شما اعمال می شود.
امیدواریم این مقاله به شما کمک کند یاد بگیرید چگونه می توانید جلوه های شناور تصویر را در وردپرس اضافه کنید.
اگر این مقاله را دوست داشتید ، لطفاً برای آموزش های بیشتر به
بانک مقالات وردپرس مراجعه فرمایید.
