How to place Button over an Image?

Why Place a Button Over an Image?

Placing a button over an image helps you create a clear call-to-action (CTA) without interrupting your design flow. It makes the page more engaging and directs visitors to take the next step right away.

Common use cases include:

• Featuring a “Shop Now” button on product or collection banners.
• Driving attention to seasonal promotions or discounts.
• Linking directly to a specific landing page or highlight section.
• Creating a cleaner layout instead of separating the image and button.

Tips: Choose a button color that contrasts with your background image to ensure it stands out, especially on mobile devices.

To achieve this in GemPages, you can follow two simple methods explained below.

How to Put a Button Over Your Image in GemPages?

Method 1: Use a Hero Banner Element

Typically, you can use the Hero Banner element to upload that image. Then, the hero banner allows other elements on it, including the button. Follow these steps:

Step 1: Go to the GemPages Builder app > Pages. Then, click on the page on which you want to place a button over your image to open the editor.

Step 2: In the left sidebar, search for the “hero banner”. Drag and drop the preferred layout to any position on your page.

Step 3: Delete the text elements and keep only the button element.

Step 4: Click on the Hero Banner element to reveal its settings. Scroll down to the Background section and select the Image field.

Step 5: Upload your image or choose one from the library to use as the background image.

Step 6: Adjust the background image as you prefer.

Step 7: Click on the Button element to open its settings. From here, you can customize the button your way, such as:

• Change the color, shape, and size.
• Add an icon or hover effect.
• Link the button to a new page or a target section on your page.

Refer to this article for more instructions.

Step 8: Save your changes and hit Publish.

Method 2: Use the Relative option of Button Position

To ensure the button is placed correctly over the image in your page design, you can set the Button Position to Relative.

Follow these steps:

• Click on the Button element to open its settings and navigate to the Advanced tab.
• Scroll down to the Position section.
• Select the Relative option from the dropdown menu.

Learn more about all this configuration via this article.