Archived topic
Overlay button on image
7 replies · Started by Joanne on February 14, 2022
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 :)
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:
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 :)
Can i see the page you have created ?
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.
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.
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
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 :)
