This article will show you how to add the “Numbered List” element to your post or page and how to customize it.
Add the Element
In order to add the element to your post/page, go to the right sidebar and click on the plus sign:
Then, a list of all the Thrive Architect elements will open. Look for the “Numbered List” element or search for it in the search bar:
Drag and drop it anywhere you want on your page:
You will notice the “Main Options” section of the element on the left sidebar. Here is where you can customize the number of list elements, starting number, and so on.
Use the Main Options
The first option from this section is the “Starting Number” one. The "Numbered List" element can start from whichever number you prefer. The default value is 1, but you can change it.
To do that, click on the field next to the option, delete the default value, and simply enter the value that you want.
You can also adjust the value by clicking on the up/down arrows and dragging them upwards or downwards:
After you’ve set the starting number, you have the option to set the increment for the numbered list. To change the default value, which is 1, you can either enter a number in the field next to the “Increment” option or use the up/down arrows:
If you want to change the font of the numbers from the list, you can do that using the next option, which is the “Number Font” one. To do that, click anywhere on the field next to the option:
A small pop-up will open, where you have to choose the source of the font. To do that, click on the field below the "Source" option:
This will open a drop-down menu with various source types that you can choose from:
Simply click on the source you want to choose and then continue with selecting the font, based on the source type you have chosen.
Source: Google Fonts
If you choose “Google Fonts” as a source, click on the field next to the “Font” option to choose a font:
The other fields will fill up automatically with the font settings after choosing one. For some of the fonts, you will be able to adjust the font settings using the drop downs from the font setting fields. Then, click on “Apply”:
Source: Web Safe Fonts
If you choose the source “Web Safe Fonts”, the pop-up will look like this. In order to choose a font, click anywhere on the field below the "Font" option:
This will open a drop-down with the available "Web Safe Fonts" that you can choose from:
Select the one you would like to use by clicking on it and when you’re done, click on “Apply":
Source: Inherit Landing Page Font
The last source is the “Inherit Landing Page Font”, which will use the font of your Landing Page. If you want to do that, choose the option from the drop-down and then click on “Apply”:
List Item Spacing
After the font has been selected, you will be able to set the spacing between the list items. To do that, either drag the slider to the left or enter a numerical value in the box next to the slider:
List Element Items
The last section of the “Main Options” allows you to add a new item/rearrange the items from the list, or delete them.
- If you want to add a new item to the list, click on the “Add new” button:
You can add as many list element items as you want.
- If you want to rearrange the elements in the list, hover over the dotted side of one of the elements, until you see the “move” icon:
Then, click to grab the list element and drag it anywhere you want (in between, before, or after the other list elements):
- Lastly, you can delete list elements by clicking on the trash can icon next to them:
These were the ways in which you can customize the "Numbered List" element using its “Main Options”.
If you want to know how to use the rest of the options from the left sidebar, make sure to take a look at the articles and tutorials from our Knowledge Base.
Use the Group Styling
"Group Styling" is applied in the case of the "Numbered List" element. This way, besides using the "Main Options" and the general options, you can also use the "Group Styling" feature to further customize your "Numbered List".
"Group Styling" will help you modify parts of the "Numbered List" element in a fast and easy manner.
In order to do this, first, click on either a number or a text of the "Numbered List" element, you will see the “Currently styling” section on the left sidebar:
This section is where you can choose what exactly you want to customize:
- Grouped List Items
- Grouped Figures
- Grouped Texts
To select any of those, click on the field below “Currently Styling”:
A drop-down menu will open. Click on the one that you want to customize:
Below the "Currently Styling" section, various options will be displayed in the left sidebar, based on what grouped elements you choose to customize.
Grouped List Items
The first option from the drop-down menu is the "Grouped List Items" one. This allows you to edit the list of items as a whole. Click on it in order to select it:
As an example, if I select this option from the dropdown, then go to the “Background Style” section of the left sidebar and choose a background style, this will be the result:
As you can see, when I selected the “Radial Gradient” option for the “Background Style”, it applied to each one of my list element items.
This will work the same for all the other options from the left sidebar ( e.g. Layout&Position, Borders&Corners, etc.)
The second option is the "Grouped Figures" one:
If you choose it from the drop-down menu, this means that you will only customize the figures and not the text. This means that the modifications that you make will only be applied to the numbers of the "Numbered List" element.
For a better understanding, I will use the same example I used above. If I were to add and customize a “Background Style” while having the “Grouped Figures” option selected, the “Numbered List” element will look like this:
As mentioned before, the modifications I make using the options from the left sidebar will only apply to the number fields.
The last option from this drop-down is "Grouped Texts":
Similar to the “Grouped Figures” option, this one allows you to edit the text fields alone. This means that, If I use the same gradient effect as the “Background Style”, as used in the two cases described above, the element would look like this:
Deactivate Group Styling
If you do not wish to customize the elements as groups, but rather you want to customize them individually, one by one, you will have to deactivate "Group Styling".
In order to do that, click on the specific item you want to customize separately. Then, click on the “Lock-Unlock” button that will be displayed in its upper left corner, or on the one that is in the “Currently Styling” box:
This way, "Group Styling" will be deactivated and you will not customize this element of the list simultaneously with the elements of the same level. Thus, the changes that you bring to the element you have selected will only be applied to that specific element.
Exit Group Styling
If you have finished customizing the different parts of the "Numbered List" you can use the "Exit Group Styling" option from the "Currently Styling" section:
This will take you back to the “Main Options” of the “Numbered List” element, described above. You can also go back by clicking on “Numbered List” in the breadcrumbs:
These are all the ways in which you can customize the "Numbered List" element. If you need more information about various Thrive Architect elements, make sure to check out our Knowledge Base.
If this article was useful for you, please make sure to rate it below :)