Do you want to add an Amazon-like magnifying zoom to WordPress images?
Magnified images allow users to see details that they won't see in a full-size image. In this tutorial, we'll show you how to easily add a magnifying zoom to images in WordPress.
But before, if you have never installed WordPress discover How to install a WordPress blog in 7 steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
Add magnifying zoom on WordPress images
The first thing to do is to install and activate the plugin WP Image Zoom. For more details, see our step-by-step guide to way to install a WordPress plugin.
After activation, you must visit the page WP Image Zoom in your dashboard. From here you can manage the zoom settings of your images.
In the tab General Settings, you can enable features like zooming on WooCommerce product images, thumbnails, mobile devices, attachment pages, category pages, etc.
It also allows you to delete the viewer, so your users can zoom in on the images smoothly.
If you don't remove the viewer for images, you can scroll down for other settings, like enabling zoom in a viewer.
Note: You can see the supported viewers to make sure the zoom is working properly in a viewer.
Once you are done adjusting the settings on this page, don't forget to click the button Save Changes.
Then you need to visit the tab Zoon Settings. It has 4 easy steps to add a magnifying zoom for your images.
Discover also the 10 WordPress plugins from WooCommerce to visually customize your products
First of all, you need to select the lens shape to enlarge the images. You can choose between circle, square, and zoom window shapes.
After choosing your lens, go to the next step and preview an image with the lens selected to see how it works. The plugin has a preview that you can use to test your changes.
Learn as well How to control the stock of your WooCommerce online store
You can go back and preview this image after making changes to the configuration below.
Discover also our 10 WordPress plugins to optimize the zoom on the images of your website
In the next step, you can select the type of slider, set the animation acceleration effect, activate the zoom on mouse over or mouse click and set a zoom level. Some of these features are only available for the pro version of the plugin.
Now you can go to the tab Lens for parameters like lens size, lens color, lens border options, and more. These settings are effective only if you selected the circle or square lens enabled in step 1.
Then you can visit the configuration tab of the Zoom window . This tab is enabled only if you have selected the option " Lens« Zoom window activated in step 1.
From here you can change the width and height of the zoom window, positioning, distance from the main image, borders, etc.
Finally, you can add custom text to the image and choose the text size, color, and alignment.
Don't forget to click on the button Save Changes to save your settings. You can always watch the preview to see how the magnifying glass will work on your blog images with these settings.
The settings above allow you to zoom in your WooCommerce product images.
Consult How to convince a customer and sell his products on the internet and improve your sales
To activate the zoom of your images on publications and WordPress pages, you must follow the steps below.
Enabling magnifying zoom on images of publications and pages
By default, magnifying zoom is not enabled on the images of your posts and pages. You have to do this manually after adding an image to your content.
Make your blog popular by discovering How to add share buttons to WordPress
Once you've added the image to your post or page, just click on it to select it, then click the maximized icon in the toolbar. This icon applies the zoom settings to your image.
Next, head over to the post to see the magnified zoom feature enabled for the selected image. You need to repeat this step every time you want to add the zoom effect to an image.
We recommend that you use high quality images for the zoom function to be perfect. High quality images are generally larger in file size and take longer to load, which will affect your website speed and performance. To resolve this problem, you need to optimize your images for the web before uploading them to WordPress.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Sabai Discuss plugin for WordPress
Sabai Discuss is a WordPress Plugin which allows you to set up a question and answer system on your blog or website.
It allows users to ask and answer questions among themselves; as do Stack Overflow Or YAhoo Answers.
Sabai Discuss is the perfect tool not only for designing a community Q&A website, but also for creating a discussion board, knowledge base, or even support portal on WordPress.
Download | Demo | Web hosting
2. Legalize
Legalize is a WordPress Plugin which allows you to easily add a privacy policy and terms of service to your blog or website.
And There you go ! You have your privacy policy and terms of use. The pages generated by this WordPress Plugin are fully configurable. You can also integrate shortcodes in your website, in order to easily add links to newly generated pages.
In addition, when you modify your website, you can update your answers in the questionnaire and republish your new terms. The plugin is fully reusable and reconfigurable.
Download | Demo | Web hosting
3. CSV and XML Import
CSV and XML Import is a WordPress plugin that allows you to create and update your website quickly and easily, allowing it to import data from files in CSV or XML formats.
This plugin imports / exports large files without the need to change the php.ini. It can import posts, pages, custom post types, loaded custom fields, comments, categories, users, images, media, and other options to WordPress.
In addition, CSV and XML Import works seamlessly with any WordPress theme or plugin, and what's more, it's multilingual.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to create a multi-author blog and allow your readers to post articles on your blog
- How to present and share PDFs on WordPress?
- How to fix connectivity error on WordPress
- How to put your WordPress website in Maintenance mode
Conclusion
Here ! That's it for this tutorial. We hope it has helped you learn how to add magnifying zoom to images in WordPress. Do not hesitate to share with your friends on your favorite social networks.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.
If you have suggestions or remarks, leave them in our section Comments.
...
