Join 100,000+ using Modula to power their WordPress galleries.
How to make your photo gallery mobile responsive
According to Global Digital Overview, the number of mobile phone users grew in the past twelve months by 93 million. There are 5,22 billion unique mobile phone users around the world. With this in mind, every website should take really seriously into consideration to make images mobile responsive.
Under those circumstances, your galleries must become mobile responsive photo galleries too, but how? Read this article to find out how to optimize WordPress galleries for mobile. You can do that even if you are a beginner because there is no need for programming.
In this article, you will find out:
- What plugin should you use to make mobile responsive images;
- How to create a mobile image gallery in WordPress;
- More customization to showcase your galleries;
- And much more.
Table of contents
Why use Modula?
We live in an era where the focus is on the client. For this reason, start focusing on your clients by using a user-friendly plugin to design galleries and albums for the delights of your visitors. It is not only about being easy to use, but it is also a fully mobile responsive plugin. So, you don’t have to worry about creating a mobile responsive gallery or turning the existing ones into mobile responsive galleries.
There are many features at your disposal. To enumerate, Modula offers you four different grid types (creative, custom, masonry, slider), video extension, and many gallery features like hover effects, filterable galleries, and image loading effects. You can even password protect your galleries, add watermark and social sharing buttons, create albums, give user roles, and so much more.
In a word, Modula comes with a full package for you and covers your needs with no coding requirements.
How to create a mobile responsive photo gallery in WordPress?
Because it is so easy to use, creating a gallery in WordPress with Modula will take only a few minutes. You need to install and activate Modula to create a mobile responsive gallery.
Install and activate Modula
Now, I will show you how to install and activate this WordPress plugin. First, go to your WordPress Dashboard, and look for Plugins. Then, click on Add New.
Next, type Modula and when you find it, click on Install Now.
To activate it, you need to click on the Activate button when the installation is done. Modula will appear in the WordPress menu on the left.
Create an image gallery
Every time you want to create a gallery using this plugin, go to Modula > Galleries > Add New.
After that, you can give your gallery a name, Animals, for example, and add your images using the Upload image files button.
This is how my gallery looks like, so far.
Make your gallery mobile responsive
From the very beginning, I want to let you know that the responsive feature applies only to Custom Grid and Slider gallery types. For my gallery, I choose the Slider grid type. To select your gallery type, go to Settings > General > Gallery Type and choose from Custom Grid and Slider.
Now, you need to go to Responsive > Custom responsiveness and enable it. This way, your slider will become mobile responsive.
As you could see, there are a few settings like how many slides to scroll on tablet/mobile and how many slides to show on tablet/mobile. I set the slides to one for mobile and two for tablet. Of course, you can set to how much you want depending on your images, but usually set to one keeps the page cleaner.
More customization for your gallery
Even if we set our gallery as mobile responsive, all the remaining features are still available to style our gallery. The responsive feature is just another one with many others. The only thing it changes is the fact that your gallery will become responsive. I want to share with you some of them that apply to both custom grid and slider gallery types.
You can start with editing your images. So, go to your pictures and click on the Edit icon.
Start with changing their names and adding alt text, which is very important for SEO.
There is another feature that allows you to edit the EXIF metadata. Edit each image’s date, focal length, lens, etc. In the end, do not forget to save your changes for each image. Click on Save & Close. You can repeat these steps for each image from your gallery.
Moreover, you can design your gallery by adding borders to your images. Set the border size, radius, and color, and then select shadow size and color in the Style section.
Once you’ve finished, don’t forget to save your gallery.
Modula will generate a shortcode for your mobile responsive gallery. All you have to do now is copy and paste your gallery link into a page or post.
Final thoughts – Mobile responsive gallery
Finally, this is how you do it! Creating mobile responsive galleries isn’t such a brain surgery. It is an easy process that everyone can achieve.
Don’t hesitate and try Modula! Give your website visitors the most enjoyable experience with your galleries.
