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.
Displaying a Custom List
To add custom list:
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
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.
