Custom List Shortcode

Updated on December 29, 2017

Create an unordered list on your page or post easily with the custom list shortcode. The list items will be marked with bullets (small black circles) by default. You can use an unordered list whenever the order of the items you want to list is unimportant.

To see the Custom List shortcode in action, check out the demo page.

Custom list shortcode - demo


Displaying a Custom List

To add custom list:

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

Custom list shortcode - visual composer screen

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

Custom list shortcode - add element

4When the shortcode is added, a new pop-up screen called Custom List Settings will open that allows you to configure the shortcode settings.

Custom list shortcode - Custom list settings

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

Configuring the List Settings

There are a few general settings in the custom list settings pop-up.

Setting Description

Title Sets the title above your custom list. This setting is optional.
Add Icon Class Name Or Character Code Adds an icon beside your list item. To find the icon class names,  refer to the article Jupiter Control Panel. Scroll down to the paragraph Icon Library.

Configuring the List Styling

To style your custom list you’ll need to open the tab Design in the custom list settings

Custom list shortcode - configuring the design

There you’ll find the following options:

Setting Description

Icons Color Sets the color of an icon
Margin Button Sets the margin value under the list
Align Sets the list alignment

Now you can click on the Save Changes button and publish or update the page to check the result.

Adding a Viewport Animation

To make the custom list shortcode visible on scroll with animation, there is a setting in the custom list settings pop-up called Viewport Animation. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read the Configuring a shortcode’s entrance animation article.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read the Adding custom CSS class to a shortcode article for further explanation.

Did this answer your question?