In the dim and distant past of web building… like a few years ago… building a clickable image grid was only possible for the learned few who knew how to write computer code. Now, thanks to the WordPress Block Editor, this feature is accessible to anybody, including you, with a little time and training.
Side note on training: Consider watching our webinar on using the Block Editor for a live walkthrough.
Why build image grids for your website? Because they’re a blissful combination of beauty and function. The beauty of images, which woo readers’ attention, is combined with the practical nature of a glossary, table of contents, or list of titles. It’s a versatile tool, appropriate for displaying sermon series, bookstore categories, campus locations, ministry opportunities, and much more. It’s a visual sampling, a platter of hors d’oeuvres for your website guests.
So if you’re looking for a beginner-friendly how-to on building a clickable image grid, this is it.
Let’s begin
Perhaps you’ve played around with the Block Editor before and know the general layout. In case you haven’t, here’s a quick overview of the tools you’ll see when you begin…
- Add a new block to the page… such as a paragraph, image, button, quote, and more
- Menu, showing you the blocks at your disposal
- Gear, controlling the settings of whichever block you have selected
- Toggle between page-level settings and block-level settings.
- This is an individual block… click on it for a block-specific menu.
- Preview your work before publishing.
Got it? Good.
To build your clickable image grid, begin by creating a new page… go ahead and give it a title. We’re using Image Grid Demo 2 here. Then find the “plus” symbol off to the side, and add a column block.
Select the number of columns you want. (Editing column width is a little more complicated; you can actually put a columns block in another columns block. The webinar gives more details on doing this.)
Each column is its own space. Since we’re building an image grid, we’ll put an image block in each column. In each block, you can add images from your media library, or upload the images at this time. Good images are crucial — their quality dictates the quality of your clickable image grid.
Once your suitable and excellent images are uploaded, SAVE YOUR DRAFT and preview your work. (Buttons for both actions are in the top right corner of your screen.)
You might see a problem… Depending on your theme’s settings, a sidebar may appear where no sidebar ought to be. Like this:
If you want a sidebar, feel free to leave it. If you don’t, click on the top right gear and open the settings. Each theme’s settings may be slightly different. In the Astra theme, as in this example, you can scroll down to Sidebar Settings and set it to No Sidebar.
Change it, save it, and preview your draft again… and the sidebar should be gone.
To begin another row, just duplicate the existing one, then edit the images like you did for the first one.
Your pictures may look uneven if they’re different sizes. No worries, you can edit their presentation size quite easily.
To do this, click the image… then the Crop tool… then the Aspect Ratio tool. With Aspect Ratio, you’re not left eyeballing your crop job, but can guarantee uniform size for the row. We recommend the 16:9 or 16:10 ratio for a pleasing shape. It’s a common size for computer screens. Remember to click Apply once you’ve made your changes.
Adding Links
And now for the clickable part!
Select your image. Click on the link button. You can add the URL by searching for content you know already exists on your site, or by copy and pasting the link from another source.
Enter the link, save your draft, and preview it… and your clickable images will take you where you wanted to go. Yahoo!
You may want to add buttons below each block. Both the button and the image can be clickable.
Select your image, click the plus sign below it, and add a Button block. Type your desired text into the button. Add the link the same way as for the image.
To center the button below the image, click the list icon at the top of the page and select Buttons. Then you can choose to Justify Center.
And that’s it! We didn’t get into everything, of course, but by following this tutorial, you’re well on your way to building your own clickable image grid. For a more detailed walkthrough, check out our webinar. Happy web crafting!
