Animated Columns Shortcode

Last Updated on

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

In this article

Adding Animated Columns Items

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

To add a new item:

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

Animated Columns Shortcode - add new

Enter a title, short description and fill out other necessary information.
Click 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 typeChoose between having an icon or image.
Custom titleSets the column title.
Columns short descriptionAdds a short description to the column.
Button URLAdds a button to the column. It is important to add https:// at the beginning of URL.
Button textAdds text to the button.
Button targetSets 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:

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

Animated Columns Shortcode - visual composer section

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

Animated Columns Shortcode - add element

When 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

Click 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 ColumnsShows only the specified items.

Altering the items sorting
Note: To learn more about this setting, read Configuring specific items in a shortcode article.

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
OrderSets the ascending or descending order of the Orderby parameter.
OrderbySorts the items based on the selected parameter (date, menu order, title, …).

Note: To learn more about these two settings, read Configuring shortcode’s sorting settings article.

Configuring the Items Layout

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

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

Note: The column height is depended on its content. For example, if you set the height to 400px but you have a long content, the height will be automatically set to the content height not your preferred height.

Configuring the Items Design

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

Setting Description
Title font sizeSets the title font size.
Columns border colorSets the column box color.
Columns background colorSets the column background color.
Columns background hover colorSets the column background color on hover.
Icon sizeSets the icon size of the column.
Icon colorSets the column icon color.
Icon hover colorSets 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

Note: If you need to go beyond the default settings to customize the look and feel of the item’s design, you may add a custom CSS class in Extra Class Name setting to be able to add specific styling through CSS to this shortcode. To find out more information, read Adding custom CSS class to a shortcode article.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket