[Support request] how to set a negative margin on a block

[Nancy]

I’m trying to make a button block appear over an image on a landing page. I found a way to do it in elementor by setting a negative margin on the button block so it move up over the image block. Will this work in GP? video re elementor is here: https://www.youtube.com/watch?v=zMq_rDaEtS0

[Leo]

Hi there,

It should. Have you tried it?

GP doesn’t have control over the content when Elementor is activated for the page.

[Nancy]

Sorry – my question wasn’t clear. What I meant is how can I set a negative margin for a block containing a button WITHOUT using elementor? I’d prefer to keep things simpler by using WordPress with the GP theme, no elementor.

[Leo]

Hmm I don’t think that will work with Gutenberg blocks.

Have you tried using this method I suggested before?
https://generatepress.com/forums/topic/how-to-put-a-call-to-action-w-button-on-top-of-image-on-my-front-page/#post-776773

Not sure what your landing page looks like but perhaps you can use the header element module?
https://docs.generatepress.com/article/page-hero-examples/#example-1

You should be able to find lots of different solutions when Googling “button on image” as well. Most of them aren’t theme specific solutions.

[Nancy]

I feel like I’m in over my head with the html – css solution you offered me before. I have googled the question but the elementor thing was the only thing useful to me that came up. I’m not a developer and have a very beginner’s understanding of css. I’m concerned that if I start editing the css it will have unforeseen complications. For example, will updating the GP theme later on be complicated by me editing the css? I saw warnings on https://www.w3schools.com about being careful about that and to use a child theme.
But I don’t even know how to set up a child theme and how that gets updated when GP updates.

[Leo]

Your CSS will be saved through updates if you use one of these methods:
https://docs.generatepress.com/article/adding-css/

Here is some info on child theme:
https://docs.generatepress.com/article/using-child-theme/

Perhaps using Elementor or a page builder is also a good way to go? It’s designed for people who have limited coding knowledge.

[Nancy]

Thanks for your help and patience with my learner’s mind.

[Leo]

No problem!

Definitely takes some time to get a grasp on HTML and CSS.

If you are interested, this is the website I used to learn a few years ago:
https://www.codecademy.com/catalog/language/html-css

If you don’t have the time then definitely give page builder a shot. It should save you some headache.

[Author]

Posts