Lite

These templates work with the free Beaver Builder Lite plugin and above.

Tutorial status:  •  ready  |   •  in progress  |  •  coming

Sort by:
Skill Level:
Template Type:
Plugin Type:

Filters

Sort by:
Skill Level:
Plugin Type:
Template Type:

Responsive Grids

- -

A simple CSS tweak to give more flexibility creating responsive grids using Beaver Builder columns.

Contributor:
Example
Last Updated:

Image Swap on Hover

- -

This shows a column (or child column) background image until a mouse hover show the Beaver Builder photo module image.

Contributor:
Example
Last Updated:

Row Background Blend modes

- -

This row template contains the CSS blend mode info to create some nice blends between Beaver Builder background colors and images.

Contributor:
Example
Last Updated:

Animated Social Icons

- -

A collection animated social icons using the Beaver Builder HTML module.

Contributor:
Example
Last Updated:

Separators

- -

A collection of styled separators (horizontal rules) using the Beaver Builder HTML module. Helps Beaver Builder Lite user who do not have the Separator module.

Contributor:
Example
Last Updated:

Fancy Headings

- -

A collection of CSS styled headings using the Beaver Builder heading module.

Contributor:
Example
Last Updated:

Image Hover Effects

- -

A collection of CSS hover over effects for the Beaver Builder Photo Module. Use the Beaver Junction plugin to audition and tweak these before committing to your site.

Contributor:
Example
Last Updated:

Image Scroll on Hover

- -

A simple CSS effect often used on website portfolios. A long image is set to shows only the top part, but on hover scrolls to show the rest.

Contributor:
Example
Last Updated:

Sticky Columns

- -

This uses the “sticky” CSS position to make columns (and other things in Beaver Builder) float. Useful for floating sidebars, ecommerce carts, story chapters and special effects.

Contributor:
Example
Last Updated:

HomePage Framework One

- -

An experimental wireframe for building Beaver Builder homepages. It aims to be a guide for gathering content, setting up brand assets and layout.

Contributor:
Example
Last Updated:

Bullet Point Lists

- -

Custom bullet point list items using only HTML and CSS. An flexible alternative to the Beaver Builder List Module.

Contributor:
Example
Last Updated:

Clickable Columns

- -

This is one of our favorite snippets that makes a whole column clickable to the link (anchor tag) added to it. It’s flexible alternative to the Beaver Builder Callout and Call to Action modules.

Contributor:
Example
Last Updated:

Price List & Business Hours

- -

Simple mobile responsive lists using the HTML module. Add background styles with the column settings.

Contributor:
Example
Last Updated:

Faster YouTube Videos

- -

This uses the Beaver builder HTML module and speed up page load by serving only YouTube thumbnail until the play button is clicked.

Contributor:
Example

Gardener Template

- -

A homepage design using the HomePage Framework One template.

Contributor:
Example

Handyman Template

- -

A homepage template for handymen or other single person trade businesses. Made from the Homepage Framework One.

Contributor:
Example

Bottom Aligned Modules in Columns

- -

A simple CSS snippet that let you align modules to the bottom of columns.

Contributor:
Example

Animal Farm Template

- -

A home page template made from HomePage Framework One.

Contributor:
Example

Accordion

- -

A simple CSS and JS accordion using the Beaver Builder Text module. Best for Beaver Builder Lite users.

Contributor:
Example

Row Shape Textures

- -

A collection of rows that use background shapes to created abstract textures.

Contributor:
Example

Team Gallery

- -

An interactive gallery using custom CSS JS and Beaver Builder column, text and html modules.

Contributor:
Example

Exit Intent PopUps

- -

This uses a hidden Beaver Builder HTML module to display a popup. It works with Beaver Builder Lite, but is more flexible with Beaver Builder templates.

Contributor:

Horizontal Tabs

- -

This uses the Beaver Builder HTML module and custom HTML, CSS and JS. It was adapted from W3 Schools.

Contributor:
Example

Typography Fun

- -

This is a collection of… still need to sort out a format for this.

Contributor:
Example

Blockquotes

- -

A collection of CSS styled blockquotes using the Beaver Builder text module.

Contributor:
Example

Overlapping Photos

- -

A page layout with that uses CSS ( z-index and positioning ) to overlay image that can be edited individually.

Contributor:
Example

Text boxes overlapping images

- -

Experiments using CSS (z-index and positioning) along with background row shapes for out of the box designs.

Contributor:
Example

Modal Box with Button

- -

A simple modal (popup) with CSS and JS taken from W3 Schools.  It uses a Beaver Builder shortcode to show a saved template. Beaver Builder Lite users will need to add some HTML.

Contributor:
Example

Pricing Table with Tooltips

- -

This uses Beaver Builder columns, text modules and HTML modules with custom CSS and JS.

Contributor:
Example

Pricing Table with Switcher

- -

This uses Beaver Builder columns, text modules and HTML modules with custom CSS and JS.

Contributor:
Example

Pricing Table with Ribbon

- -

This uses Beaver Builder columns and the text modules with custom CSS.

Contributor:
Example

Buttons

- -

A collection on buttons with CSS. Some have animation and use the HTML module rather than the Beaver Builder button module.

Contributor:
Example