Call to action questions

Beaver Builder
1

Hello,

I need to do several things with the Call to Action element that I dont find.

How can I reduce the separation between the text and the button?

How can I change the color of the button border? (this question is also valid for the button element)

How can add my own image as icon for the button? (this question is also valid for the icon element)

Thanks in advance!

2

Hey Fernando,

The separation between the text and button is relative to the width of the column. There is no setting to change it in the module, but you can reduce the column the module is in and that should be the best way around it.

The border colors only apply when you set the Button style to transparent. Once you do, it takes the background color as the border color.

We’ve created a blog entry regarding custom fonts which you can check on the link below.
http://forum.wpbeaverbuilder.com/using-custom-font-icons-beaver-builder/

Hope this helps and let us know if we can assist further! :slight_smile:

Ben

3

Is it possible to change the border color of the button by css? How? I want to have solid color in the button background and when hovering white background with border in color, and I cant with the element options.

Thanks in advance!

4

Hi Fernando,

To add a border on hover, you will first want to set the hover background color. Then go to the Advanced tab on the Call to Action module and in the Class option field add my-hover-btn. Save the changes and then add the following to your custom CSS:

.my-hover-btn .fl-cta-button a.fl-button:hover {
    border: 3px solid #000;
}

This should give you a border on hover. You will want to change the border width pixel value and color to your preference.

Thanks,
Danny

5

That’s perfect for me. Thank you!

6

No problem, Fernando. Happy to help.

Thanks,
Danny