Do you want to organize information more clearly and guide your users step by step? By using a Numbered List, you can easily present instructions or details in a logical sequence, making content easier to follow and understand.
In this article, we’ll show you how you can add a Numbered List using Thrive Architect and customize it further.
- Adding a Numbered List Element on Page
- Using the Main Options of the Numbered List Element
- Editing the List Element in a Numbered List
- Editing the State of Numbered List Items
- Using the Other Options of a Numbered List Element
Adding a Numbered List Element on Page
To add the Numbered List element to a page, begin by opening the page in the Thrive Architect editor. To do so, open your WordPress admin area, Pages >> All Pages, hover on the page you want to edit and click Edit with Thrive Architect.
When the page is opened in the Thrive Architect editor, go to the right panel and click the plus (+) icon.
Clicking on the plus icon will open up the list of Thrive Architect elements to choose from. From this list, drag and drop the Numbered List element on the page.
When you drag and drop the Numbered List element on the page you’ll see it added in the editor. To customize this element further, click the element to open its settings in the left column.
Using the Main Options of the Numbered List Element
The Main Options of the Numbered List element allow you to customize the main look and feel of it. They enable you to do the following.
- Setting a Starting Number
- Setting an Increment in a Numbered List
- Selecting a Font for the Numbers
- Managing the Spacing Between List Items
- Adding New List Items
- Deleting a List Element in a Numbered List
Setting a Starting Number
The Starting Number setting allows you to select the number from which the numbered list will begin.
To set a starting number, enter the number in the field beside the setting.
Setting an Increment in a Numbered List
The Increment setting under the Numbered List element’s Main Options lets you decide the increment you want the list to proceed with.
For example, if you set the increment to 2, the numbers in the list will be 1,3,5,7, and so on.
To set the increment, select a number in the field beside this setting.
Selecting a Font for the Numbers
The Number Font setting lets you set the font style for the numbers in the numbered list. By default, the numbers inherit the font style from the landing page.
To change the font style of numbers, start by clicking on the field beside this setting.
When you click to edit the number font, you’ll see a field where you have to select the font source.
Clicking to select the number font source, you’ll see different sources that you can select from.
- Google Fonts
- Web Safe Fonts
- Font Library
- Inherit Landing Page Fonts
In this example, we’ll select Google Fonts as the source. When you select the source, you’ll see a fresh set of fields where you have to select the font and its attributes.
After you finish setting that up, click Apply.
Managing the Spacing Between List Items
The items in a numbered list are placed one below the other. The List Item Spacing setting allows you to set the spacing between the items.
To edit the spacing between list items, use the slider or the field given beside the setting.
Adding New List Items
A numbered list is made up of multiple List Items called List Elements – 3 are added by default, while you can add as many as you want in the list.
To add a list item, click on the Add New button under the List Elements in the left column.
Clicking the Add new button will automatically add a list element to the numbered list.
Deleting a List Element in a Numbered List
A List Element is a List Item inside a Numbered List. To delete a list element, click on the trash can icon on the one you want to delete.
Editing the List Element in a Numbered List
After editing the main Numbered List, to edit the individual List Elements or Items inside it, click on a list element on the page and see its settings open in the left column.
When you click on a List element, you can either edit an individual list item or continue with Grouped styling. To decide this, in the left column, open the Currently styling section and select the group you want to edit.
Clicking on the dropdown will display group options that you can select and edit individually.
To unlink or edit individual list item elements in the numbered list, click on the lock icon beside the dropdown.
Click on the lock will unlock the selected element from the group. This can be identified when the lock is replaced by an open lock.
Each of the numbered list elements whether grouped or un-grouped have Main Options that will help you customize and style it as you want.
To exit the grouped styling of numbered list elements and go back to customizing the numbered list as a whole, click the Exit Group Styling link.
Editing the State of Numbered List Items
Like a few other Thrive Architect elements, the list items or elements inside the Numbered List element come with two states – Normal, for when it is seen on the page, and Hover, for when a user hovers over it.
You can customize to change the look and feel of the list items in both these states.
To change the state, click on a List element to open its editing options in the left column.
In the left column, change the State of the list element by clicking the down arrow besides Normal.
When you click to change the state, you’ll see two states that you can select from and edit the list item accordingly.
To edit the list item styling that’ll show up when the user hovers on it, select the Hover state here.
When you select the Hover state of the list item, you’ll see the available settings for this state in the left column.
To know more about this, read our article about Hover effects in Thrive Architect.
Using the Other Options of a Numbered List Element
Just like the other Thrive Architect elements, the Numbered List element comes with additional options where you can manage the layout and positioning, borders and corners, background styling, shadows, etc.
To learn more about these options, read the documents listed below.
- Using Typography Options in Thrive Architect
- Using Layout and Position Options in Thrive Architect
- Using the Background Style Option in Thrive Architect
- Using Borders and Corners Settings in Thrive Architect
- Using Animations and Actions in Thrive Architect
- Adding Shadows to Thrive Architect Elements
- Using the Responsive Option in Thrive Architect
- Using HTML Attributes in Thrive Architect
We’ve just seen how you can add and customize a Numbered List element on a page using Thrive Architect. You can take a look at the visual tour in the video below.
Next, if you want to use a bulleted list on a page, you can refer to our article about using the Styled List element in Thrive Architect.