Account
Sign in to you account
Sign In Sign Up

How to Create A Numbered List In Elementor?

5 minutes read

To create a numbered list in Elementor, follow these steps:

  1. Open Elementor and go to the page where you want to add the numbered list.
  2. Add a new section or select an existing section where you want to add the numbered list.
  3. Drag and drop the "Text Editor" widget into the section.
  4. In the text editor, type out your list items with each item on a new line.
  5. Highlight the list items that you want to turn into a numbered list.
  6. Click on the "Numbered List" icon in the text editor toolbar.
  7. Elementor will automatically add numbers to your list items, creating a numbered list.


That's it! You have now successfully created a numbered list in Elementor.


How to add a background color to the numbers in a numbered list in Elementor?

To add a background color to the numbers in a numbered list in Elementor, you can follow these steps:

  1. Open the Elementor editor and navigate to the section where your numbered list is located.
  2. Click on the numbered list widget to select it.
  3. In the left sidebar, go to the "Style" tab.
  4. Scroll down to the "Numbering" section.
  5. Click on the color picker next to the "Number Color" option and choose the color you want for the numbers in the list.
  6. To add a background color to the numbers, you can either use custom CSS or a workaround method by adding a background color to the entire list item.
  7. If you choose to use custom CSS, you can add the following CSS code to the "Custom CSS" section in the "Advanced" tab: 
1
2
3

.your-numbered-list-class li:before {
   background-color: #f1f1f1; /* Change the color to your desired background color */
}


Replace .your-numbered-list-class with the actual class of your numbered list widget.

  1. If you prefer the workaround method, you can add a background color to the entire list item by using the following steps: Go to the "Advanced" tab in the left sidebar. Scroll down to the "Custom CSS" section. In the "CSS ID" field, add a unique ID such as "numbered-list" (without quotes). Then add the following CSS code to the "Custom CSS" section: 
1
2
3

#numbered-list li {
   background-color: #f1f1f1; /* Change the color to your desired background color */
}


Replace #numbered-list with the ID you set for your numbered list widget.

  1. Click on the "Update" button to save your changes and preview your numbered list with the background color added to the numbers.


By following these steps, you should be able to add a background color to the numbers in a numbered list in Elementor.


How to create a clickable numbered list in Elementor?

To create a clickable numbered list in Elementor, follow these steps:

  1. Add a Text Editor Widget to your Elementor page.
  2. In the Text Editor Widget, type out your list using the numbering feature in the editor. For example: Item 1 Item 2 Item 3
  3. Select the list items that you want to make clickable.
  4. Click on the hyperlink icon in the Text Editor toolbar.
  5. In the Link options, enter the URL that you want the list item to redirect to when clicked.
  6. Click on the "Apply" button to save the hyperlink.
  7. Repeat steps 3-6 for each list item that you want to make clickable.
  8. Once you have added all the hyperlinks to your list items, click on the "Update" button to save your changes.


Your numbered list with clickable links has now been created in Elementor. You can preview the page to test the clickable functionality of the list items.


What is the ideal line height for numbers in an Elementor numbered list?

The ideal line height for numbers in an Elementor numbered list would typically be around 1.2 to 1.5 times the font size of the numbers. This ensures that the numbers are properly spaced out from the text and are easily readable. However, the exact line height may vary depending on the specific design and layout of the webpage. It is recommended to test different line heights to see what looks best and is most readable for your specific design.


How to create a horizontal numbered list in Elementor?

To create a horizontal numbered list in Elementor, follow these steps:

  1. Add a new section to your page or open an existing section where you want to add the numbered list.
  2. Drag and drop the "Text Editor" widget into the section.
  3. In the Text Editor widget settings, click on the "Add item" button to add a new item to the list.
  4. Enter the text for the first item in the list.
  5. Repeat step 3 and 4 to add more items to the list.
  6. To make the list horizontal, click on the "Advanced" tab in the Text Editor widget settings.
  7. In the "List Style" section, change the "List Type" to "Horizontal".
  8. If you want to display numbers before each item in the list, click on the "Numbered List" option.
  9. Customize the style and design of the list items, such as font size, color, spacing, etc., using the available settings in the Text Editor widget.


That's it! You have now created a horizontal numbered list in Elementor. Preview your page to see how the list looks on the front-end.


What is the purpose of creating a numbered list in Elementor?

Creating a numbered list in Elementor can help organize and present information in a clear and structured manner. Numbered lists can be used to highlight key points, steps in a process, or to break down information into easily digestible chunks for readers. They can also improve readability and engagement on a webpage by drawing attention to important details and guiding the reader through the content. Additionally, numbered lists can help improve the overall design and layout of a webpage, making it more visually appealing and user-friendly.


How to create a scrollable numbered list in Elementor?

To create a scrollable numbered list in Elementor, follow these steps:

  1. Add a new section to your Elementor page by clicking on the "+" icon in the Elementor editor.
  2. Choose the number of columns you want for your list (e.g. 1 column).
  3. Drag and drop a "Text Editor" widget into the section.
  4. In the Text Editor widget settings, type out your numbered list, using the "ordered list" format. For example:
  1. Customize the styling of your numbered list by adjusting the typography, spacing, and colors in the Text Editor widget settings.
  2. To make the list scrollable, go to the section settings (the six dots icon at the top of the section) and select "Overflow" > "Scroll" from the dropdown menu.
  3. Save your changes and preview your Elementor page to see the scrollable numbered list in action.Scrollbar will appear when you add more number in the list.
Facebook Twitter LinkedIn Telegram Whatsapp

Related Posts:

How to Add New Elementor Post Programmatically?
To add a new Elementor post programmatically, you can utilize the Elementor API to create a new post. This can be done by using functions such as 'wp_insert_post' to create a new post in WordPress and then adding the necessary Elementor content via the...
How to Open External Link In Elementor Popup?
To open an external link in an Elementor popup, you can add a button or text in the Elementor editor and then link it to the external URL. You can set the link to open in a new tab by adjusting the link settings in the Elementor editor. This will ensure that t...
How to Include Global Styles to Elementor?
To include global styles to Elementor, you can use the Customizer settings in your WordPress theme to apply CSS rules site-wide. Alternatively, you can create a custom CSS file and include it in your theme to add global styles to Elementor elements. Another op...
How to Add A Section Title In Elementor?
To add a section title in Elementor, you can simply click on the title area of the section you want to label and type in your desired title. You can adjust the font size, style, color, and alignment of the title by using the Elementor editor tools. This will h...
How to Add Tabs Control In Elementor?
To add tabs control in Elementor, you can use the Tabs widget that comes with the Elementor Pro plugin. First, open the Elementor editor and add a new section to your page. Then, drag and drop the Tabs widget into the section. You can customize the tabs by add...