Beaver Builder learning
Freshy Best Practices
- Add the text colors via the Row settings instead of the individual text module settings when applicable
- Save rows and modules for future use
- Since there are no “Presets” like in Divi, it’s best to save any unique styling as a saved module instead
- Go through Customizer Options for the default styling of text, headings, and fonts
Basic Stuff
- To add custom CSS > under Customizer > Additional CSS
- Callout module = Divi Blurb
- Default Button Styling: Customizing > General > Buttons
- 3:00 – area to paste in header/footer code, Appearance > Customizer > Code
- 19:00 – Rows with several columns inside and rows inside columns too
- 21:00 – reverse column stacking built-in to column settings, no need for .stacked-flex
- Column gutters – use % in column margins – example
- Button Module – Click Action – popup with HTML or video
- Tabs Module – can be populated with a post type
How-tos
- Linking to tabs
- How to duplicate a global element and then make the duplicate not global
- Simple mega menu
- Get buttons in the callout module to be aligned
- Get buttons in posts aligned to bottom
- Add
body:not(.fl-builder-edit)to your CSS if you don’t want a custom style to effect the visual builder. - Add a Youtube/Vimeo video – just use the Video module and the URL of the video not the iframe – source
- Beaver Builder – Adding a Carousel to the Gallery Module
- Post template – creating a “Related Posts” section
- BB Themer – Divi Layout injector = Part layout type
- Limit search to certain post types
- add more icons
- Show ACF Fields
- Export Saved Rows, Columns, Modules
Some Cool Things
- Create a Ken Burns effect in a row background
- Hover effects – built in css classes you can add
Q&A
Q: Is there a way to do Global rows, columns, modules but be able to “unsync” some options like in Divi?
A: No doesn’t seem to have that capability BUT you can use ACF to add a field like “Page subheading” and then create a global row with the dynamic active for a text module looking for that page subheading.
Q: Is there a way to copy settings and styles from one row/column/module to another?
A: Yes – https://docs.wpbeaverbuilder.com/beaver-builder/layouts/advanced-tab/copy-paste
this is the difference between copy settings and copy styles
BB & Plugins*
*As of right now, the “builder” login for BB sites doesn’t have the ability to add plugins. This is in order to give us pause and re-evaluate if we really need a plugin or can we do a “Quick Help” task in Dev Board to see if they have alternatives. However, if you know you need a plugin (e.g. SVG support plugin) you can go ahead and login with the wp email in BW instead to add it.
PowePack for Beaver Builder
Ultimate Addons for Beaver Builder
Preferred events calendar for BB: The Events Calendar integration
WooCommerce & BB (potential plugin if needed)
ACF + BB Conditional Logic (examples / advanced conditional logic examples)- “ONLY Show X if entered in” – live example – social media links in listing
Breakpoints
- Extra Large: This breakpoint is for devices with a screen width of 1200px or more.
- Large: This breakpoint is for devices with a screen width of 993px to 1200px.
- Medium: This breakpoint is for devices with a screen width of 769px to 992px.
- Small: This breakpoint is for devices with a screen width of 768px or less.
NEW coming soon