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 shortcode in the Ken 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 shortcode to a page or post in order to show the items.

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:

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

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

Configuring Animated Column Items

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

Setting Description
Select Column Icon Use this option to select an icon for your Animated Column.
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 a redirected page in the same window or new one.

Displaying Animated Columns Items

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

To show the animated column items:

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

Button Shortcode - visual composer screen

3
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

4
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.

5
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 Columns Shows only the specified items.

Altering the items sorting
x
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
Order Sets the ascending or descending order of the Orderby parameter.
Orderby Sorts the items based on the selected parameter (date, menu order, title, …).

x
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 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

x
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 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 columns 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 columns shortcode. Creating animated columns with different background colors

Animated Columns Shortcode - animated columns

x
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