Beaver Builder CSS Code Repository
Just collecting the best CSS codes available for Beaver Builder performance.
Appearance > Customize > Additional CSS
How to display full caption under photos
By default, the photo module will cut the text in captions if they are too long. This will display it and wrap it under the photo.
Follow the original post here.
How to change the color and display of the Scroll To Top Button
If you have enabled the Scroll To Top button on the Customizer. Add this in Additional CSS to change the color or position of the scroll to top button.
How to open a Lightbox Template from a Beaver Builder Button Module
YOU REQUIRE BEAVER THEMER.
Create a template with whatever you want. It can contain a form or whatever content. Save it.
Open a button and place this code in the HTML area after you click on LIGHTBOX. This code will open the template on a new window.
The ID of the template can be found: Go to Beaver Themer > Templates > mouse over the VIEW, and your browser will show you the ID.
How to customize the size of your header logo when it shrinks
If you chose SHRINK when you created the Header on the Themer, then you might still want to resize the logo. Here is how.
How to align the icon to top? Align text and icons in ICON module.
If you need your icon to move to top to be aligned with your text, use this code in additional CSS
How to disable Mailchimp Double Opt-In?
Add it to functions.php if you need to disable the double opt-in feature from MailChimp mail service.
How to change the background color of your input text field for Gravity Forms?
If you also hate form input fields that look white use this code to make them darker.
How to create a sticky footer in Beaver Builder?
If you need a sticky footer that will stay below the screen in desktop and mobile use this code:
My Beaver Builder "freezes"every time I try to SAVE. What can be the cause? And how to fix it.
Sometimes you try to edit an existing module and when you try to save it it will take forever on "saving" and never really saves. And maybe you've tried deleting the sites cache but the same problem keeps persisting, its like it "freezes" when you try to save your work. According to the Beaver Builder support team, this is a problem with a hosting security feature.
You can fix it yourself. To fix it you just need to add this code to the wp-config.php file. Not in the child theme, but in the parent theme. Why? Refer to this article for a full explanation.
For a hotfix, just add this line to the end of your wp-config.php file.
How to open a pop up window with a button on Beaver Builder?
If you need a button that opens up directly a form with a button, just do this,
- Open your page/post on BB.
- Add the Button Module.
- On LINK click on "Lightbox" (a new HTML window will display for you)
- Add the shortcode, for example, for Gravity forms, the embed code would be something like this:
- Click on SAVE
That's it, you have a pop-up window when someone clicks on a button on Beaver Builder.
How to add some space in a bulleted list so there's extra space between each bulleted item?
Add extra space between each bullet list item.
How to remove the background image in a row on mobile devices?
The first step is naming a row bg-color-mobile. then add this on Additional CSS
How do you remove the white space between the footer and the bottom row in Beaver Builder?
Delete the white space at the bottom of your website just before the footer. Add this code to Aditional CSS.
How to add category taxonomies for pages in wordpress?
Add the category taxonomy to any WP page. Just like a regular post!
How to create a clickable telephone link from a Beaver Builder Button?
Just add tel:+3333333333 to the Button link.
How to create a clickable telephone link for smartphones?
Not BB related but still helpful. Just copy into your HTML text:
<a href="tel:1-888-555-0000">1-888-555-0000</a>
It will look like this: 1-888-555-0000