[Support request] Overlay button on image

[Joanne]

I’m sure this probably has a really simple solution, but having tried for a while and read the articles I can find on buttons and containers, I still can’t figure it out.

I’ve got an image within a container, and just want to add a button over the lower part of the image, so it’s overlaid on the image. When I try to add a button, it just appears below the image and I can’t figure out how to move it over the image. And the same for text, I also want to overlay text on the image.

thank you 🙂

[David]

Hi there,

if you use GenerateBlocks then you can use a Container Block ( or Grid Block ) and add the image as a background to the Container:

https://docs.generateblocks.com/article/container-overview/

[Joanne]

Hi
Coming back to this as still struggling to do what I want it to do.

I’m trying to replicate the two side by side images, with the text overlay, and button overlay on each image, from the Emerald theme at https://generatepress.com/site-library/

I’ve done a container. Added a 2-grid. Added an image to each grid.
But when I click on the + on the container, and add a button, it just adds the button underneath the image and not on it like I want.

I’ve read all of the documentation and still don’t get it 🙁

Can you please explain in simple terms how to get the text and buttons overlaid on each image?

Thank you 🙂

[David]

Can i see the page you have created ?

[Joanne]

It’s still in draft format, not published, as it’s my main site landing page, so don’t want to publish until it’s right.

[David]

Ok, try the following:

1. remove the Image Block.
2. select the column Container Block.
2.1 Set the Minimum Height in the settings sidebar -> Spacing.
2.2 Select Backgrounds and add your Image there.
2.3 Note there is a vertical alignment option in the Container settings -> Layout for position the button.

[Joanne]

Thanks, think I’m slowly getting there!

How can I get a space between the 2 images? I managed it when they were inserted as images, but not now they’re backgrounds. Have tried various spacing settings.
Thanks

[Ying]

Hi there,

Are you using a Grid block for the 2 images?

If so, select the Grid block, add some horizontal gap to it:
https://docs.generateblocks.com/article/grid-overview/#horizontal-gap

If not, can you take a screenshot of the list view so I can what blocks you are using right now.
https://wordpress.org/support/article/list-view/

Let me know 🙂

[Author]

Posts