Today, we are going to talk about how to add custom bullet lists into your website. To achieve this we will use woo shortcodes for custom lists and visual composer for rows and columns. Although there is a shortcode in woo for rows and columns but we intentionally use visual composer to give us the visual view of our rows and columns in the editor window.
1. In our tutorial, we will create a new page and add two columns with 2 Texblocks on each of the column. Please note that you need to add the content first on the first Texblock of each column before you can append a new content below the first Textblock. Alternatively, you can also add a new row on the second line.
2. Add a Text Block on the first box and put your content in there. It is good to have your content ready from a notepad to save time typing them in the editor window. You can just simply copy and paste the content from your notepad to your editor window.
3. Normally since this is a list, we can change the header of that list to something bigger. In this tutorial we change the header size to H3. After that, highlight the list of words below that header and click on list icon on the formatting toolbar.
4. Now after applying the bulleted list, click on Text tab and put the woo shortcode as shown in the image below.
Noticed that we are using “star” value for style. We can also change that to – style: tick, red-x, bullet, green-dot, arrow, star
5. You can repeat steps 3 and 4 for the other boxes. Save and Publish, then view your custom bullet list online.
Below is the video tutorial on how to add custom bulleted list into your website.
Creating custom bullet list from Jezweb on Vimeo.