Digital Photography Tips, Tutorials and Resources
Do you want to add more of a margin between the photos of your image gallery? Sometimes you need to adjust the spacing between images to get the best out of your web page’s width and height. In this tutorial, we will share how to add space between images in your WordPress galleries.
By default, WordPress sets the spacing between photos according to the number of columns in the image gallery. You should use Envira Gallery to create image galleries with full control on the space between images in your galleries and many other amazing features.
To add space between images in your WordPress galleries, you’ll need to follow these 4 steps:
- Step 1. Install and activate Envira Gallery plugin in WordPress
- Step 2. Create an image gallery using Envira
- Step 3. Go to config tab & set the space between images
- Step 4. Display the image gallery in WordPress
When this tutorial is completed, you’ll be able to add more spacing between images that will look like as shown in this image below:
Ready to get started? Let’s go!
Step 1: Install and Activate Envira Gallery Plugin in WordPress
First thing that you need to do is to install and activate Envira Gallery plugin on your WordPress site.
If you need to know about installing the plugin, then simply check out this guide on how to install and activate Envira.
Step 2: Create an Image Gallery Using Envira
Upon activating the plugin, you need to go to Envira Gallery » Add New from your WordPress admin backend.
You can add the title in the first field to start with the image gallery.
Next you should add the photos in the Native Envira Gallery section.
To learn more about gallery settings, you should check out this guide on how to create an image gallery with thumbnails in WordPress.
Step 3: Go to Config Tab & Set the Space Between Images
After adding the photos, you need to scroll down to Config tab and look for the Automatic Layout: Margins setting.
By default, the space is set to 1 pixel. You can change it as per your need for the image gallery.
Now you can hit the Publish button from right side of your screen and go ahead to display this image gallery in WordPress.
Step 4: Display the Image Gallery in WordPress
Once published, you’ll see a new Envira Gallery Code widget at the right side of your screen under the Publish widget. Copy the shortcode from here.
Simply go to Pages/Posts » Add New or edit an existing post. In the visual editor, you need to paste the shortcode.
Make sure to Publish the page/post.
You should visit your website to see the image gallery with added spacing that will look like as shown in this image below:
We hope this tutorial has helped you to learn how to add more space between image galleries in WordPress. You may also want to check out our guide on how to create a WordPress image gallery with next and previous buttons & the ultimate WordPress security guide.