How to Add a Button Over an Image in Elementor (2024)

Adding a button over an image is very easy. It’s not just a button, you can add anything if you learn the technique.

For this tutorial, I will build this section. Let’s start.

Steps to Add a Button Over an Image

We will add the image as a container’s background image and then add a button inside the container.

Step 1: Add a Container

• Go to the page where you want the button over the image.
• Click on the Add New Section button in Elementor.
• Choose the Column layout you want. I will choose a Single Column layout.
• Now set a width and height for the container.

Step 2: Set the Background Image

• Go to the Style tab.
• Under Background > Background Type, click on the brush icon.

• Upload your chosen image or select one from your media library.
• Set the Position to Center Center, Repeat to No-repeat and the Display Size to Cover.

Step 3: Add a Button Widget

• Inside the container, drag and drop the Button widget.
• Style it as you want.
• Not just a button you can add texts or other widgets.

Step 4: Positioning the Button

To move the button over the image,

• Select the container again.
• Use the Justify Content and Align Items to control the position.

Styling Tips

For improved button visibility, you can add a semi-transparent overlay on the background image.

Go to the container’s Style > Background Overlay, set a color and adjust the opacity.

If you have any questions, feel free to leave a comment below. I will try my best to answer.