How to Create Image Collages in WordPress
The Easy Image Collage plugin for WordPress allows you to create image collages within your WordPress site and use them everywhere, either on a post, page, or custom post type.
The plugin is compatible with both the Classic WP Editor and the Gutenberg Editor. Furthermore, it is possible to embed unlimited collages to any post or page, drag the images to accommodate them within their spot in the collage, and to add a Pinterest button to share the collage.
In this tutorial, we will explain the functioning of this module. Let’s get started!
Step #1. Install the Required Plugin
- Click Plugins > Add new
- Type “Easy Image Collage” in the search box
- Click Install now
- Click Activate
- Click Add new again
- Search for “Lightbox”
- Look for the Simple Lightbox Plugin
- Click Install now
- Click Activate
Step #2. The Easy Image Collage Settings
- Under the Easy Image Collage Plugin, click Settings
The configuration options are arranged into 7 categories, organized through vertical tabs. The categories Captions and Custom links are only available to users of the premium version of the plugin. Let’s take a look at the others one by one.
Default style
You can configure the alignment, width, ratio, and border of the collage grid here. Leave the Display method with the default value of Actual images. The “legacy mode” is there, in case that you want your images to be compliant with older browsers.
- Set the width of the grid to 1000px
- Change the ratio to 1.78
- Decrease the width of the borders to 2px
- Change the color of the border
1.78 is the result of dividing 16 by 9. Therefore 1.78 is just another way of representing the aspect ratio of a widescreen.
Lightbox
- Click the Lightbox vertical tab
- Enable Clickable images
- Leave Open in new tab disabled
Social Media
- Click the Social media vertical tab
- Enable Pinterest on hover
- Change the Button location
- Change the Button style
- Leave the default Button size and Description
Custom Code
The Custom Code section allows you to embed additional CSS code, in case you would have added a CSS class to the Lightbox link in the Lightbox section, for example. However, it is always recommended to keep your styles organized in stylesheet files.
Utility
The Utility section allows you to export/import configuration options in a .json file, and import it in another site.
The code generates when clicking the Export button.
There is also a reset button at the bottom (do not click it), in case you want to restore all configuration options to their default values.
- Click Export
- You can copy this code and paste it into the Import text area of other sites
- Scroll down
- Click Save changes
A green checkmark should appear on the screen.
Step #3. – Create a Post
- Click Posts > Add new
- Add a title
- Click the + symbol to add a block
- Under Layout elements, select Easy Image Collage
- Click Create new Image Collage
- Select the layout of your liking
You will be presented to the layout you selected with grey areas. When hovering on each of these areas, a blue button appears. You can click this button to insert images.
- Add images to the collage by clicking the blue button
You can drag the images to find the best possible angle of them inside the grid areas.
- Click Finish on the top right of the modal window
- Click Publish two times
- Click View post
When hovering over an image, you will see the round Pinterest button on the top right corner of each image.
When clicking, a very basic lightbox behavior will be shown. You can install a more advanced lightbox plugin to achieve more sophisticated results.
The Easy Image Collage plugin for WordPress lets you insert neat image collages into posts and pages of your WordPress site. The plugin can be enhanced through a Lightbox plugin.
Please, leave us your questions and comments below.
Thanks for reading!