Styling Beaver Builder Buttons Globally using a CSS Snippet
Styling buttons in Beaver Builder can be quite a lengthy and tedious task and if a change has to be done over many pages the task becomes more onerous. The Builder Module UI covers most aspects of the style but is missing elements such as borders and shadows and the RGBA color model for colors.…
Read MoreChange the Keyboard Shortcut Keys in Beaver Builder 2 Plugin
You can modify the Beaver Builder keyboard shortcut keys in the new version 2 of the plugin by using a filter – fl_builder_keyboard_shortcuts that you add to your themes functions.php file, example below add_filter( ‘fl_builder_keyboard_shortcuts’, ‘get_keyboard_shortcuts_mine’ ); /** * Modify the Beaver Builder 2 Keyboard shortcuts */ function get_keyboard_shortcuts_mine( $data ) { $data[‘showModules’][‘keyCode’] = ‘m’;…
Read MoreOverride the Beaver Builder Global Settings Including Media Query Breakpoints
Beaver Builder Global Settings can be overridden including the Media Query breakpoints via the Tools > Global Settings in the Beaver Builder interface. If you have a starter theme you can permanently override these settings by using the fl_builder_register_settings_form filter which will allow you to set the modified global settings permanently so you don’t…
Read MoreAdd a Back to Top Scroll Button on a Beaver Builder Page
Here is a way to add a quick scroll to top icon on a particular Beaver Builder page, this will only load on the page in question as instead of enqueuing it in functions.php we’ll add the code straight to the custom CSS/JS boxes in the page builder. Open the page in Beaver Builder…
Read MoreAdd Custom Logo Schema to Beaver Themer Header Layout
Custom Logo was introduced in WordPress 4.5 and provides a way to upload your main logo to your header and display microdata logo schema for a company, here is a way to include it in a Beaver Themer header layout in Beaver Builder. Beaver Themer already outputs microdata schema for the header and footer html…
Read MoreBackground Images Disappearing in Beaver Builder on Site Deployment
Having a WordPress website built with Beaver Builder may lose its CSS background images when deploying from one location to another, this may be from local/staging to production or swapping between webhost environments. This can be typically resolved by nuking the Beaver Builder cache either via the Dashboard > Settings > Page Builder > Cache Or…
Read MoreFix the Gap in Unordered Lists From Columns In Beaver Builder
If you split 2 unordered lists into columns in Beaver Builder at desktop size, the results will look a little uneven at the smaller viewport on tablet or mobile. You could create a duplicate of the module and show/hide based on viewport or you could fix in CSS by adding a CSS class…
Read MoreUsing Beaver Builders’ new Beaver Themer with Genesis Themes
Beaver Themer is a new add on being developed by the Beaver Builder team to be used with Beaver Builder and can be used with the Genesis Framework, the product is currently in Alpha build and is available for download by anyone with a valid license. It currently can be used on any theme to build…
Read MoreAdding a Full Width Background Image Behind Genesis Header with Beaver Builder
You can add a full width image background behind the site header in Genesis with Beaver Builder with a couple of CSS tweaks. By default when creating a Beaver Builder page in Genesis it’s width will be restricted by the theme’s CSS and you will get something similar to… First thing is…
Read More