Optin Monster Button Link

Beaver Builder
1

Hi

I have followed Ben’s instructions here on linking a Beaver Builder button up with an Optin Monster lightbox form. So far so good, it creates a standard button and when clicked, it opens the lightbox.

I now need to be able to center the button in the page and be able to edit the background and text colour of the button. I’m not a developer and don’t know how to write css and html etc.

Are you able to provide the code snippets and sections of code to edit to carry this out?

Cheers

Jamie

2

Hi Jamie,

Thanks for your detailed explanation. Could you please share your Website URL with me so I could tell you the correct CSS snippet to do this?

Thank you.

3

[Content Hidden]

4

[Content Hidden]

5

[Content Hidden]

6

Hi Jamie,

I apologize for the delayed response. I’ve checked the page and it looks you have inserted the button manually into a HTML module. I would suggest you to wrap your button with a custom “div” selector as shown on the code below.

<div class="enquire-button">
<a href="#" class="fl-button manual-optin-trigger" data-optin-slug="hm3s6ogbptbhoyjq">Enquire Now</a>
</div>

Then you may apply custom modifications using CSS snippet as shown below.

To align button to center

.enquire-button {
text-align:center;
}

To change the background color

.enquire-button a.fl-button {
background:black;
}

To change the text color

.enquire-button a.fl-button {
color:purple;
}

Thank you.

7

Hi KC

That worked perfectly, thanks!

One last thing, a css snippet to apply a style to the button? e.g. gradient

Cheers

Jamie

8

Hey Jamie,

Gradient is a little complicated, I would suggest you to check out one of this “Gradient Generators” to help you out.

Link 1
Link 2

When you are done, kindly copy the generated gradient CSS code and paste it inside the open/close curly bracket as shown below. Then insert everything into your Theme Custom CSS section.

.enquire-button a.fl-button {
//Insert Generated Gradient Here
}

Thank you.