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 a hover effect. In this example we've removed the dot indicators and added the left and right arrows.

Example 3

By removing the featured image and adding in the post content, you can created a post preview block. In this example we've opted to make the post column heights equal.

Menu

By Michael Davis | September 25, 2016

  Example 1 This is the default menu module layout showing a simple menu with a 15px font, spaced at 10px between links. Example 2 In this example we’re showing a menu with sub-items, indicated by including a down arrow. Example 3 In this example we’ve taken the same menu and applied a background and…

Read More

Posts Carousel

By Michael Davis | September 25, 2016

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…

Read More

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.

Read More

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…

Read More

Content Slider

By Michael Davis | September 25, 2016

Example 1 This is the default image slider  set to show only images as slide backgrounds. If your images have different height dimensions, the slider will automatically crop them to the slider height size. Example 2 This example shows the content slider headline and text followed by a call to action button and a right…

Read More

Subscribe Form

By Michael Davis | September 25, 2016

Example 1 This is the standard, stacked subscribe form set to collect name and email address. Example 2 In this example we’ve opted to collect emails only and created an inline form and button. Example 3 Using the standard Beaver Builder button settings, we can add icons and style the button to suit the page…

Read More

Pricing Table

By Michael Davis | September 25, 2016

  Example 1 The default pricing boxes with the pricing row highlighted. Item 1 $20 per Onth Feature 1 Feature 2 Feature 3 Get Started Item 2 $35 per month Feature 1 Feature 2 Feature 3 Get Started Example 2 In this example, we’re placing more emphasis on item 2. Item 1 $20 per month…

Read More

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

Read More

Video Row Backgrounds

By Michael Davis | September 22, 2016

Example 1 In this example we’re showing a full-width video row background with a Vimeo embedded video. Our little feature is the incredible LA Gifathon from James Curran streaming direct from Vimeo. Create full-width Vimeo & YouTube Row backgrounds with Beaver Builder Video features the awesome LA Gifathon by James Curra on Vimeo

Read More

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…

Read More
[beaver_tunnels] [/beaver_tunnels]

Leave a Comment