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.
Adding Animated Columns Items
Before adding the shortcode, animated column items need to be created and configured.
To add a new item:
Configuring Animated Column Items
Once the item is created, you will be presented with bunch of options to add content to your animated columns.
| 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:
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:
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.
