Call Out Heading Color/Make Columns Same Height/Button Issue?

Beaver Builder
1

I’m using BB Plugin with BB theme.

  1. How do I change the text color of the heading in a Call Out element?

  2. I have a row with three columns, each holding a Call Out describing a service. How can I keep all three of those columns/call outs the same height apart from using the exact same number of lines of content?

  3. I have a button at the bottom of each Call Out, but no matter what I choose for the style, it remains standard (ie. it won’t go transparent or gradient). Any ideas?

[EDIT] I just went in to change the color of a button and as soon as I did, it went from Flat to Transparent. Not sure why, but thought I would mention it if it’s a bug or it happens to anyone else. :slight_smile:

Thanks!

2

Hey Daniel,

  1. You can change the Text Color under the column settings but it will change both the heading and the body text of the Callout module. If you want to change just the heading, you will need custom CSS to achieve that.

  2. A simple way to achieve that is through custom CSS. But if you want, you can use JS as well as it’s more robust. May I ask the reason you need this for?

  3. The gradient option is actually working, it’s just that the difference between the 2 colors is not noticeable. The transparent is also working but you have to assign a background color first(explains the edit comment as well).

Hope this helps!

Ben

3

Thanks!

  1. Is that as intended? I noticed in the CTA (I believe) that there were heading co trolls, but not in the Call Out. I will look for the column settings for now. That should be fine.

  2. Because each column with a Call Out in it is a different color and if the description for one is longer than another, the column is noticeably longer. Perhaps there is a better way for me to do this?

  3. I noticed that the changes were taking effect, but only after I tried to change their color. I’m all good here.

Dan

4

Hey Dan,

  1. Yep, that is intended. But the guys are gonna be bumping up the UI within this year so you might want to head over to our User Voice Forums and add that in as a feature request.

  2. Gotcha. Sorry but the only way to achieve this is via Custom CSS/JS. You’ll see in this thread, he achieved the same via custom JS.

Ben

5

Thanks for getting back to me so quickly! I am actually going to email you folks with an account request. Feel free to mark this one as resolved.

6

Hey Dan,

No worries! Have fun using The Beaver! :slight_smile:

Ben

7

Hello,

I’m also trying to get 4 call outs to be the same height with different content.

I’m not comfortable with js, how would you do it with css?

Will it be responsive too?

8

Hey Greg,

It’s going to need a lot of work. You first need to add a minimum height(min-height) property to your Callout Modules with the same value. Then, you set a certain value per device width via media queries.

The guys are actually hard at work getting the Equal Column Heights(and a few other features) implemented. Just letting you know that this won’t be a problem anymore once they’re done! :slight_smile:

Ben