How To Add Text Over An Image In WordPress?

Text over image

Do you need to add text over an image in WordPress? Read this article and you will know to do so in no time.

The most used elements in web design are text and images. Actually, one of the most standard layouts is putting an image over a piece of text.

To be more precise, a textual overlay will offer more information about an image. Also, it’s one of the fastest ways to create eye-catching banners, headers, or online advertisements.

Images will help your website look more appealing and interesting and will sometimes help you break big walls of text.

With that being said, there will be cases when your images will need additional information, so it’s pretty important to know how you can add text over an image in WordPress

How To Add Text On Top Of An Image By Using The Cover Block

By using this block, you will be able to show any image and then type text on top of it.

So, let’s get started! One way to add text on top of an image is by using the cover block.

Go to your WordPress Dashboard and go to the post you want to add the cover block.

Click on the “+” sign in the WordPress block editor to create a new block and type in “Cover”.

(Click to enlarge)

Now, you will just have to click on the block cover and upload or use your media library to add an image. If you want to just add a colored background you can also do that by choosing the desired color.

(Click to enlarge)

In my example, I chose to upload a new image. Once I did that, all that is left for me to do is to write the text I want to write.

(Click to enlarge)

You can alter your text as you wish, like setting the alignment of your text, setting it to bold or italic, or even adding a link from the settings bar.

For the color of the text and the typography, you will go to the right in the settings panel.

(Click to enlarge)

If you are planning to add more content type or text to your image, press enter after you finished writing your text and just click on the “+” sign, a new block will be created over your image in your Cover block.

adding multiple blocks inside the cover block
(Click to enlarge)
text over an image
(Click to enlarge)

To give you one more example, I also added a button to our Cover block.

text over an image using the cover block
(Click to enlarge)

How Do I Customize The Cover Block?

The Cover block supports the capability of adding overlay color, full-width alignment, a fixed background, and also set the minimum height.

To be able to use these settings, select the Cover block altogether and take a look on the right-hand side in the settings panel.

Leave a Reply

Your email address will not be published. Required fields are marked *