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:
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
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.
Latest posts by Hou Teng (see all)
- How to Optimize Permalinks on WordPress: SEO Basics - October 30, 2017
- SEO Hack: Social Media Link Building - October 23, 2017
- SEO Basics: Disavow Links with Google’s Link Disavow Tool - October 12, 2017