Lists are a simple yet effective way to present information clearly on a website. Whether it’s a bullet list (unordered list) or a number list (ordered list), they help break up text and make content easier to read. However, the default styles might not always match your website’s design.
If you’re using Elementor, customizing lists with CSS is a powerful way to make them visually appealing. In this guide, we’ll explain step by step how to style your lists and apply these changes easily—even if you’re a beginner.
Adding Space Below Your Lists
Sometimes lists look cramped, especially when there’s no space between them and the surrounding content. To fix this, we can add some extra space below each list using CSS.
Here’s the code:
- The
ulrefers to bullet lists, andolrefers to number lists. - The
margin-bottom: 20px;adds 20 pixels of space below each list.
By adding this small tweak, your lists will have enough breathing room, making your layout look clean and professional.
ul {
margin-bottom: 20px;
}
ol {
margin-bottom: 20px;
}
What Does This Do?
- The
ulrefers to bullet lists, andolrefers to number lists. - The
margin-bottom: 20px;adds 20 pixels of space below each list.
By adding this small tweak, your lists will have enough breathing room, making your layout look clean and professional.
Adding Space Between Items in Your List
Another issue with lists is when the items are too close together, making it hard to read. To fix this, you can add padding between each list item.
Here’s how:
ul li {
padding: 7px 0px;
}
<ul class="custom-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
What Does This Do?
- The
padding: 7px 0px;adds 7 pixels of vertical space (above and below) to each item in your list. - It ensures that the text is spaced out enough to make it easier to read.
Customizing Specific Lists
If you don’t want these styles to apply to every list on your website, you can use a custom class. A custom class allows you to target only the lists you want to style.
Here’s how you do it:
- Open the Text Editor in Elementor.
- Add a class to your list like this:
<ul class="custom-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
3. Then, use this CSS:
.custom-list {
margin-bottom: 20px;
}
.custom-list li::marker {
color: #06104A;
}
.custom-list li {
padding: 7px 0px;
}
Now only the lists with the class custom-list will have these styles!
More Fun Customizations
If you’re feeling creative, here are a few extra ideas to make your lists stand out:
Change the Bullet Style
By default, bullet lists use round dots, but you can switch to squares, discs, or even none at all.
ul {
list-style-type: square;
}
This changes the bullets to squares instead of round dots.
Add Hover Effects
Want to make your lists interactive? Add a hover effect to highlight items when users hover over them.
ul li:hover {
color: #FF5733;
text-decoration: underline;
}
With this code, the text color changes to orange (#FF5733) and gets underlined when someone hovers over it.
Use Roman Numerals in Number Lists
You can change the numbering style in ordered (number) lists. For example, you can use Roman numerals like I, II, III:
ol {
list-style-type: upper-roman;
}
How to Apply the CSS
There are two easy ways to apply this CSS to your Elementor website.
Option 1: Using Elementor Pro
- Open the page or post in Elementor where your list is located.
- Select the Text Editor widget.
- Go to the Advanced tab.
- Paste the CSS code in the Custom CSS field.
- Save your changes.
(Note: This option requires Elementor Pro.)
Option 2: Using WordPress Customizer
- Go to your WordPress dashboard and click on Appearance > Customize.
- In the Customizer, select Additional CSS.
- Paste your CSS code into the editor.
- Click Publish to save your changes.
This method works with both the free and Pro versions of Elementor!
Final Tips for Beginners
- Start Simple: If you’re new to CSS, experiment with small changes like spacing or colors.
- Preview Changes: Use Elementor’s live preview to see how your changes affect the design in real time.
- Use Browser Tools: Right-click on your list in your browser and select “Inspect” to see how the styles are applied.
By following these steps, you can create beautiful, customized bullet and number lists that enhance your website’s design. Don’t be afraid to experiment—CSS is all about trial and error!
Need more help? Let me know!