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.
Tabs
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…
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 MoreText Editor
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…
Read MoreMenu
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 MoreIcon Group
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,…
Read MoreIcon
Example 1 This example shows a simple icon with right aligned text. Text is controlled through the WordPress editor so you can set it as a heading or paragraph text accordingly Example 2 In this example, we’re using an icon on its own – the icon is coloured white with a blue circular background. Backgrounds…
Read MorePhoto
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…
Read MoreVideo 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
Read MoreAccordion
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…
Read More