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.

Posts Slider

By Michael Davis | September 25, 2016

  Example 1 This example uses the post slider with a thumbnail image set to left aligned. Best for viewing on large and medium devices. Example 2 If you prefer that your featured image occupies the entire background of the post, select ‘background’ from the featured image options. Here we’ve added a left aligned post title and…

Posts

By Michael Davis | September 25, 2016

  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…

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…

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…

Slideshow

By Michael Davis | September 25, 2016

  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…

Number Counter

By Michael Davis | September 25, 2016

Example 1 A simple percentage counter… Go 100% End Example 2 Add prefix and suffix text to your counter. This example is showing a count up to 100 timed over 100 seconds. Count up to 100 Start –100– End Over 100 seconds Example 3 Add a circular indicator and slow down the counter to represent,…

Countdown

By Michael Davis | September 25, 2016

  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…

Social Buttons

By Michael Davis | September 25, 2016

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.  

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…

Accordion

By Michael Davis | September 24, 2016

  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…

[beaver_tunnels] [/beaver_tunnels]

Leave a Comment