A tiled gallery in WordPress is a fantastic way to display your portfolio on your artist website. Whether you’re a digital artist, photographer, or other visual creator, you’ve surely been wondering about the best photo gallery plugin for WordPress. Well, here’s the answer: The WordPress gallery widget that comes with Elementor Pro is a powerful tool to create advanced galleries. With all its other features, Elementor Pro is way more than a simple WordPress gallery plugin. Let’s see why!
In this tutorial, we’re going to focus on the Elementor Pro Gallery Widget, and I’ll show you step-by-step how to create a tiled gallery in WordPress.
These are the basic 6 steps you’ll need to follow in order to create a tiled gallery in WordPress:
Here’s how easy it is to create a tiled gallery in #WordPress!
Is the Elementor Pro Gallery Widget the best photo gallery plugin for WordPress?
Well, when I was creating this WordPress site for my art, one question I’ve asked myself more than once was, “What is the best photo gallery plugin for WordPress?”
I’ve looked around a lot and probably scoped out each and every WordPress gallery plugin out there because….. hey, if you’re an artist, you want to display your works in the absolutely best way possible, right?
As I’ve been building my site with Elementor, I’ve come across its Pro Gallery Widget. And believe me, this WordPress gallery widget is really SOMETHING!
The Pro Gallery Widget supports three different gallery layouts: a simple WordPress image grid, the Pinterest-style masonry layout, and a tiled gallery.
Dig a WordPress Image Grid Gallery or a Masonry Gallery?
You can create single galleries or multiple filterable galleries. For each one, there’s a whole bunch of customization options to style your gallery in your unique way and exactly to your liking. You have CSS filters, hover animations for both images and title content, borders, spacings, background overlays,… You name it.
With the Pro Gallery Widget, you can create a WordPress tiled gallery without Jetpack.
Plus, you’ll automatically get a Lightbox gallery in WordPress without having to lift a finger. When users click through your lightbox full size images, they’ll find social sharing options and a download button right at the top. Everything is all-in.
Built-in lazy loading makes large image galleries load gradually without slowing down your website.
I’ve used Elementor to build virtually EVERYTHING that you see on this website. Posts, pages, and portfolio items. All my art galleries have been created using the Pro Gallery Widget.
The thing I like the most about Elementor Pro is that it comes with all these other widgets you can use to build your site. When you buy a mere WordPress gallery plugin, you pay for just the gallery functionality.
Whereas when you purchase Elementor Pro, you get a whole lot of extra features in addition to the gallery widget. For basically the same price.
To learn more, check out my → Elementor Review for Visual Creators.
Create a tiled gallery with Elementor
Let’s get started with our tiled gallery in WordPress!
In this tutorial, I’ll show you step-by-step how you can create a tiled gallery in WordPress using the Pro Gallery Widget.
We’ll look at how to enhance your tiled gallery with CSS filters and hover animations for images and content. You’ll see you how you can make your tiled gallery full width, so visitors can view your art without any distracting sidebar.
By the time you have finished reading, you’ll be perfectly able to create your own tiled gallery in WordPress and fully customize it to your personal liking! All you’ll need to do is insert the gallery in WordPress and you’re good to go!
So let’s jump in!
How to create a tiled gallery in WordPress – Step-by-Step
STEP 1: Install & Activate Elementor Pro
First off, you’ll need to install and activate the Elementor Pro plugin.
Next, create a new post (post, page, portfolio item) where you want to put your gallery.
In case you want to make your tiled gallery full width, you can do that now. Set the Content Layout to Full Width, and also select Elementor Full Width from the Template drop-down under Page Attributes.
This will display your gallery over the full width of the page, without the default sidebar.
Once you’re done setting up your post layout, go ahead and click Edit with Elementor.
STEP 2: Drag & drop the gallery widget onto the canvas
Once you’re on the Elementor editing interface, select the Pro Gallery Widget from the sidebar. If you cannot immediately find it in the menu, just type ‘gallery’ into the search field.
Then simply grab the widget and drag and drop it onto the canvas.
Once the widget is dropped, its editing options will automatically open up in the Elementor sidebar.
STEP 3: Select tiled gallery layout & adjust gallery settings
Selecting the tiled gallery layout
Before anything else, you want to create a tiled gallery layout. In the Settings menu, go to Layout and select Justified.
Next, you’ll have to decide whether you want to have a single gallery, or multiple filterable galleries. Choose Multiple, if you want to showcase artworks of different categories.
For this example, I’ll go with a Single Gallery. If you’re looking to create multiple galleries, this tutorial will show you exactly how to do it!
After that, you want to upload images to your gallery. Click on the little + icon that you see in the box under ‘No Images Selected’. You can either pick images from your Media Library or upload new ones from your computer.
In the Edit Gallery window, you can add more images by clicking on Add to Gallery. If you want to remove an image, click on the little X in the top right corner. To change the order of your images, you can either use ‘Reverse order’, or drag and drop the pictures to where you want to have them.
Once your happy with the result, hit Insert gallery.
Adjusting the settings of the tiled gallery
As you’ve selected the tiled gallery option at the very beginning, all your pictures will now show in exactly that tiled layout, with the same height and different widths.
To change the number of columns, increase or decrease the Row Height.
Once you upped the row height, you’ll notice that the images start looking blurry. To fix that, tweak the Image Size to what looks best with your particular settings.
Use the Spacing slider to increase or decrease the gap between the images.
You can choose to display your images in the default order you set in the Edit gallery window, or by Random.
I feel Random is a nice and versatile way to showcase artworks. So I’ll go ahead and select that for this example.
I recommend leaving Lazy Load switched on, as this will load the gallery images gradually and thus optimize loading times of your site.
To create a Lightbox gallery in WordPress, simply leave the default Link set to Media File. When viewers click on one of the preview images, they’ll see the full version displayed on top of the content.
Let’s move on to the Overlay drop-down. Under Title and Description, you can select the image attributes you want to appear on hover. You can also switch off the hover background. Just hover the mouse over the gallery to see how everything plays out.
STEP 4: Customize the look of the gallery images
The Style tab provides you with everything you need to customize the look and feel of your gallery images – down to the last detail! There are tons of options and combinations to choose from to create a tiled gallery in WordPress in your very unique way.
Let’s check them out.
In the Image drop-down, you can set a border, border color and width. There are also CSS filters that you can apply to your images. Play around with the settings to get familiar with everything.
I’m going to increase the border radius by just a few pixels to round off the image corners.
In the Hover tab, you can set CSS filters, a different border color and border radius when hovering over the images.
STEP 5: Choose hover animations & title display settings
Hover animation & duration
Hover Animation allows you to set a cool image effect when hovering the mouse over the image. You can choose between six options. Animation Duration controls how long the hover animation will last. A thousand milliseconds (1000 ms) will make it last exactly one second.
For this example, I’ll pick ‘Move Left’ as a hover animation and set the duration to 1300 ms.
Background overlay
With that done, let’s start styling the background overlay in the Overlay drop-down settings. You can choose a single color or a two-color gradient for the background overlay. You can select a Blend Mode, and again a hover animation and duration. In the Hover tab, you can customize the background overlay even more.
Experiment a bit with all the settings to find out what you like best!
I personally like hover effects that somewhat complement each other. So, as I’ve set the image hover animation to ‘Move Left’, I’ll go ahead and select ‘Slide In Left’ for the overlay hover animation.
Title & Description
Last but not least, let’s move on to the Content options. Here, you can customize everything that is to do with image title and description.
You can set the vertical and horizontal alignment, padding, color, typography, and spacing. You can even choose a hover animation for the content settings!
The sky’s the limit – the #Elementor #ProGalleryWidget offers tons of options to make your tiled gallery customizable down to the last detail!
If you leave Sequenced Animation on, both background overlay and text will enter gradually.
Quick tip: Make sure to check what your gallery looks like on different devices. Depending on the settings you chose, title and description can look a bit awkward in tablet and mobile mode. Unfortunately, these glitches cannot always be fixed at this point of time. If you can’t make things look good in your tiled WordPress gallery right now, consider creating a masonry gallery instead. You won’t be having any problems there!
And here we are. This is all there was to creating a tiled gallery in WordPress!
STEP 6: Click Publish to Insert the gallery in WordPress
To get everything up and running, the final thing you need to do is insert the gallery in WordPress.
Nothing easier than that: Just hit Publish and you’re good to go!
This is the Tiled Gallery we've just created. Feel free to click in and have a look around!
Tiled Gallery created with Elementor Pro. All images from my Monochrome Collection.
Frequently Asked Question
What is a Lightbox Gallery in WordPress?
When you install a WordPress gallery plugin that comes with a lightbox, clicking one of the thumbnails in the grid will display the full size image on top of the content.
A lightbox can also be used with a single image.
Each lightbox plugin works a bit differently in terms of how full images, image titles, navigation, etc. display.
Many gallery plugins also offer social sharing and download options within the lightbox.
Learn more about WordPress
I hope this tutorial helps you create your own tiled gallery in WordPress. If you enjoyed the tutorial, please consider sharing with others! Let me know in the comments what you’d like to see a tutorial about next. Angie 💕
This article is as wonderful as your others : D Thank you for posting!
Thank you very much, Abadi. Glad you find it helpful (: