Unlimited Design Opportunities for Your Bulleted and Numbered Lists

Author
Hanne   78

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!

Have You Heard About the New Content Block Feature?

We added new a new feature to the Thrive editor to help you build better looking content faster with far fewer editing steps: the Content Blocks.

These Content Blocks are pre-designed text blocks, ready to be inserted into your posts with one click!

You'll find ready-to-go Content Blocks in the gallery, such as:

  • Steps blocks
  • Pros & cons blocks

Learn more about this new feature in this post!

by Hanne  May 16, 2018

78

Enjoyed this article ?

You might also like:

Leave a Comment

  • 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?

    • 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.

  • 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

  • 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?

    • 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.

  • 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).

  • 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.

    • 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.

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

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

  • 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. 🙂

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

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

  • 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?

    • 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

  • 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!

    • 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)

  • 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 😉

    • 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.

    • A bullet list is the same markup as the styled list.
      A numbered list has indeed a different markup and will be read differently from a crawler perspective.

  • 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?

  • Nice lesson hanne, my challenge is how do i make this list responsive? i mean if i need my audience to click a choice out of a list that best applicable to him…

    what do i do to make my bullet responsive or clickable (it doesnt have to lead to a url like a botton icon…but for the the audience to just be able to indicate a prefered choice.

    looking forward to your response

  • Hi Hanne, thanks for this tutorial. It was very helpful. However, is there a way to add a check box list that people can actually check to select an item?

  • Hey. Thanks for the great tutorial. But i want to know how to build separate numbered Headings (by adding a heading element)?
    Thanks!

  • Hi Hanne, Thank you for a great tutorial. You lesson was simple and easy to understand. You seem to know what I need to learn at which point in time! Wonderful!

  • Can I make the icons clickable (hyperlink) so a new page opens if a visitor clicks the icon? I can not find it in the settings?

  • I love the lists option but I often need to create a list with a bold heading and paragraph text underneath. As soon as I hit enter, I get another box instead of the text being underneath my first line. Is there a way to address this please?

  • Sometimes the best way to present information is in a bulleted list. Bulleted lists attract attention, support scanning, shorten text, and reveal the relationship of items.

  • I use ACF (Advanced Custom Fields) plugin to create custom admin editing experiences for my clients. I don’t typically have them use Thrive Architect to edit pages because it’s too complicated for them and I don’t want them to mess up the design. That being said, is there a way to use ACF with the styled lists and bulleted lists? I saw that WYSIWYG editor for ACF is still not a supported field through Thrive Architect. I’m really needing to use dynamic styled lists connected to ACF in a variety of spots on my clients site.

    • Hi Kenny,

      You can pull the data for the list from the dynamic data of ACF: https://share.getcloudapp.com/Jru6e5Kb

      In this case, I created ACF called “list item 1”, “list item 2”,… and then I create a page with Thrive Architect, added a styled list element and used the ACF data to populate the list.

      Hope that will help.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >