How to Add a Button Over an Image in WordPress

Do you want to learn how to add a button over an image in WordPress? Well, you’ve come to the right place!

Placing buttons over images is very common and an excellent way to emphasize users to take action. You can use buttons over images as CTAs in your content. 

In this article, I’ll show you how to add a button over an image in WordPress in a matter of minutes. 

So, without wasting any time, let’s jump straight in. 

How to Add a Button Over an Image in WordPress

Here are the step-by-step instructions on how to add a button over an image in WordPress using the Block Editor. 

Step 1: Go to the post or page where you want to add the button over an image. Then click on the + sign on the editor (1), search for the Cover block (2), and insert it (3).

You can also add the cover block by typing ‘/cover’ and inserting the block or by clicking on the + sign at the top menu and adding the block from there. The Cover block can be found under the Media section in the blocks list. 

Step 2: Once the cover block is added, you’ll now have to insert an image on the block which will act as the background image. 

Add Button Over Image - Set Image

You can either upload an image, choose an image from the media library, or choose your featured image. 

Step 3: The final step is to add a button block on top of the cover block. You’ll notice that the cover block has a + icon on the right end. 

Add Button Over Image - Add Block Cover

Click on it and insert the button block. The block will be added on top of the cover block. 

Step 4: Your button block has now been added successfully on top of the image. Now, you can edit and customize your button. 

If your button is aligned to the left like in the image above, you can align it to the center by clicking on the item justification icon and setting it to center. 

Besides this, you can also edit the button shape, color, and size along with the cover image. You can add some text on top of your button, change the background overlay opacity, and more. 

That’s how you can add a button over an image and make a beautiful call-to-action section that looks like this: 


Conclusion

So, that’s how you can add a button over an image in WordPress in a matter of minutes. All you have to do is add a cover block and insert a button block on top of it. By doing this, you can build beautiful sections with different use cases. 

If you have any questions or doubts regarding this tutorial, feel free to drop a comment below and ask your questions. 

I’d be happy to help you out with any queries and doubts.


Leave a Reply

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

Need help?