Example 1

This example uses the post slider with a thumbnail image set to left aligned. Best for viewing on large and medium devices.

Text Editor

By Michael Davis | September 23, 2016

Example 1 In this example, we’re using the text editor to place paragraph text and headlines. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula felis ut purus porta, nec fringilla tellus varius. Suspendisse potenti. Nunc pharetra nibh neque, in egestas lorem…

Audio

By Michael Davis | September 22, 2016 |

Example 1 – Self Hosted mp3 Thirteen Thirtyfive by Dillon from the album The Silence Kills. Downloaded free from Last.fm Example 2 – URL Streaming Vivaldi: Autumn from The Four Seasons streaming from mfiles.co.uk

Button

By Michael Davis | September 29, 2016 |

Example 1 A standard solid button with a 4x rounded corner. This button has a transition animation that initiates when the user hovers over the button. The button width is set to auto. CLICK ME Example 2 This is the same button but we’ve set the width to 200px. CLICK ME Example 3 A full width…

Video

By Michael Davis | September 23, 2016

Example 1 This is a self-hosted mp4 file that is set to loop once you have started the video. Example 2 This is a Vimeo embed. Unlike the self-hosted option, there are no settings within the Beaver Builder video module to allow for the video to start automatically or loop indefinitely.

HTML

By Michael Davis | September 23, 2016

Example 1 Using standard HTML such as this form markup produces the form shown below. Enter names in the fields, then click “Submit” to submit the form: First name: Last name: Example 2 By adding JavaScript to the HTML module, we can add functions to the markup to perform certain actions. This examples displays an alert…

Separator

By Michael Davis | September 24, 2016 |

Example 1 Separators can act as simple dividers between content. In this example, we make a single line to divide two examples. Example 2 In this example, we’ve created a dashed line, increased the separator’s width to 5px and changed the colour to yellow. Example 3 In this example, we’ve increased the separator’s width to 15px…

Photo

By Michael Davis | September 23, 2016 |

  Example 1 In this example, we’re displaying a simple image file with a link back to this post. Example 2 In this example, we’re displaying the same image but adding lightbox functionality when clicked. Example 3 In this example, we’re displaying a photo along with the image caption. You can choose to show the caption…

Example 2

If you prefer that your featured image occupies the entire background of the post, select 'background' from the featured image options. Here we've added a left aligned post title and included the content with a blue background. Good for large and medium devices.

Posts

By Michael Davis | September 25, 2016 |

  Example 1 Here we have set up 3 posts with title, author and date displayed. Example 2 This examples shows posts as a gallery with information displayed on hover. Example 3 This examples uses a masonry grid format to display the posts with an excerpt. Example 4 This example uses the feed format with featured images to…

Slideshow

By Michael Davis | September 25, 2016 |

  Example 1 In this example were showing cropped images with a ‘Ken Burns’ effect and fade transition. Slide show starts automatically and we’re handing all controls. This is a good solution for full width rows too. Example 2 Here’s we showing the same slide show but with all controls enabled on hover. This slideshow…

Accordion

By Michael Davis | September 24, 2016 |

  Example 1 In this first example, the accordion is set with default options, showing only the label and a light grey surrounding box. If you open subsequent accordion rows, the others will remain open. Accordion Label 1 This is the accordion content. You add content using a standard WordPress text editor. Using the editor…

Number Counter

By Michael Davis | September 25, 2016 |

Example 1 A simple percentage counter… Go 100% End Example 2 Add prefix and suffix text to your counter. This example is showing a count up to 100 timed over 100 seconds. Count up to 100 Start –100– End Over 100 seconds Example 3 Add a circular indicator and slow down the counter to represent,…

Contact Form

By Michael Davis | September 25, 2016 |

Example 1   This is the default form option with name, email and message fields shown. Example 2 This example would be used to collect names and phone numbers for a support call back form. The form includes name, subject and phone number field and excludes the email field. The button has been styled accordingly. Example…

Posts Slider

By Michael Davis | September 25, 2016 |

  Example 1 This example uses the post slider with a thumbnail image set to left aligned. Best for viewing on large and medium devices. Example 2 If you prefer that your featured image occupies the entire background of the post, select ‘background’ from the featured image options. Here we’ve added a left aligned post title and…

Icon Group

By Michael Davis | September 25, 2016 |

  Example 1 A simple icon group showing a draining battery. In this example, the 4 icons are left aligned, sized at 40px with 30px between them and coloured yellow. Example 2 Within the Icon Group modules individual icon settings is a style tab to assign colours to each icon. In this example the American Express,…

Sidebar

By Michael Davis | September 23, 2016 |

Example 1 In the example below, I have added the Beaver Brains Footer 3 sidebar which shows a text widget displaying the latest Beaver Builder plugin and theme versions. Example 2 In this example, we have created a custom sidebar in WordPress to enable a login and logout widget.

Testimonials

By Michael Davis | September 25, 2016 |

Example 1 In this example we’re showing a slider of testimonials with a customised header. Awesome feedback from our customers What an awesome experience this has been. Our day out hot air ballooning will never be forgotten! We’ll always cherish our night-time hot air balloon experience! Thank you team for a wonderful time. Example 2…

Gallery

By Michael Davis | September 25, 2016 |

Example 1 In ‘Thumbs’ mode, the gallery module will display the thumbnail version of your images. In this example, our thumbnails are set to 150 x 150px in the media library image settings. If you change this to say, 200 x 200px, BB will display that size of image in the gallery module. Example 2 In this…

Example 3

This is a similar example but in this case, we've moved the content to the bottom of the post slider and added arrows to navigate. Good for large and medium devices.

Testimonials

By Michael Davis

Example 1 In this example we’re showing a slider of testimonials with a customised header. Awesome feedback from our customers What an awesome experience this has been. Our day out hot air ballooning will never be forgotten! We’ll always cherish our night-time hot air balloon experience! Thank you team for a wonderful time. Example 2…

Icon Group

By Michael Davis

  Example 1 A simple icon group showing a draining battery. In this example, the 4 icons are left aligned, sized at 40px with 30px between them and coloured yellow. Example 2 Within the Icon Group modules individual icon settings is a style tab to assign colours to each icon. In this example the American Express,…

Call to Action

By Michael Davis

  Example 1 In this example, we’re showing the default ‘in-line’ call to action with a standard headline, description and right aligned button. Ready to find out more? Drop us a line today for a free quote! Click Here Example 2 Here we have opted for a background colour for a stacked version of the CTA…

Number Counter

By Michael Davis

Example 1 A simple percentage counter… Go 100% End Example 2 Add prefix and suffix text to your counter. This example is showing a count up to 100 timed over 100 seconds. Count up to 100 Start –100– End Over 100 seconds Example 3 Add a circular indicator and slow down the counter to represent,…

Sidebar

By Michael Davis

Example 1 In the example below, I have added the Beaver Brains Footer 3 sidebar which shows a text widget displaying the latest Beaver Builder plugin and theme versions. Example 2 In this example, we have created a custom sidebar in WordPress to enable a login and logout widget.

Tabs

By Michael Davis

Example 1 The default tab container shows the tab title with the active tab coloured grey. Tab 1 Tab 2 Tab 3 Tab 1 Tab one content Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It’s also called placeholder…

Slideshow

By Michael Davis

  Example 1 In this example were showing cropped images with a ‘Ken Burns’ effect and fade transition. Slide show starts automatically and we’re handing all controls. This is a good solution for full width rows too. Example 2 Here’s we showing the same slide show but with all controls enabled on hover. This slideshow…

Heading

By Michael Davis

Example 1 A standard H1 heading module, left aligned. This is an H1 heading Example 2 Using the previous example – in this case, we’ve changed the font to Lato Light and set a custom letter spacing. This is an H1 heading Example 3 In this example we’ve set the headline to 28px, right aligned…

Posts Carousel

By Michael Davis

Example 1 In this example, we’re displaying all of our posts and limiting them to 3 per row. You can set the number of posts displayed by manipulating the post width. In order to progress to the next slide, you would need to click on the dot indicators. Example 2 This is a gallery carousel with…

Gallery

By Michael Davis

Example 1 In ‘Thumbs’ mode, the gallery module will display the thumbnail version of your images. In this example, our thumbnails are set to 150 x 150px in the media library image settings. If you change this to say, 200 x 200px, BB will display that size of image in the gallery module. Example 2 In this…

[beaver_tunnels] [/beaver_tunnels]

Leave a Comment