Controlling button styles

Hi, I’m a theme developer that’s just getting started with using Beaver Builder. So far I’m impressed. Nice work, guys.

One concern, however, is how to control the button styles that my users select. Buttons are one of the most important elements for bringing consistency to your site. Currently your Button module allows the user to select from a virtually unlimited array of colors, icons, gradients, etc. The possibility they will go outside a theme’s guardrails is therefore great.

Do you have any recommendations on how to best control this in BB? Some kind of way to limit the Button module building tool to a list of presets would be ideal.

I see you already have feature request in the works about adding preset colors so maybe this kind of functionality is coming. But any thoughts on how I can best address this issue today would be most welcome.

Thanks.

Hey Ryan,

Thanks for getting in touch and welcome to the BB community! For now, you can do the manual way of placing the hex values of the colors you are using on a notepad perhaps then just copy paste it whenever you need to use it.

Another method you can use is via custom CSS. You can place a class on any row/column/module that corresponds to a certain styling, e.g., the class blue-bg gives a blue background, black-border gives a black border and etc.

Until the color presets are implemented, those are the only methods I can think of to make sure the same colors are being used all throughout the site.

Hope this helps!

Ben

Ok thanks. It sounds like I’ll need to wait until the preset colors are available to start being able to put controls on what styles get used. That still doesn’t solve for how to put controls on other design considerations like gradients, icons, rounded corners, etc. But at least it’ll be a start.

Hey Ryan,

The team thinks that adding more controls, like the stuff you mentioned above, would just add more complexity to the plugin. We like to keep things as simple as possible. You can check these user voice requests and their thoughts about it.
https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/6974573-border-radius
https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/6790164-gradient-backgrounds

Ben

Thanks, Ben. I read through the uservoice threads. What they’re referring to is different than what I’m suggesting. Those threads are asking for additional features. I’m asking for ways to limit features. I want to put guard rails into place so that my theme users don’t style buttons and other features in a way that is incompatible with the overall look-and-feel of their site. I want to help them, kindly, to not accidentally create a Frankenstein site. I’ve seen this happen repeatedly and it’s no fun to clean up. Telling them to use certain CSS classes or whatnot is not a solution to this issue. It needs to be controlled through the WYSIWYG.

Hopefully that clarifies a little bit on what I’m after here.

Hey Ryan,

The reason I posted those User Voice entries was because of this line from your previous post, That still doesn’t solve for how to put controls on other design considerations like gradients, icons, rounded corners, etc.

Regarding your suggestion, I guess it’s quite related to the color presets that the guys have already planned for. Just don’t know yet as to when it’s going to be released. :slight_smile:

Ben

Hi Ryan,

it may be an option for you to turn off the default button module and add a simplified custom button module in a seperate custom plugin. Should be relatively easy, considering you only need to strip features and not adding them when you start with the same basecode.

Didou