Blog Teaser Shortcode

Last Updated on

The blog teaser shortcode displays blog posts in a unique grid layout. The first section of the grid acts as a slideshow and the second section consists of three side posts.
In this article, we explain how to configure the blog teaser shortcode.

To see the blog teaser shortcode in action, check out the demo page.

Blog teaser shortcode - demo

In this article


Creating Blog Posts

The blog teaser shortcode displays posts from blog posts. To learn more about creating blog posts, read the Creating a blog post article.


Displaying the Blog Teaser

After creating blog posts, you can to add the blog teaser shortcode to a page.

To add the shortcode:

1
Add a new page or edit an existing page.
2
From the Visual Composer screen, click on the + button.

Blog teaser shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Blog Teaser and click on it to be added to the page.

Blog teaser shortcode - add element

4
When the shortcode is added, a new pop-up screen called Blog Teaser Settings opens. It gives you the ability to configure the shortcode settings.

Blog teaser shortcode - Blog teaser settings

5
Click Save Changes and publish or update the page to check the result.

Configuring Slideshow Posts

There is an option in Blog Teaser settings popup that allows you to show the posts based on specific categories. Type the name of category to add them in the fields. The posts will be shown in slideshow.

SettingDescription
Select Specific Categories To Appear In Slideshow Determines categories of blog posts. Posts from the selected categories will be only displayed.

Configuring Side Posts

Below option is related to side posts. It also allows you to show the posts based on specific categories, but in this case they will be shown beside the slideshow box. Type the name of category to add them in the fields. 

SettingDescription
Select Specific Categories To Appear As Side Thumbnails Determines categories of blog posts. Posts from the selected categories will be only displayed.

Configuring Image Height

There is 1 option in Blog Teaser settings pop-up to configure the image dimensions.

SettingDescription
Images Height   Sets a custom image height.

Altering the Posts Sorting

There are 2 settings in Blog Teaser Settings pop-up which allow you to alter the posts sorting. By default, Order and Orderby settings are set to Ascending and Date therefore it sorts the older posts ahead of newer posts.

SettingDescription
Order  Sets the ascending or descending order of the Orderby parameter.
Orderby  Sorts the posts based on the selected parameter (date, menu order, title, …).
x
Note: To learn more about these settings, read Configuring shortcode’s sorting settings article.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket