Posts Carousel
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.
Video Row Backgrounds
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
HTML
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
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…
Subscribe Form
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…
Call to Action
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…
Call Out
Example 1 In this example, we show a call out with a left aligned icon and H3 heading text. Do something today The standard call-out box includes a Heading and description text much like the Call to action module. However, with the call out module you have a few extra features to use such adding images…
Video
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.
Countdown
Example 1 The default number counter shows days, hours, minutes and seconds. There are no options to display years. The number counter is always centrally placed in the column or row. Day Hour Minute Second Example 2 Change the number and text size and colour and add a separator between them. Day Hour…
Map
Example 1 This is the default map displayed with 400px height. Example 2 This map is shown with a 200px height.
Slideshow
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…