How to Add Text Over Images in WordPress: A Beginner’s Guide

Looking to add text over featured images on your WordPress site?

Adding a text caption to featured images lets you add some context to your posts. But, if your WordPress theme doesn’t come with a built-in feature for this, it can be hard to set up.

Thankfully, there are some easy ways to add text over featured images in WordPress without resorting to custom code, and I’m going to share them with you in this post.

I’ll show you several different methods including:

• Elementor and Elementor Pro
• Two different free plugins that let you add captions to featured images
• A native block in the WordPress block editor

Ready to get started? Let’s dig in…

How to Add Featured Text Over Images With Elementor

If you want a more complete overhaul to how you display both posts and featured images, you can use the Elementor page builder.

Elementor Pro lets you create a custom template for your blog posts using its Theme Builder feature. As part of this, you can overlay text over your featured images.

For more on the basics of how to use Elementor, check out our full Elementor review.

To set this up, you’ll need both the free core Elementor plugin and the Elementor Pro add-on so that you can get access to the Theme Builder feature.

Then, go to Templates → Theme Builder and create a new Single template for your Posts. This controls the design of individual blog posts.

To add the featured image, drag over a Featured Image widget. Then, to add text, use the Caption drop-down and set it to either:

• Attachment Caption – it will pull the caption from the WordPress Media Library caption box.
• Custom Caption – you can enter a custom caption. If you combine this with Elementor Pro’s Dynamic feature, you can automatically insert a caption from a custom field that you’re using.

I know there’s a lot going on here. So if you’re confused by Elementor, I really do recommend reading through our full Elementor review so that you get a better understanding of how Elementor works.

Check If Your Theme Supports Featured Image Captions

It’s always worth checking if your theme already supports featured image captions.

For example, when I test with the Twenty Twenty theme, the theme will automatically display the caption that I set in the WordPress Media Library:

For reference, this is how I set the caption:

So if your theme supports it, that’s an easy way to add captions to featured images.

However, not all themes support this. When I tested the exact same thing in the Twenty Nineteen theme it didn’t display the caption.

If your theme doesn’t display the caption by default, you can keep reading for some other ways to add text over featured images in WordPress.

How to Add Text to Featured Images With Featured Image Caption

Featured Image Caption is a neat free plugin that lets you add a caption to your WordPress featured images, much like you can add captions to images that you include in your content.

It’s super easy to use and it works with most WordPress themes right out of the box. It also works with both the classic editor and the new block editor

To get started, install and activate the free Featured Image Caption plugin from WordPress.org.

Once you’ve activated the plugin, you’ll see a new Featured Image Caption section in the WordPress editor. In the block editor, this section appears in the sidebar.

All you need to do is add the text that you want to use to the box:

And that’s it! The plugin will automatically add the text caption to your featured image.

By default, the text appears immediately below your featured image:

If you want to move this text to make it “float” over the image, you can use some simple CSS.

While I’m not a CSS expert (there might be a more efficient way to do this!), here’s the CSS I used. I also changed the text size and color:

span.ccfic-text {
position: relative;
bottom: 50px;
color: white;
font-size: 32px;
}

If you’re not sure how to add CSS, check out our guide on how to add custom CSS to WordPress.

How to Add Text to a Featured Image With the Cover Block

If you’re using the new WordPress block editor (AKA Gutenberg), you can add a featured image with text using the default blocks.

While the block editor includes multiple options for adding text over images, I recommend the native Cover block for featured images. You can also make it full-width to add a nice featured effect:

And voila – a featured image with text over it:

If your theme automatically displays the featured image on the single page, you might want to disable that to avoid duplicate images because the Cover block is technically separate from your featured image, even though it accomplishes the same thing.

How to Add Text Over a Photo with the Image Block

Besides the Cover block that allows you to create hero images or banners effortlessly, the default Gutenberg block editor also features the Image block. 

Adding the Image block to a page is simple. Open Gutenberg, find the Image block in the block library, and add it to the page.

Upload a photo from the WP Media Library, your computer, or insert the picture’s URL if you’d like to use an image hosted on an external server. 

The block offers an abundance of image settings you can use to define its opacity or how its background will look. 

The Add Text Over Image icon is located in the toolbar above the preview window. Clicking on it will enable you to create a text layer and allow you to access the Overlay menu in the document panel located on the right side of the screen. 

Insert the text into the Type/to choose a block element displayed over the image you uploaded, and proceed to adjust the text settings. You can set the text opacity, change its color, increase or decrease its size or pick a different font. 

Clicking the Update button will add the Image block you created to a post or a page.

How to Add Text Over Image with the Gallery Block

Using Gutenberg’s Gallery Block can be a good idea if you want to add text layers to multiple images. Let’s see what you need to do to create a text overlay with this block. 

• Open the block editor and click on the + icon (block inserter). 
• Find the Gallery block and add it to the page you’re building. 
• Upload an image from the Media Library or a local hard drive. 
• Write captions for each image you add to the gallery and click the Update Gallery button when done. 

Captions for images imported from the Media Library will be automatically added if they’re created before the gallery block. Hence, you must first write image captions in the Media Library, then create the gallery block and add the pictures.

How to Add Text Over a Featured Image With FSM Custom Featured Image Caption

FSM Custom Featured Image Caption is another neat free plugin at WordPress.org that makes it easy to add a caption to a featured image in WordPress, along with some other helpful settings.

This one comes with a few more options than the Featured Image Caption plugin above.

To get started, install and activate the free plugin from WordPress.org.

Then, go to Settings → FSM Custom Featured Image Caption to configure a few settings.

First, if you want to show your featured image caption in the blog post list, you should check the box to Show image captions in lists. Otherwise, the plugin will only display the caption on single blog post pages.

If you want to make the text “float” over the featured image, you can also choose the Custom Style option and enter some custom CSS. For example:

position: relative; bottom: 50px; left: 35px; color: white; font-size: 22px;

The plugin automatically pulls your caption from the caption that you set in the WordPress Media Library.

Here’s what the caption looks like with the default styling and the Twenty Fifteen theme:

And here’s what it looks like when I add the custom CSS from above to make the text float over the image:

Other Noteworthy Plugins for Adding Text over Images

Elementor’s and Gutenberg’s text overlay options are powerful enough for most WordPress website owners. 

However, they’re not ideal for complex designs with multiple text layers. A plugin like the Slider Revolution will give you more control over how and where you want to position the text.

The plugin’s editor has a wide range of effects that enable you to animate the text overlay and the image in the background or customize the text in any way you want. The plugin’s only downside is that you’ll need an advanced set of design skills to use it. 

Countless image gallery WordPress plugins offer the tools you need to create text overlays. FooGallery is a lightweight plugin that allows you to create captions or watermarks for all images you add to galleries. In addition, most photo editor WordPress plugins, including DigiWidgets Image Editor and WP Paint, allow you to add custom text to images.

Frequently Asked Questions about Adding Text to Over Featured Images

How Do I Add Overlay to an Image in WordPress?

There is more than one way to add an overlay to an image in WordPress. Most themes have an image caption feature that allows you to display text below the picture. However, you can install a WordPress plugin if you want to add a text layer to a photo. 

FSM Custom Featured Image Caption, Featured Image Caption, or Slider Revolution are a few among the countless WordPress plugins you can use to write over images. 

The exact steps you must take to create a text overlay will depend on the plugin you choose, but the main principle is always the same. You must upload a photo, create a layer with the text you want to place over a picture, and adjust the text settings. 

How Do I Add Text to the Top of an Image with Elementor?

Combining Elementor’s Image and Heading widgets is probably the fastest way to add text over a picture with this page builder. 

• Open the page builder and find the Image widget
• Drag and drop the widget to a column and then do the same with the Heading widget
• Upload a picture to the Image widget and insert text to the Heading widget
• Adjust their settings and save the changes

Alternatively, add the background image directly to a column and place the Heading widget over it. Navigate to the column’s Style tab to upload a background picture after placing the Heading widget into that column and adjust the image size settings to complete your design. 

How Do I Overlay Text on a Picture?

You must have the tools that allow you to create a textbox over a photo. All versions of WordPress released after WordPress 5.0 feature Gutenberg block builder that enables users to create text overlays on images. 

So, in most cases, you won’t need a plugin to write over pictures you upload to a WordPress website.Gutenberg’s Cover, Image, or Gallery blocks let you create text layers over pictures. Each block contains the Add Text over Image feature that generates a textbox and allows you to choose where the text will be positioned or how much space it will occupy.

Any Questions About Adding Text Over Featured Images?

There you have it, folks. Four different ways that you can add text over your WordPress site’s featured images.

For the absolute simplest method, you can just use a Cover block in the new WordPress block editor.

Or, the Featured Image Caption and FSM Custom Featured Image Caption plugins are both simple free options.

On the other hand, if you want more control over exactly how your WordPress featured images function, you might be happier with Elementor and Elementor Pro.

Any lingering questions about how to add text over featured images on your WordPress site? Ask away in the comments and we’ll try to help!