Unlimited Design Opportunities for Your Bulleted and Numbered Lists

Bulleted lists and numbered lists are the backbone of any well structured piece of content.

You'll want to use them in blog posts, comparison pages, landing pages, sales pages, opt-in forms and anywhere else you care about grabbing your readers' attention.

But let's be honest... The basic unordered and ordered list in the text editor are kinda boring and won't cut it if you're looking to impress your visitors and get them to convert.

That's why in Thrive Architect, our visual editor for WordPress, you have the styled list and the numbered list element. Both of these offer such a wide range of cutomization options that you'll find yourself creating lists just for fun (or is that just me?).

Let me show you!  

More...

4 Parts for Infinite Customization Options

The list element consists of 4 parts that can all be styled separately and independently.

When you click into the styled list or a numbered list element you'll discover that you can style:

  • The complete list element
  • The list item
  • The icon or number
  • The inline text

List item

Icon or number

Inline text

Playing around with the styling options for any (or all) of these parts of the list element will give you the opportunity to create pros and cons lists like this (2.29 min):

  • List Element
  • List Element
  • List Element
  • List Element
  • List Element
  • List Element

Or like this (5.03 min):

  • List Element
  • List Element
  • List Element
  • List Element
  • List Element
  • List Element

And numbered lists like this one with a nice vertical divider (7.02 min):

  • 1
    List Element
  • 2
    List Element
  • 3
    List Element

This one with the number in a circle (8.45 min):

  • 1
    List Element
  • 2
    List Element
  • 3
    List Element

Or this design beauty (9.53 min):

  • 1
    List Element
  • 2
    List Element
  • 3
    List Element

But that's not all. Up until now, we've only looked at lists where every list element has the same styling. Let's take it one step further.

(Un) Group Editing

You might have noticed the lock icon in the upper left corner of each part of the list. That lock is part of the group editing feature.

By default all the elements are locked and you style them as a group. But with the click of a button you can unlock one specific element of the list (the icon or number, the inline text or the list item) and apply the styling to only that one.

This allows you to:

  • Have a different icon and icon style on one item of your list.
  • Change the inline text independently
  • Or highlight a specific list item

The options are endless! 

Here's one way how you could use it on your site (12.50 min):

  • Check your email inbox
  • Open the confirmation email
  • Click on the confirmation link

And when you're done customizing the individual items, re-group them to continue making changes to all the items in the list.

Now it's your turn to have fun with lists! What do you think? Let us know in the comments below how you're planning on using these styled lists!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

  • Schoelu says:

    Great Job :-)
    Great tool :-)

  • Marion says:

    Creating beautiful icons with Thrive Architect is fantastic. List icons look great on Android devices. The icons on the Ipad or Iphone are not aligned if the inline text is slightly longer. Have you ever noticed that?

    • Hanne says:

      Hi Marion,
      I did not, but you can go into the mobile view and change the paddings (or whatever has to change) to make it look good on mobile too.

  • Diego R. says:

    Fantastic … There are no more excuses for not performing spectacular designs
    Well, the only thing that stops us is the imagination, does thrive themes have a solution that will be implemented in their products to solve this issue? ;)

    Thanks for the video Hanne

  • Hans says:

    Hello, Hanne. Thanks once again for a superb tutorial. It’s always exciting to discover new and novel ways to use TA.

    It occurred to me that using this method of creating lists might be a speedy way of creating image/text items that span horizontally, not just vertically, as with lists.

    For instance, three columns might be used to explain three features–each column with an image and text box–that span horizontally.

    Could this be created simply by creating a list, altering the images, and pivoting the list so that it now spans horizontally, rather than vertically?

    • Hanne says:

      Hi Hans,
      At the moment, this is not an option (to use the list vertically) but now that we have the group editing in place, it will be rolled out to more elements.

      One of the elements that’s in that list is the columns element (which would allow you to do exactly what you’re hoping for).

      I can not give you a timeline for this, but it’s interesting to see that you (and others) would find this helpful.

      • Li Mei says:

        Thank you, Hanne! You guys seem to know what I need to learn at which point in time! Wonderful!

  • John says:

    Wow these are really beautiful. I have this tutorial saved as I will be using this a lot. Thanks

  • Martina R says:

    I would appriciate to get a list element with clickable checkboxes – to check if a lecture is completed (I use pages created with Thrive Themes for courses in my member area).

    • Hanne says:

      Hi Martina,
      So you’re looking for kind of a checkbox/to-do list type of element, am I right?

  • Ryan Nelson says:

    How will this look on AMP? As always, the issue with making formatting more complex is that things will break/render in unexpected ways, especially with AMP.

    • Hanne says:

      Hi Ryan,
      Yes AMP does not allow for any cool formatting.
      If AMP is important to you, I would suggest using the normal unordened list.

  • MamaRed says:

    Holy moly, this is soooooooooooooooooo awesome! I’m a list fanatic and didn’t know how kewl they could look.

    • Hanne says:

      I knoooow :) Happy to see you’re also excited about this MamaRed!

  • Quentin P says:

    Another awesome tutorial. Thank you Hanne, your explanations are always simple and to the point.

  • Jack G says:

    Very helpful content.
    Excellent lesson structure – with the end result on screen and then you show how to get it.
    You have a wonderful on-camera presence and style – friendly, confident, enthusiastic, without being over dramatic. Really, really good. It sounds like you’re talking to a friend.

    How many takes did you need to shoot that? ;-)
    Don’t tell me you did it on the first take – you’ll make me feel incompetent. :-)

    • Hanne says:

      Euhm… I did :) But don’t forget that this is after making over a 100 of this type of videos!

  • Merchdope says:

    Great timing! We want to create better bullet list on our website. Thank you Hanne.

  • Kevin J says:

    Ha! Hanne, you make it so _easy_ for us! Thank you!!

    • Hanne says:

      Happy to hear this was helpful Kevin!

  • Ron P says:

    Wonderful stuff as always. Thank you.

  • Luis Lorenzo says:

    Hanne,

    You explain it so well and make it look so easy…

    Thank you.

    • Hanne says:

      Hi Luis,
      Thanks and it really is’n hard to do!

  • Przemek says:

    Love it ;)

  • Jonathan says:

    I’ve been using style lists for a while but I never customized them that much. Thank you for the awesome tutorial. :)

    • Hanne says:

      Hi Jonathan,
      Glad to hear you were already using this element and that this tutorial gave you some inspiration.

  • John says:

    Great post!

  • Maureen says:

    Thank you, Hanne. Another very helpful tutorial!

    • Hanne says:

      Thanks Maureen, happy to hear!

  • After playing with some pages I’m beginning to understand what you are doing. You always talk about using Thrive for pages and landing pages. Can it not be used for posts?

    • Hanne says:

      Hi Nana,
      It 100% can as you can see, this very article is done in Thrive Architect!

  • Francis says:

    Great content! How do I subscribe to the Thrive themes blog? I can’t see it anywhere.

    Thanks!

    • Hanne says:

      Hi Fancis, best way would be to join Thrive University. You’ll get our newsletter where we broadcast new blog posts and you’ll get access to a complete library of online marketing courses. You can sign up (for free) here

  • Thanks for the post. Will try it out for the next post.

  • Martin R says:

    Hello Hanne, thanks for this tutorial which is great. I have played around with list styling to for list item text separated by a dotted line under each element which works well. However I want to turn off the icons! I did this by turning off the icon display using custom CSS but wondered if there is an easier way to do this?
    Many thanks!

    • Hanne says:

      Hi Martin,
      No I don’t think so.
      You can probably make exactly what you want with text elements and the divider element (but maybe I’m missing something)

  • Margherita Pescollderungg says:

    LOVE IT. Thank you Hanne.

    • Hanne says:

      Glad you do Margherita!

  • Ramesh says:

    very helpful tutorial, I didn’t realise there were so many custom options , thank you Hanne

    • Hanne says:

      Yes :D Mission accomplished!

  • George says:

    Quite impressive, all you can do with those lists!

  • Lorenzo D says:

    When I saw this post I though: “Does this mean they fixed the styled list element? It was infuriatingly clunky last time I checked…”. Turns out you did. I had given up on using that element completely, but now I just created a new template and it was a breeze. Well done guys! And great tutorial too. These are the basic elements that bloggers use most often and seemingly small improvements actually make a big difference in terms of our workflow.

    The text elements have also improved noticeably compared to 5-6 months ago, but I think they can be improved further.

    The great thing about the way text was handled in Thrive Content Builder (which was the old version of Thrive Architect, for newbies) was that you could copy-paste an entire post into it and you would get a separate element for each paragraph. Which meant you could then change the ones you wanted to subheadings, insert images (I know you can do that in TA, now, which is cool!) and other elements such as buttons (that, you can’t do at the moment, tsk tsk).

    I want to be able to style the text BOTH globally AND granularly, kind of like we can now do with the lists. I want the best of both TCB and TA.

    Atm, I need to spend about FOUR TIMES AS MUCH TIME as I used to to publish a post, because TA forces me to copy-paste a paragraph, then copy.paste a heading, then duplicate the paragraph, copy-paste some text, then add an image, duplicate again, copy paste again…you get the idea. It feels like an exercise in patience, and frankly it’s a bit absurd for a company that is (deservedly) noted for empowering solopreneurs with clever, simple and yet sophisticated solutions.

    I appreciate the fancy new functions as much as anyone, but come on, don’t let us down on the bread and butter of the publishing process!

    OT (but not really): Shane just published a video on Active Growth about taking on too many projects at a time and spreading Thrive’s resources too thin…is that why you haven’t given us any updates about the new theme? I can’t be the only one who looks forward to those…throw us a bone ;)

    • Shane Melaugh says:

      I’m not sure I understand what you mean, here. Why don’t you just paste all of your text, select the lines that you want as headings and set them to be headings in Thrive Architect? As for buttons or other elements: you can drop anything in between paragraphs, even if the paragraphs are part of the same text block.

  • Katharina says:

    Whenever I use the styled element, the fonts look different. I checked and the font type does not change but they become so think they are barely readable on my site so I gave up on using styled elements. Any thoughts?

  • David Wakeman says:

    Thanks Hanne, I love the flexibility of Thrive Themes. Your tutorials make it so much easier to understand how to use the theme.

  • Joe says:

    Presentation and Product, Awesome and Amazing, Thank YOU!

  • >

    Join Thrive University (it's FREE!)