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.
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…
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 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 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 MoreSeparator
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…
Read MoreTabs
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 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 MorePosts
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…
Read MoreSubscribe 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…
Read MoreTestimonials
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…
Read More