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.
Heading
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…
Read MoreVideo
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 MoreContact Form
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…
Read MoreSocial Buttons
Example 1 This example shows the default display of all of the social buttons – Facebook, Twitter and Google+. Other than limiting which buttons are displayed there are no other settings to adjust.
Read MoreGallery
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…
Read MoreHTML
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 MoreCopy of Heading
The heading module allows you to choose any one of your HTML heading tags, and then override the colour, size and font as you need. Set the heading left, centre or right aligned within the layout row.
Read MoreSlideshow
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…
Read More