Add full screen window canvas to back to icons when searching in Beaver Builder
In a recent Beaver Builder update the canvas size for an icon search was humbly shrunk as some users didn’t like the vast open lands of icon city. With a bit of CSS code injected into the backend, the icon canvas size can be resized back to its former glory. Add the above code to…
Read MoreAdding Bootstraps Collapse to a Beaver Builder button and module
If you have the Beaver Theme here is how you can add Bootstraps Collapse effect to a Beaver Builder row or module can be achieved using the Bootstrap data-toggle attribute. Let’s say you have a button which when clicked reveals a module below it and another click hides the module again. As below… Example Pellentesque…
Read MoreAdding jQuery Slide Toggle to a Beaver Builder button and module
Adding a jQuery Slide Toggle effect to a Beaver Builder row or module can be achieved with some Javascript and CSS. Let’s say you have a button which when clicked reveals a module below it and another click hides the module again, give the button a class of .trigger-button and the module an ID of…
Read MoreEqual Heights after Search & FIlter Pro Ajax Refresh
Using Search & Filter Pro with a grid of items that have equal heights set may loose their equal heights after a S&F filter on the same page Ajax refresh. You can pass in some jQuey to Search & Filter Pro callback sf:ajaxfinish (function($){ $(function() { // Document Ready // detects the end of an…
Read MoreHow to Add Web Fonts to Beaver Builder Plugin and Theme
You can add other fonts to Beaver Builder Plugin modules such as the heading module etc by first enqueuing the fonts and then using a filter to add them for the font selection of the plugin modules. Before you do this you need to enqueue the fonts so the plugin can recognise them which you…
Read MoreAdd Search & Filter Pro with Ajax Reload to Beaver Builder Post Masonry Grid
You can use Search and Filter Pro with Beaver Builders Themer Post Module grid masonry layout with Ajax reload. This guide goes through the tweaks needed and uses a custom post type archive page with a Post Grid module that uses the main query with a masonry layout. Create your Posts Module CPT Archive Page…
Read MoreCreate a content flyout overlay in Beaver Themer Layout Header
This is a starter guide to get you up and running with an overlay flyout on click of hidden content in Beaver Builder – there is nothing indeed Beaver Builder specific about it other than it’s easy to build the overlay content within the builder itself, display it normally in the BB editing screen but…
Read MoreOutput Beaver Builder CPT Posts in a Module that belong to a Custom Taxonomy
Using Beaver Builder loop modules to output posts can be limited when you want to output a CPT that belongs to multiple custom Taxonomies but you only want posts to display from one taxonomy – this can be achieved in code using the fl_builder_loop_query_args filter. View the code on Gist. In the above code snippet…
Read MoreOverride the Beaver Builder LightBox Plugin
Here is a quick guide on how to override the Beaver Builder Lightbox plugin in which you may wish to run another lightbox plugin instead. If you are using the Beaver Builder plugin, then add in your theme’s function.php add_filter( ‘fl_builder_override_lightbox’, ‘__return_true’ ); Additionally, if you are running the Beaver Builder Theme then you need…
Read MoreAdd Link Tag to Whole Column in Beaver Builder Layout
To add a link to a whole column in a Beaver Builder layout you need to use some jQuery to add the link tag markup to make the whole column clickable. This post has 2 solutions the first is the simpler one with no CSS just some jQuery – the second one is more long…
Read More