Main Content

Make Beaver Builder CTAs, Callouts and Info Banners align.

When using Beaver Builder, chance are you (or your client) will use the Call To Action (CTA) module, put a few in one row, and then realize that the button’s don’t align. 

CTA buttons out of alignment.

Then you’ll spend quite a bit of time trying to make them align only to realize that they don’t stay aligned at different break points.

Good news, I have some CSS that can help!

Add the following CSS to your WordPress child theme, or to the builder. It should render your modules now with the buttons all aligned.

CTA buttons in alignment.


/* ———————————————————————
Module: Call to Action
Requirement: You must have equal column heights.
Requirement: Button layout must be stacked.
———————————————————————— */
.fl-module-cta {
display: flex;
height: 100%;
}
.fl-module-cta .fl-module-content {
width: 100%; /* fixes IE11 */
}
.fl-cta-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.fl-cta-text {
flex-grow: 1;
}

Make sure to read the requirements in the code as well. Having the columns set to equal hight is a part of the alignment process. It also doesn’t work well when CTA buttons are inline, so make sure they’re stacked.

This doesn’t stop at the CTA module either. If you’re using the Callout module, here’s code to make them align.


/* ———————————————————————
Module: Callout
Requirement: You must have equal column heights.
———————————————————————— */
.fl-module-callout {
display: flex;
height: 100%;
}
.fl-module-callout .fl-module-content {
width: 100%; /* fixes IE11 */
}
.fl-callout {
display: flex;
flex-direction: column;
height: 100%;
}
.fl-callout-content,
.fl-callout-text-wrap {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.fl-callout-text {
flex-grow: 1;
}

If you’re using Ultimate Addons for Beaver Builder, here’s code for the UABB Info Banner module.


/* ———————————————————————
Module: UABB Info Banner
Requirement: You must have equal column heights.
Requirement: Should not have a height set in the individual modules.
———————————————————————— */
.fl-module-info-banner {
display: flex;
height: 100%;
}
.fl-module-info-banner .fl-module-content {
width: 100%; /* fixes IE11 */
}
.uabb-ultb3-box {
display: flex;
flex-direction: column;
height: 100%;
}
.uabb-ultb3-info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.uabb-ultb3-desc {
flex-grow: 1;
padding-bottom: 10px;
}

The same code can be modified to work with most any module, but it can be tricky based on how many wrappers each module has. 

I’ve tested this code back to IE11 and everything is working at the moment. If Beaver Builder changes classes, or adds more wrappers, it will probably need to be updated.

If you don’t know what Beaver Builder is, check out the quick start guide.


4 Responses

  1. Michael says:

    Thank you, thank you!

  2. jargonoy says:

    This doesn’t work on my iPad (4th) generation. I tested Safari and Chrome and on both, the following row jumps up and overlaps the row with Callout modules

    • Thomas says:

      I’ll have to check and see what’s going on. BeaverBuilder has advanced quite a bit since I wrote this post so some updates may be needed.

    • Thomas says:

      Do you have a URL where I can see your work? I tested it on an iPad Air (3rd generation) and it’s working as expected. I’m wondering if there is other code interfering.

Leave a Reply