[Resolved] How to insert button to Elements

[Zdeněk]

Hi, would you describe to me please how to insert button to Elements. For example I would like insert customizable button to the center of this page: http://cyklo.mestopacov.cz. Thank you very much for help and detailed description how to do it.

[Ying]

Hi there,

You can use a block element, build your custom button in the content field.
https://docs.generatepress.com/article/block-element-overview/

Choose hookas block type, choose generate_after_header as hook, choose frontpage as location.

Once you built the structure, we can help with some CSS.

Let me know 🙂

[Zdeněk]

Thanks for answer. Because my skills are not good, I would be very happy for your help 🙂 I need insert button in center of page.

[Elvin]

Hi there,

To clarify: you’re trying to add buttons within the Revolution Slider slides?

If that’s the case, we recommend asking its plugin’s support on the best practice in adding buttons as the theme doesn’t control how contents are added to their slides.

Revolution Slider is a third-party plugin. It’s a plugin outside of our scope, unfortunately.

[Zdeněk]

No, you don´t remember me 🙂 I would like to insert button across the revslider, i don´t want to use revslider button. The slides will be changing, but the button will be fixed all the time on the same place.

[Elvin]

Can you provide any mockup images of how you want the button to be laid out? For us to have a better idea on how to apply the button on your content.

Let us know.

[Zdeněk]

Yes, of course, here it is. Thanks!
Picture

[Elvin]

Ah I see what you mean.

If that’s the case, consider doing this:

Things needed to make this work:
– Block editor (we can’t use generateblocks on classic editor)
– GenerateBlocks
– A bit of custom CSS

First, let’s edit the page via WordPress’ default Block editor (Gutenberg).

Steps to do:

1.) Place a GenerateBlocks’ Container Block.
2.) On its “Additonal CSS (classes)” field, add “relative-container”.
3.) Add this CSS on Appearance > Customize > Additonal CSS
.relative-container { position: relative; }
4.) Add your Slider inside this Container Block.
5.) Add a GenerateBlocks’ Button Block.
6.) On this Button Block’s “Additonal CSS (classes)” field, add “absolute-centered-button”.
7.) Add this CSS on Appearance > Customize > Additonal CSS

.absolute-centered-button { 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
}

That’s basically it.

[Zdeněk]

OK, i did it all and now I see the button only for 1 second while loading page.

Thank you for your patience!

Button – video

Picture

[Elvin]

Ah right I forgot something.

Let’s add z-index to the CSS properties.

Edit this CSS:

.absolute-centered-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Write it like this:

.absolute-centered-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
}

We basically just added z-index. With this, the button should be visible now. 🙂

[Zdeněk]

Yeah, that´s it! You are the best. Thanks 🙂

[Elvin]

No problem. Glad you got it sorted. 🙂

[Zdeněk]

One more little thing – I need the expanded menu to overlap the slider and the button – is it possible?

[Elvin]

I’m not sure what you mean. The expanded menu is already overlaying on top of the slider. Care to explain a bit more? Perhaps a mockup image of how you want it to be laid out?

We might’ve put too much z-index though. Change the z-index value from 999999 to just z-index: 9; so the button doesn’t go on top of the menu items.

[Zdeněk]

Yes, fixed 🙂 Thanks!

[Author]

Posts