Animated Columns Shortcode

Updated on December 29, 2017

Use animated columns to display the content on your website in a stylish and compact way. You can create different layouts and effects, add images or icons and make the column behave differently on hover.

To add animated columns in the Jupiter theme, you’ll need to follow two main steps. The first step is to create the animated column items and the second is to add the animated columns shortocode to a page or post in order to show the items.

To see animated columns in action, you may check out the demo page.

Animated Columns Shortcode - demo


Adding Animated Columns Items

Before adding the shortcode, animated column items need to be created and configured.

To add a new item:

1From WordPress left menu, click on Animated Columns > Add New.

Animated Columns Shortcode - add new

2Enter a title, short description and fill out other necessary information.
3Click Publish.

Configuring Animated Column Items

Once the item is created, you will be presented with bunch of options to add content to your animated columns.

Animated Columns Shortcode - Animated Columns Options

Setting Description

Icon type Choose between having an icon or image.
Custom title Sets the column title.
Columns short description Adds a short description to the column.
Button URL Adds a button to the column. It is important to add https:// at the beginning of URL.
Button text Adds text to the button.
Button target Sets if clicking the button will open redirected page at the same window or new one.

Displaying Animated Columns Items

After adding animated column items, it’s time to show them in a page or post on your website.

To show the animated column items:

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

Animated Columns Shortcode - visual composer section

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

Animated Columns Shortcode - add element

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

Animated Columns Shortcode - Animated Columns settings

5Click Save Changes and publish or update the page to check the result. It shows some of your animated column items.

Showing Specific Items

There is one setting in animated columns settings pop-up which allow you to show the items based on specific ID or title: Select Specific Animated Columns.

Setting Description

Select Specific Animated Columns Shows only the specified items.

Altering the items sorting

There are two settings in animated columns settings pop-up which allow you to alter the items’ sorting: Order and Orderby

By default, the order and orderby settings are set to Ascending and Date therefore it sorts the older items ahead of newer items.

Setting Description

Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the items based on the selected parameter (date, menu order, title, …).

Configuring the Items Layout

There are some settings in Animated Columns Settings pop-up to customize layout of the columns:

Setting Description

Column height Sets a custom height (in px) to this set of columns.
Number of columns Sets the number of columns in one row.
Column content & style Switches between having only Icon + Title or a fully featured column with all the content


Configuring the Items Design

There are some settings in Animated Columns Settings pop-up to customize the default styling.

Setting Description

Title font size Sets the title font size.
Columns border color Sets the column box color.
Columns background color Sets the column background color.
Columns background hover color Sets the column background color on hover.
Icon size Sets the icon size of the column.
Icon color Sets the column icon color.
Icon hover color Sets the column icon color on hover.
Text color (active) Changes the title and description color. Description will have 70% opacity.
Text color (hover) Changes the text color on hover.
Button color (active) Sets the button color.
Button color (hover) Sets the color for button hover.

Each animated column shortcode can have multiple columns, but you can only use one background color for all those columns. If you want to have columns with different background colors, you should recreate the layout in visual composer shown on the screenshot below. Now, you can go over each animated column settings and set a different color for background. Make sure to set number of columns to 1 for each animated column shortcode.

To create animated columns with different background colors, create a layout like shown below:

Animated Columns Shortcode - animated columns


Adding an Entrance Animation

To make the animated columns items visible on scroll with animation, there is a setting in testimonial settings pop-up which is called Viewport Animation. The usage of this setting is easy and straightforward but if you need an step by step tutorial, read Configuring shortcode’s entrance animation article.

Did this answer your question?