Do you want to add text on top of an image in WordPress?
A text overlay is a great way to provide some extra information about an image. It’s also a quick and easy way to create banners, headers, and even online advertisements.
In this article, we will show you how you can add text on top of an image in WordPress.
Adding Text Over Images in WordPress
Images can make your WordPress website look more interesting and help to break up large paragraphs of text.
However, sometimes your images may need more explanation. For example, you might add text on top of an image to explain what the image shows and why you’ve added it to your post.
Many WordPress blogs also add text on top of an image to create eye-catching and informative banners and headers.
In this post we have three different ways to add text on top of an image in WordPress. If you prefer to jump straight to a particular method, then you can use the links below.
Method 1. How To Add Text on Top of an Image Using the Cover Block
One way to add text on top of an image in WordPress is by using the Cover block. You can use this block to show any image, and then type text over the image. This makes the Cover block perfect for creating hero images, headers, and banners.
To add a Cover block to a page or post, simply click the plus (+) sign in the WordPress block editor.
You can now type in ‘Cover’ and select the right block when it appears.
By default, the Cover block has a placeholder image and some placeholder text.
To replace the default image, simply click to select the image. Once you’ve done that, click on the ‘Replace’ button.
If you want to use an image that’s already in your WordPress media library, then simply click on ‘Open Media Library.’ You can then choose an existing image.
If you want to upload a new image, then click on ‘Upload’ instead.
This opens a window where you can choose any file from your computer.
After you choose an image, you can use the block settings to create some interesting and eye-catching effects. For example, you can make the image fixed in place as the visitor scrolls the page, or add a color overlay to the image.
If you do use an overlay, then you can change its opacity by using the ‘Opacity’ slider. Opacity setting control the transparency of the background image.
When you’re happy with how the image looks, you’re ready to add some text.
By default, the Cover block has a Heading and a Paragraph block where you can add text on top of the image.
To add some text, simply click to select either the Heading or Paragraph block. Then, go ahead and type in the text that you want to use.
When you add text on top of an image, that text can sometimes be difficult to read. This is particularly true for any visitors who have poor vision. To learn more, please see our guide on how to improve accessibility on your WordPress site.
That being said, you may want to style your text so it’s easier to read.
If you’re working with a Heading block, then you can also try the different heading styles to see which one is easiest to read.
You can also help your text stand out by using a contrasting color.
To choose a different color, select the ‘Block’ tab in the right-hand menu. Then, go ahead and click on ‘Color’ to expand this section.
Once you’ve done that, click on ‘Text.’ This opens a popup where you can choose a new color for all the text in the block.
Typically, larger text is easier to read.
To make your text bigger, go ahead and click on the field next to ‘Size’ and then type a larger number into this field.
Once you’re happy with how your Cover block looks, you can publish or update your page as normal. Now if you visit your website you’ll see your text on top of the image.
Method 2. How to Add Text on Top of an Image Using the Image Block
The Cover block is great for creating banners and headers. However, you can also add text on top of a standard WordPress Image block.
To start, you’ll need to add an Image block to your page or post. To do this, simply click on the plus (+) sign in the WordPress block editor.
You can then type in ‘Image’ and select the right block to add it to your post.
You can then either upload an image from your computer, or click on Media Library to choose an image from the WordPress media library.
After choosing your image, you can change its focal point, add an overlay, and change the opacity following the same process described above.
You can also try the different ‘Fixed background’ and ‘Repeated background’ sliders to see what works best for your Image block.
When you’re happy with how your image looks, click on the ‘Add text over image’ button.
This adds an area where you can type in your text.
Depending on your image, visitors may struggle to read your text. Here, it may help to make the text bold or change its color following the same process described above.
You can also make your text bigger.
To do this, find the ‘Size’ section in the right-hand menu. You can then go ahead and click on the different numbers to make your text larger, or smaller.
When you’re happy with how your text and image look, click on Save Draft, Update, or Publish to save your changes.
Method 3. How to Create a Custom Page Layout with Text on Top of an Image
The built-in WordPress blocks are a quick and easy way to add text on top of an image in WordPress. However, if you want the freedom to create completely custom page designs, then you’ll need a page builder plugin.
SeedProd is the best WordPress page builder plugin on the market. It allows you to add text on top of any image across your entire website.
Note: There is a free version of SeedProd, but for this guide we’ll use the Pro version since it has more features.
First, you need to install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you’ll need to enter your SeedProd license key. You can get this key by logging into your SeedProd account. Then, click on the ‘Downloads’ tab.
Once you’ve done that, you can copy the key in the ‘License key’ section.
You can now paste this key into your WordPress admin area by going to the SeedProd » Settings page.
Once you’re here, go ahead and paste your key into the ‘License key’ field.
Then you simply need to click on ‘Verify Key.’
After that, we’re going to head over to SeedProd » Landing Pages, and click on Add New Landing Page.
Your next task is choosing a template, which will be your page’s starting point. No matter what SeedProd template you choose, you can customize every part of the template to perfectly suit your website and branding.
If you prefer to start with a blank canvas, then you can click on Blank Template.
In all our images we’re using the Tasty Squeeze Page template, which is perfect for getting more subscriber campaigns.
Once you’ve found a template that you may want to use, hover your mouse over it. You can then click on the ‘Preview’ icon.
This will show a preview of the template.
If you’re happy with how this template looks, then go ahead and click on the ‘Choose This Template’ button.
In the ‘Page Name’ field, type in a name for the page.
By default, SeedProd will use this name as the page’s URL. If you want to change this automatically-created URL, then simply edit the text in the ‘Page URL’ field.
When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button. This will open the template in SeedProd’s drag and drop editor.
In the left-hand menu, you’ll see all the blocks and sections that you can add to your page using drag and drop.
Unless you’re using the Blank Template, your SeedProd page will already have some blocks and sections. To edit any of this content, simply click to select the block or section.
SeedProd’s left-hand menu will now show all the settings you can use to customize this block or section. As you can see in the following image, if you click on a Headline block, then you can change the text that shows up in this block.
The easiest way to add text on top of an image is by using one of SeedProd’s ready-made Hero sections.
These sections have a placeholder background image, with some placeholder text added on top. You can simply replace the default background image and text with your own content.
To get started, click on the ‘Sections’ tab in SeedProd’s left-hand menu.
You can then click on ‘Hero’ to see all of the ready-made hero sections that you can add to your page.
To preview any of these section templates, simply hover over the template and then click on the magnifying glass icon.
To go ahead and add this hero section to your design, just click on ‘Choose This Section.’
Next, you’ll want to replace the template’s stock image with your own image. To do that, simply click on the stock image to select it.
Then, in SeedProd’s left-hand menu hover over the ‘Background Image’ preview until a trash can icon appears.
You can then go ahead and click on this icon to delete the placeholder image.
Next, click on ‘Use Your Own Image.’ You can then either choose an image from the WordPress media library, or use a stock image.
SeedProd gives you easy access to thousands of royalty free stock images. To take a look through SeedProd’s stock image library, click on ‘Use a Stock Image.’
In the search bar, type in a word or phase that describes the image you’re looking for and click on the ‘Search’ button.
SeedProd will now show all the stock images that match your search term.
When you find an image that you want to add to your design, simply give it a click.
Once you’ve added an image, you’re ready to replace the placeholder text.
To do this, click to select the text block. Then in the ‘Text’ area, simply type in the text that you want to use.
Some of SeedProd’s hero templates have extra content, such as call to action buttons.
Want to change this content? Then simply click to select the block and then make your changes in SeedProd’s left-hand menu.
Another option is to delete the block from the hero template.
To do this, simply click to select the block and then click on the trash can icon.
When you’re happy with your page design, you can click on the ‘Save’ button.
From here, you can choose to publish the page or save it as a template.
For more details on creating custom page layouts with SeedProd, you can see our guide on how to create a landing page in WordPress.
We hope this article helped you learn how to add text on top of an image in WordPress. You can also go through our guide on how to choose the best web design software or see our expert pick of the best SEO plugins and tools you should use.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
