As you are probably aware, there are two main types of lists: Unordered and Ordered. Using these to emphasize a point under the main topic can help improve your content and your SEO.

There is also a third list, known as a Definition List, which is slightly different from the other two, as you will see later in the tutorial. Ok, let's take the unordered list first, usually the most most used.

Open a new Custom HTML block and insert the following code:
----------------------------------------
<ul>
<li></li>
<li></li>
<li></li>
</ul>
----------------------------------------
Add your text between the tags and the previewed page should now look like this (I've included the first formatted pararaph to show how the list would be indented):

To add more paragraphs, for each one open a new Custom HTML block and add the <p></p> tags and insert your text between the tags. The page should now look like this:

Personally, I prefer the lists aligned left, rather than indented; a square main bullet point rather than the default disc; and the bullet point color to match my website corporate colors. So, let's add some code into the Additional CSS:
----------------------------------------------
ul li {
list-style-type: square;
margin-left: -38px;
font-family: helvetica, arial, verdana, sans-serif;
font-size: 18px;
line-height: 1.4;
color: #352ece;
margin-bottom: 10px;
}
----------------------------------------------
Changing the bullet point color will also change the text color, which we don't want. How do we avoid that? By inserting the <span> tag immediately after the <li> tag in Custom HTML, and adding the following CSS code to Additional CSS:
----------------------------------------------
span {
color: #393939;
}
----------------------------------------------
Preview the page and the Unordered List should now look like this:

There may comee a time when, you may want to create a Nested List with Sub and Sub Sub paragraphs under the main bullet point. So, let's do that.

:



Join the Discussion
Write something…
Top