Looking for a way to add text on image in WordPress? This article is just for you.
A text overlay on a featured image lets you add some context to your posts and in addition to that, if done correctly, it gives your WordPress website edgier.
In this blog, we are going to show you how you can easily add text on image on your WordPress website using 3 different methods. So without further a do, let’s dive in.
Method 1: Add Text on Image Using Cover Block
The very first method to add text to an image is by using the cover block. Each element that you place on your WordPress website is in the form of a block, like an image block, text block, button block, and likewise. One such block is the cover block. Using a cover block, you can add an image and then can add text over it.
Just like we add all the other blocks, click on the plus button to add a new block and then search for “Cover”. This block has a default image and some default text which you can edit and change according to your requirements. To change the image, click on the image and you will find an option to replace it.
Here, you get two options from where you wish to select your image. First, if you want to use an image that is already uploaded to your WordPress media library, then simply click on “Open Media Library”. There, you will have all the existing images uploaded to your WordPress website. And if you want to upload a new image, click on “Upload” to add an image.
Once you upload the image, you can now edit the block through block settings. By overlay option, you can add color to the overall image and by using the opacity slider, you can customize its opacity.
Now, by default, the text is in the form of a heading and a paragraph block. To add text to an image, simply click on any of the heading or paragraph blocks and edit it. To customize the text in your heading or paragraph block, you use all the options which pop up when you edit any of the blocks.
Sometimes, it can be hard to read the text above the image, if the image is too loud or the text is too thin. You can change the color of the text from the right menu on your interface. Click on the “Text” and select the theme. Another way to make your text readable above the image is by adding the background.
To edit the typography, on the right side of the interface, click on “Typography”. Generally, WordPress has a standard size for different headings. But you can customize it from the “Typography” option. You can also edit your text’s appearance and letter case by this.
And this is how you add text to an image using a cover block. Once done with all the edits, check the preview and see if the result comes out as you expected. If not, you can always go back and edit it according to your needs. Once done with edits, you can publish them by clicking on “Publish”.
Method 2: Add Text on Image Using Image Block
The cover block works best to add images to text for creating headers and banners of a website. But if you don’t find that method convenient or you want to add text to the already uploaded image, you can use this method. You can also add text on image using the text block.
First, to place the image behind the text in WordPress, add the image block just like we add all the other blocks and there also, you have two options, i.e. you can add the image which is in your WordPress library or you can upload it from your system.
After uploading the image, click on the button provided to add text on image, and best the alignment, link, and crop options. This will create an area for you to add text on image. Now to edit the text, simply click on the text and write your content.
You can overlay a new color on the image and change its opacity just like the above method. Now, as mentioned earlier, if your image is too loud or the text is too light, it might not be convenient for the user to read it.
Under the “Block” tab, you can edit the image’s color, typography, and size. Adjust the text color and background in such a way that your content is readable and it should merge with your overall interface of the website.
Here also, we suggest you preview the results by clicking on the “Preview” button on the top-right side of the interface. Check if everything goes as per your need and if it’s a green signal, then go ahead and publish it by clicking on the “Publish” button. If not, then you can always go back and make the necessary edits.
Method 3: Add Text on Image Using Elementor
Elementor is a fantastic visual WordPress website builder which helps you create websites that attract visitors attraction and leave a mark on them.
To add text on image using Elementor is really simple. Go to your post/page and click on “Edit with Elementor”. If you don’t have Elementor, you can download it from the “Plugins”.
Add a section to the page and under the “Style’ tab on the left side of the Elementor interface, you will find an option to edit the background.
Click on that and you will find three options to add images to your WordPress website. First, you can upload the image from the system through, the “Upload” option. Next, use “Media Library” to upload the image from your WordPress media library. And lastly, Elementor gives you the privilege to use images from Pixabay.
You can give details about the image like alt text, title, caption, and description. Elementor is a highly customizable page builder. You can edit the position, attachment, and size of the image from the “Style” tab.
Now, to add text on image, click on “+”, and drag and drop “ Heading” to it. You will find a text section over the image which you can edit and put the content according to your needs. You can also add “Text Editor” if you can add paragraphs and can edit the content from the “Style” tab.
And that’s it for this article. We hope this article has helped you to add text over image. We have covered 3 different methods to add text on image in WordPress content. If you are still stuck and can’t figure out how to add text on image, then you can hire WordPress engineers from JustHyre for the job.
If you like this blog, also read our expert’s pick on How to Fix “File Type Is Not Permitted” WordPress Error with Easy Methods and How to import and export WordPress users in an easy way? (Exporting WordPress users within 5 minutes)
Connect With JustHyre
Hire WordPress Engineers for custom jobs like Website Customization, SEO Optimization, Clearing a Hacked Website, Installation & Configuration & more.Connnect with JustHyre