In this Part 1 of 3 of a mini-series ‘Styling Typography in Divi’, the post will explore 3 Ways to Style Divi Number and Bullet Lists. This entire series will also cover ways to style Divi Block Quotes, Image Captions, Headings, and Texts in mobile devices. The series looks at often overlooked text elements in web design, and provide copy-and-paste CSS codes to implement them easily on Elegant Themes’ Divi WordPress sites. Let’s begin!


Number and bullet lists (or more technically, Ordered, and Unordered lists) are convenient ways to organize information in a well-structured format. Lists are also effective ways to draw a reader’s attention to a required section of an article (instead of skimming through) as they are understood to be key points a reader should take note of. Many blog posts articles, including this article, starts with an ‘XX (Number of) Ways to ( Do This or That)’. With the proliferation of blog articles on the web, readers become drawn to articles that can be ‘digested’ quickly, hence ‘Lists Posts’ became a common copywriting strategy to capture a reader’s attention.

Lists are effective ways to draw a reader’s attention to a required section of an article as they are understood to be key points a reader should take note of.

Overlooked Design Element

Unfortunately, styling a number and bullet lists are often overlooked in a design of a website, by both the client and the designer. As is it not part of the overall look of a website, one will only take note of it when a list appears in a paragraph. In addition, styling a list is not as straightforward as styling a particular word or passage; one can easily bold text, underline them, italicized them, colour them, or  highlight it . This is not the case for bullets and numbers in the lists. The design of a list often follows the styling of the words in it. In order to design them, additional CSS must be inserted into the style.css file. This is also the case in the WordPress theme, Divi, by Elegant themes.

The Standard Number and Bullet Lists

The standard lists on Divi and on most websites may look something like this:

 

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - ordered list sample

a Typical Divi Number List

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - unordered list sample

a Typical Divi Bullet List

 

Such lists do not create interest or provide clarity, as the numbers and bullets are embedded within a passage.

The purpose of this article is to provide 3 simple ways to style the ordered and unordered lists on Divi, or adapted for use on any other websites. The 3 Ways are:

  1. Connected Bullet Lists
  2. Big Numbers Ordered Lists
  3. Divi Unordered Lists

 

1. Connected Bullet Lists

This tutorial that is taken from an Elegant themes’ blog article, shows a number list that is connected by a line and dots. As the numbers are added physically, the tutorial can be modified for use as a timeline.

Continue Reading

Note: In order to have a number displayed before the list, a span class ‘number_divider’ must be added, and the number must be physically added within the span. This might be a little impractical for sites that are managed by multiple users.

READ  How to Add Divi Animations to Any Sections, Rows and Modules

 

 

 

 

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Connected Bullet Lists

Connected Bullet Lists

 

See the Pen Divi Connected Bullet Lists by Leow Hou Teng (@houteng) on CodePen.30261

 

2.Big Numbers Ordered Lists

As the title suggests, this list has a huge, eye-catchy number displayed at the front. This tutorial was modified from a pen by Josh Johnson. What is different from Josh’s example and the previous tutorial above, is that the numbers need not be physically inserted into the text box.

Note: An additional paragraph tag was inserted in the HTML. This is not required and up to the users’ discretion.

 

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Big Numbers Ordered List

Big Numbers Ordered List

 

See the Pen Divi Big Numbers Ordered List by Leow Hou Teng (@houteng) on CodePen.30261

 

3. Divi Unordered Lists

The tutorial styles the rounded bullet into any symbol, including a Unicode character, within the ‘content’ property.

 

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Divi Unordered List

Divi Unordered List

 

See the Pen Divi Unordered List by Leow Hou Teng (@houteng) on CodePen.30261

 

How to add the CSS codes

The codes provided has the class ‘et_pb_text’, which will be reflected site-wide, for numbered lists within the ‘text module’. For websites which are not using Divi, or for Divi users who wish to apply only to a specific section, the class selector should be modified or adapted accordingly.

 

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Divi Text Module

Divi Builder – Text Module

 

The CSS codes may be placed in the custom CSS box in the ‘Divi Theme Options’ page or applied to the ‘Divi Builder Settings’ of a specific page.

 

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Divi Theme Options CSS Panel

Divi Theme Options Custom CSS

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Divi Builder

Divi Builder

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Divi Builder Settings

Divi Builder Settings

 

The codes can be applied to any modules by adding a CSS class in the ‘Advanced’ tab, and all instances of ‘et_pb_text’ selector changed accordingly.

 

Digital Marketing and WordPress Blog - Style Number and Bullet Lists - Divi Text Module Advance Settings

Divi text Module Advance Settings – CSS Class

Hou Teng

Hou Teng

Art Director, Digital Marketing Strategist at LeowHouTeng.com
Hou Teng is a Singaporean graphic designer, specialising in both print and web. After graduating from Nanyang Technological University, School of Art, Design & Media, he has worked in advertising and launched an education startup as a side project. He has also worked briefly in a renovation start-up in Shen Zhen, China. While his strengths are in branding and layout design, he is also skilled in digital imaging, web design (HTML & CSS), WordPress content management and administration, search engine optimisation, and digital marketing.
Hou Teng