Custom List Shortcode

Last Updated on

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

In this article

Displaying a Custom List

To add custom list:

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

Custom list shortcode - visual composer screen

In 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

When 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

Click 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
TitleSets the title above your custom list. This setting is optional.
Add Icon Class Name Or Character CodeAdds 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 ColorSets the color of an icon
Margin ButtonSets the margin value under the list
AlignSets the list alignment

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

Note: Aligning left and right will make the shortcode float, so in order to keep your page elements from wrapping over each other add a padding divider shortcode just after this shortcode.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket