Text overlay refers to written content displayed on the surface of your images or videos. It’s mostly used in wedding photo albums or an image gallery.
The overlaying text helps create a professional and aesthetic look and feel for your site photos and galleries. It also lets you link to related pages/products to increase visitors’ time on site.
You may be surprised by how easy it is to set up a WordPress image slider with text on it. Here are 4 different options that will keep you adding text overlay on images on the go.
How to Add Text Overlay on Images in WordPress
WordPress is not equipped with a default feature to insert text overlay to images in the classic editor. Luckily, you have more than one way to achieve that. You can either use image blocks or cover blocks in the WordPress Gutenberg editor. It’s up to you to make use of a plugin to simplify the whole process too.
Method 1: Add Text Overlay Using WordPress Gutenberg Image Block
Gutenberg provides you with an image block to insert images to your page or post content. Unlike the classic editor, there are a lot of customization options to style your media, including displaying overlaying text.
Before you read further.... Free Download (PDF)
Secret Side Door
Secret Google Search Tactic That Will Skyrocket Your Sales, Connect You to the Perfect Partners, Influencers & Affiliates and Send Your Google Rankings Soaring! FREE when you sign up for Digital Creators Edge, a free newsletter for Digital Creators who wish to take their business to the next level.
First, open the page or post that you want to have the text overlaying images. Now click on the Plus (+) icon and choose the image block from the list.
Once the image block is ready, upload your images from your computer, select them from the Media Library, or insert their URLs there.
After adding your image, simply hit the “Add text over image” icon at the top of the photo. You’ll then see a line saying “Type / to choose a block” in the left alignment of the image for you to enter your text.
The Block section on your right side gives you a lot of capabilities to style your text and make sure it stands out from the image.
Scroll down to the Opacity level, we recommend changing it from 30% to 60%. Lower or higher these numbers will result in a too bright or too dark image that makes it difficult for users to view your visual content.
You’re able to set a custom color for the text as well as the overlay and change the font size. This is how your photo looks with the overlaying text.
Just a few simple actions and you’re ready to have text overlay on images.
Method 2: Insert Text Overlay with Cover Block
Another solution to display text on images is applying the Cover block to your Gutenberg editor.
You can start by clicking on the Plus icon (+) and adding the Cover block to your page content in the exact same as what you do in the former method.
Next, upload your image from your device or pick one from the Media Library. Then, type the text that will overlay on the image.
You can easily give a new text appearance by changing its color and size in the Color and Typography settings section.
Method 3: Display Text on Gallery Images
The 2 routes above aim to insert text on a single image. In case you’re looking for a solution to add overlaying text to all photos in a gallery, inspect this section and digest the step-by-step guide below.
Gutenberg editor comes with a built-in gallery block to create a basic slider or image gallery on your site. Besides, you also have tons of powerful WordPress gallery plugins to set up gorgeous galleries.
For now, just concentrate on placing text overlaying on image galleries brought by the WordPress default gallery feature.
- Click the Plus (+) button as you always do and choose the Gallery block
- Upload your photos or pick them from the Media Library
- Edit your gallery and add the overlaying text in the Caption box under each image
- Insert the gallery
Method 4: Position Text over Images Using Modula Plugin
Without a doubt, Modula is currently one of the most well-known WordPress gallery and slider plugins, receiving over 100 thousand active installs. Apart from core features such as 42 image hover effects, different slider protection options, and 4 grid types, it’s worth mentioning the plugin’s ability to add an image slider with text animation.
Step 1: Install Modula Plugin
To add a text overlay image slider, you first need to install the plugin for your site. It doesn’t cost anything to get started with Modula since you can download it right from the WordPress repository.
- Log in to your WordPress admin dashboard
- Go to Plugins and click Add New
- Type “Modula” in the keyword box
- Press the Install Now and Activate buttons
That’s it.
Step 2: Add a New Image Gallery
Now head to the Modula section in your admin menu and choose Galleries. Click Add New to create your first gallery.
Give your new gallery a name then hit Upload image files to add photos for that gallery. This is what your gallery looks like once we choose images from the gallery.
Step 3: Customize your WordPress Slider by Adding Text
To display text on your image slider or gallery, you have to choose the right gallery type beforehand. Under Modula, you can go to Settings > General > Gallery Type > Slider.
After that, adjust your gallery with overlaying text by customizing the image size, enabling cropping, editing the gutter, setting the width, etc. More importantly, enable the Slider captions option at the bottom of the setting page.
The rest of the process comes to going back to the gallery you’ve generated and adding captions to individual images of your gallery. Just hover over the photo, click on the edit icon, and provide your text in the Caption text field. It’s possible for you to edit the image title, alignment, and URL there.
Once done, remember to save and close, and move to the next photo in the gallery.
Add Text over Image in WordPress Like a Pro
You’ve gone through 4 ways to put text over an image in WordPress, either using the WordPress default feature or making use of a free plugin.
If you’re using Gutenberg editor and wish to quickly create a gallery with text on it, get Gutenberg’s Image, Cover, and Gallery blocks. Looking for a powerful solution to build an impressive gallery with overlaying text, consider installing the Modula plugin.
Besides image galleries, have you ever thought of a video gallery for your WordPress site? Check out our article on how to add a video gallery in Elementor.
