Would you like to add an Amazon-like magnifying zoom to your images in WordPress? Being able to zoom in on images allows users to see things that they would not usually see in a normal sized image, whilst also making your website appear more attractive and professional. Customers and visitors alike will appreciate being able to zoom in on the finer details within images and an attractive zoom feature can really help to sell products if you're running an e-commerce store. In this article, we'll show you how to easily add a magnifying zoom for images in WordPress.
Adding A Magnifying Zoom
The first thing you will need to do is install and activate theWP Image Zoomplugin.
Upon activation, you'll need to visit the WP Image Zoompage within your WordPress admin area. From here, you can manage the zoom settings for your images.
In theGeneral Settingstab, you can enable features like zoom onWooCommerceproduct images, thumbnails, mobile devices, attachment pages, category pages, and more. It also allows you to remove the lightbox, so your users can smoothly zoom images.
Once you're done adjusting the settings on this page, don’t forget to click on theSave Changesbutton. Next, you need to visit theZoom Settingstab. Here, it will present you with 4 easy steps to add a magnifying zoom.
The first step is to select the shape of the lens to zoom images. You can choose from a circle, square, and zoom window lens shape.
After choosing your lens, head to the next step and preview an image with the selected lens shape to see how it works. The plugin comes with a preview image that you can use to test your changes.
In the next step, you can select cursor type, animation easing effect, enable the zoom on mouse hover or mouse click, and define a zoom level. It should be noted that some of these features are only available for the pro version of the plugin.
To change settings like lens size, lens colour, lens border options and more, head over to the Lens tab. These settings are only effective if you've selected the circle or square lens in Step 1 however.
Next, you can visit theZoom Window configuration tab. This tab is enabled only if you selected the Zoom Window Lens in Step 1. From here, you can change the width and height of zoom window, positioning, distance from the main image, borders, and more. It's from this tab that you can add things like custom text to your images as well, along with a range of options such as size, colour and alignment.
To finish, make sure you save your changes and don't forget that you can preview your image to see how the magnifier will work!
Turning On The Magnifying Zoom For Images In Pages And Posts
If you wish to enable the magnifying zoom for images within pages or posts then you will have to do it manually once you have inserted an image into the editor.
Simply add an image into the editor and then click on it. Once highlighted, just click on the magnifying zoom icon within the editor toolbar and the zoom will be applied to your image.
Be sure to preview your post to double check that the zoom works, and remember that everytime you add an image, you'll have to click the magnifying zoom icon to apply it!
We hope this article has made the process of applying an attractive and engaging zoom lens to your website's images easy!
Looking for the right web hosting solution for your website can be an intimidating task. Options nowadays are more diversified than ever, and each year brings new developments in the web hosting market. If you have no clue of what to look out for, you can find yourself overwhelmed with...
Content marketing continues to be one of the most valuable tools for today’s online businesses. With content, you can improve your chances of reaching your target audience, boost your search engine standing, and even unlock new opportunities for sales. The more content you produce, the more you can strengthen your...
User Experience (UX) is one of the most crucial factors to consider in web design. As the number of websites and applications in the world today continues to accelerate, businesses are under more pressure than ever to impress customers straight away. If a user visits your website and finds slow-loading...