Here’s something you can’t do in the WordPress Classic Editor – put clickable links on top of images, including in an image gallery.
Discover the endless possibilities of how you can use this unique Gutenberg feature.
Thank You
Thanks so much to Gutenberg Ninja course member Kathleen Rupp of Karupped for sharing this great find.
Text Links on Images
One of the best new features Gutenberg brings to WordPress is the ability to easily add text links on top of images.
While the feature was originally intended for Cover Images and CTAs (Calls to Action), it created a side benefit for image galleries to adopt the feature as well.
Example of a CTA
It’s super simple to create an eye catching CTA in Gutenberg with a background image that has a colored opacity layer over it.
And then adding clickable text and/or a button with your offer as shown below.
Links on Gallery Images
Neither the Classic Editor nor Gutenberg allow images in Galleries to be made clickable.
But, you can include a caption with a link in the Classic Editor, however, you have to enter the raw link code to do it (i.e. a href=).
But, thanks to the overlay feature in Gutenberg, you can place text links directly on images when using the Gallery block.
And, there is an easy link dialogue box to enter the URL, just as you can in a post.
Example of Text Link on Gallery Images
You get the same opacity layer effect on gallery images as you do on cover images, which helps the text link stand out.
The Possibilities are Endless
Another new feature Gutenberg brings to WordPress is Reusable Blocks.
In fact, I think it is the most powerful feature in Gutenberg.
It’s super easy to turn an image gallery into a Reusable block that you can place anywhere on your site and use over and over again.
Top and Related Categories
How would you like a strip of images at the bottom of every post with your top categories?
Or maybe a strip of images for related categories to help move your site visitors through more of your site?
It’s easy to do with a Reusable Gallery block!
(FYI, there are other blocks that can show a strip of images for your latest posts, even filtered by category too. No plugin required.)
Resources Page
A page full of links is boring.
How about using thumbnails in a gallery to draw eye-catching interest to those links?
Seasonal Page
Think Pinterest board cover images. You can make your own gallery of images that link to specific categories and arrange them by season.
This is a fantastic way for DIY, Craft, and Foodie bloggers to show off all the seasonal topics you cover and all in one place.
Products
Of course, product images are a natural fit for a gallery.
DIYers, how about a gallery of the products you affiliate at the end of your posts?
Or a gallery of more posts in that how-to series to see even more of your affiliated products?
And a gallery of your downloadable digital products is a perfect fit for this.
You can use it on a standalone page or slip it into any post, any time by just making it a Reusable block.
What Can You Do with Galleries?
I’m very excited about all the new possibilities Gutenberg brings to the table, especially innovations like text links on images.
This is the kind of real-world tutorial I offer my Gutenberg Ninja course.
It’s the fastest, easiest way to get going with Gutenberg and learn-by-doing with tutorials on things you can actually put to use right away on your site.
Thanks so much for the mention MaAnna! I love this new gallery feature! Finding my way around putting a heavy plugin on the site feels like I just found a great bargain:). !! Thanks again for this fantastic course to become so comfortable playing with Gute!!
You’re welcome, Kathleen. I’m tickled we have a village in our Site Audit Plus group to share neat finds and ideas like this too!!
I can’t wait to implement this feature. In the classic editor it required yet one more plugins. Hello Gute, Goodbye extra plugins!
I think Gute is going to help us get rid of several plugins!!
Can you explain how to find the overlay feature? There is no module with that name, and I can’t see any setting like what you’re showing in the screenshots here inside my photo gallery modules.
Do you mean that you can link the photo caption of the images in the gallery?
Although Gutenberg will run on most any theme, not all of them fully support Gutenberg-only features, such as the overlay on images, or full width images and such.
You’ll want to contact your theme designer about adding that support.
It’s also why I suggest folks clone their site or get a sandbox to take the Gute course to ensure they see all the features and/or to see what they may need a designer to tweak or add tha their theme is missing.