Images with a text overlay look great, deliver a message, and are especially useful for headers. But, let’s face it, no one wants to code this feature into the editor, nor would anyone have the time to design the text into the image itself. Luckily, there are a few very simple processes that require zero custom coding and are easily achievable with the Gutenberg block editor, a built-in content editor tool of WordPress. In this tutorial, we’ll go over a few of these methods and by the end, you will be able to add overlay text over images across the entirety of your WordPress website.
Text Overlay on Images
First off, what is a text overlay? A text overlay is any type of written content that covers the surface of visual content such as videos and images. Text overlays are mostly used in headers and banners at the hero section of websites. Instead of just having a simple text as a heading, including an image with text and overlay makes the website look much better from a professional and aesthetic standpoint. Furthermore, you can link the overlaying text to the corresponding product or page on your site to drive traffic.
How to Add Text Overlay on Images in WordPress?
Prior to version 5.0, WordPress was using a simple Classic editor for creating posts and pages. It was not possible to add buttons, tables or decorations like text overlays with Classic editors. Therefore, you had to use custom or page builder plugin from third-party developers. However, you can do many stuffs with Gutenberg block editor without any additional plugin. For example, there are more than one way to add text overlay on images in WordPress with Gutenberg block editor. This post is going to guide you through all the steps and methods that you need to follow to add text overlay on images in your WordPress site.
So, what are we waiting for? Let’s get started!!
Note: As we explain with Gutenberg, make sure you are using the default Gutenberg block editor in your site and not the old editor with Classic Editor plugin.
1. Adding Text Overlay Via Image Block
- When you are in the post or page editor, click on the block inserter (+) icon and select image block to add a new image. Another option is to type /image and press the enter key.
- You have multiple options to insert an image. Select Upload to add an image from your computer or use Media Library option if you want to choose an existing image on your WordPress site. Alternatively, you can also use Insert from URL if you want to directly add an image from a link.
- Click on the image where you want to add the text overlay.
- In the top toolbar, click on the “Add text over image” button as shown in the screenshot below.
- Upon clicking, you’ll notice some changes on the block editor on the right-hand side of the page (which is called document panel). Scroll down on the panel until you reach the “Overlay” section as shown in the image below. Here you have the option to do any of the following:
- Add a solid overlay color or a gradient as a background to ensure the text stands out more prominently. For both options, you have the option to choose one of the preset colors from the menu, pick a custom color from the palette, or add a specific color code of your choice. You can do the same for the gradient color option as well. A gradient is basically a color scheme consisting of at least two-color combinations. In other words, the color of the overlay will gradually and respectively change from the first to the second and more (if applicable).
- Change the opacity levels depending on how much of the underlying image you want to be seen through. We recommend opacity levels between 30 to 60%, as anything below 30% can leave your overlay almost indistinguishable while going over 60% will make the overlay too dark, making it difficult to see the background image clearly.
- To add the text, click on the “Type/ to choose a block” section overlaid on the image. This will now change the block editor to display editing settings specific to the overlay text.
- Type the text that you want to display over the image as seen in the screenshot below.
- To change the color of the text, head over to the “Color” section of the block editor. Here you have the choice to make the following color changes to the overlay text.
- Change the text color. We recommend that you select a text color that goes well with the overlay color and the opacity level chosen.
- Add a background color and/or a link color if you have linked the text to another page via a hyperlink.
- To change the typography of the overlay text, scroll down the block editor until you reach the “Typography” settings. Here you can select one of the preset text sizes from a dropdown or enter a specific size manually by clicking on the “Custom Size” button. We have selected text size as “Huge” which is one of the preset text sizes available. Feel free to choose the size of the text that works best for you.
- If you would like to change the alignment of the overlay text, make it bold or add a link to it, you can easily do so by selecting the options in the top toolbar as shown in the image below.
- Finally, on the block editor, you’ll find the Advanced tab which lets you add a CSS class to your block, giving you the chance to write custom CSS and style the image, and overlay on the image block as per your specific needs. However, if you don’t have enough knowledge and know-how of front-end development, then using the preset features provided by the block editor should be more than enough to style the image block as you see fit.
Note: Gradient colors add a vibrant and artistic look and feel to your images, content, and the website, as a whole. Hence, to make the most of this overlay color feature on the WordPress block editor, we recommend that you learn the art of mixing and matching different color combinations to see what works best with your brand and the content that you already have on your website. Another option would be to work with a designer as they will be able to provide artistic recommendations that are specific to the visual layout that you want your website to strive towards.
2. Adding Text Overlay Via Cover Block
When adding text overlay using image block, you can notice the document breadcrumb (showing at bottom status bar of the editor) changes to “Cover” block. Since, WordPress also offers a cover block, you can use that for adding text overlay. In fact, we recommend using “Cover” block which is suitable for creating fullwidth header sections.
- Get things started by clicking on the (+) “Add Block” icon and selecting cover to add a cover block. You can also type /cover and press the enter key.
- Select Upload to add an image from your computer or Media Library if you want to choose an existing image on your WordPress site.
- Type the text that you want to overlay on top of the image as shown in the screenshot below. You can change the text color and size, from the Color and Typography settings as mentioned in the earlier method.
Note: WordPress also offers few predefined patterns for header section. You can click on the “Toggle block inserter +” icon showing on top left corner of the editor and select “Patterns”. Select “Headers” from the dropdown and insert a cover block pattern with predefined setup. This is very useful as you can edit the content and update quickly instead of creating from scratch.
3. Adding Text Overlay on Gallery Images
It is also easy to add text overlay on images in WordPress gallery using the default “Gallery” block.
- Click the block inserter (+) button to add a new block to your page.
- This time, select the gallery block. Alternatively, you can also type /gallery and press enter.
- You will be provided with two options to add an image, Upload and Media Library. As with the previous methods mentioned above, select Upload if you want to add an image from your device, or choose Media Library if the image you want to include in the gallery section already exists on your website.
- Once you’ve uploaded the images or selected an image from the media library, you can now add captions to each image, which will appear as text overlay on the gallery images.
Note: One important thing to note is that if you’ve already added captions to the images in the media gallery before adding the gallery block, the captions will appear as text overlay on said gallery block. On the contrary, if you add captions to the images after creating the gallery block, they will not appear on the gallery block. In this case, you will have to manually add the captions once the gallery block has been created, or remove the gallery block and add the block once again so that the added captions will be used.
Other Options for Adding Text Overlay
In-built text overlay options are basic and looking simple on the published site. You can alternatively use one of the following type of plugins to create for create overlays.
However, these plugins are heavy and can easily slow down your site. You can also try custom CSS for creating image overlay as shown in this demo page. But, you need to know coding skill and spend lot of time in development. Therefore, we recommend using one of the default methods explained above for adding text overlay on images in WordPress.
And there you have it. Adding a text overlay on images in WordPress is very simple and easy task using the built-in Gutenberg block editor. Ultimately, adding text overlay to images improves the presentation, design, layout, and overall aesthetics of your website thereby leaving a positive first impression on your visitors. As always, if you have any issues or concerns about adding text over images on WordPress, feel free to leave a comment below and we’ll do our best to help.