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):
Or like this (5.03 min):
And numbered lists like this one with a nice vertical divider (7.02 min):
- 1List Element
- 2List Element
- 3List Element
This one with the number in a circle (8.45 min):
- 1List Element
- 2List Element
- 3List Element
Or this design beauty (9.53 min):
- 1List Element
- 2List Element
- 3List 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:
The options are endless!
Here's one way how you could use it on your site (12.50 min):
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!
Great Job 🙂
Great tool 🙂
Thanks Shoelu
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
Thanks Diego
Good one Diego! Yes, but I hear imagination solutions are quite expensive!
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.
Thank you, Hanne! You guys seem to know what I need to learn at which point in time! Wonderful!
Wow these are really beautiful. I have this tutorial saved as I will be using this a lot. Thanks
Glad to hear John
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).
Hi Martina,
So you’re looking for kind of a checkbox/to-do list type of element, am I right?
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.
I knoooow 🙂 Happy to see you’re also excited about this MamaRed!
Another awesome tutorial. Thank you Hanne, your explanations are always simple and to the point.
Thanks Quentin
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!
Great timing! We want to create better bullet list on our website. Thank you Hanne.
Sweet 🙂
Ha! Hanne, you make it so _easy_ for us! Thank you!!
Happy to hear this was helpful Kevin!
Wonderful stuff as always. Thank you.
Thanks Ron
Hanne,
You explain it so well and make it look so easy…
Thank you.
Hi Luis,
Thanks and it really is’n hard to do!
Love it 😉
Yey 🙂
I’ve been using style lists for a while but I never customized them that much. Thank you for the awesome tutorial. 🙂
Hi Jonathan,
Glad to hear you were already using this element and that this tutorial gave you some inspiration.
Great post!
Thanks John
Thank you, Hanne. Another very helpful tutorial!
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?
Hi Nana,
It 100% can as you can see, this very article is done in Thrive Architect!
Great content! How do I subscribe to the Thrive themes blog? I can’t see it anywhere.
Thanks!
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.
Happy to hear!
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)
LOVE IT. Thank you Hanne.
Glad you do Margherita!
very helpful tutorial, I didn’t realise there were so many custom options , thank you Hanne
Yes 😀 Mission accomplished!
Quite impressive, all you can do with those lists!
Thanks George
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.
I must say you are you’re a lifesaver!
But as I’m an SEO, I have got a doubt that is it better to use styled icon instead of bullet/number!
Bcoz when you use bullet/number it can be shown in the Googles knowledge graphs like this https://s7.postimg.cc/bmqazkjvv/ttttt.png
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?
Thanks Hanne, I love the flexibility of Thrive Themes. Your tutorials make it so much easier to understand how to use the theme.
Thank you David
Presentation and Product, Awesome and Amazing, Thank YOU!
Thanks Joe!
Great tutorial. Thank you!
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
Seems like you are looking for a quiz option? In that case I suggest using Thrive Quiz Builder!
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?
Hi Harold,
No that’s not an alement we have atm.
Hey. Thanks for the great tutorial. But i want to know how to build separate numbered Headings (by adding a heading element)?
Thanks!
You can use the numbered function in the text menu for that
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!
Happy to hear!
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?
We’ve actually got an update coming on the 21st August for this…
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?
Hi Lisa, doesn’t seem like you need a list in that case. Simply use a text element
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.
Great Content for Webdesign Projects.Thrive Theme is One of The Best Themes for a Digital Marketing Website.