When building a site using Thrive Theme Builder, you can add and customize various elements in order to achieve the look that you want your website to have. The "Dynamic Styled List" is a useful element to use in case you want to import a list of categories/ authors/ etc. on your website.
This article will go through the options that you can use in order to customize the element.
Add the Element to Your Template
The first thing that you have to do, just like in the case of any element, is to add it to your page or post.
In the Thrive Theme Builder editor, go to the right sidebar and click on the plus sign:
This opens a list of all the Thrive Theme Builder elements. Here, scroll down until you find "Dynamic Styled List", or type the name in the search bar:
Then, once you find it, grab the element and drag and drop it onto the template where you best see fit:
When you add the element, a small drop down menu will open. You will automatically be asked to select the list that you want to use:
Scroll down in order to see all of your options, and click on the list that you want to add. You can also change it later if you want:
After you choose a list, you can start customizing it using the options from the left sidebar:
Edit List Items
The first option from the left sidebar is the "Edit List Items". You can use this if you want to make modifications to the actual items that assemble the "Dynamic Styled List" element:
When you click on it, you will be taken into "Edit Mode". You can then click on each element you want to edit (icons, text, etc.), and the element options will appear in the left sidebar. For example, if I click on the category name, the inline text options will appear in the left sidebar:
If you want to find out more about the "Text" element options, check out this article.
After you have finished editing the items, in order to exit the "Edit Mode", click on "Done":
Use the Element Options
After you have edited the element in the "Edit Mode", you can move forward and customize it using the rest of the options available in the left sidebar.
As mentioned before, you can change the list source. For this example, I will customize a "Categories List" but, if I want to change it into a "Tags List", I can do that from here. Simply click on the field next to the option, and a small drop down menu will open:
This menu contains the same elements as the one that opened when the element was added on the template. Choose the list type that you want from the menu, and it will automatically change:
Max Items to Display
The next option is about the number of items the list will display. Whichever type of list you are using, you can set the maximum number of items to display. In order to change this number, you can either drag the slider from side to side, or you can manually enter a numerical value in the field next to the option:
After the option with the number of items to display, the next one is the "Layout" option, where you can choose if you want the list items to be displayed horizontally or vertically. Click on the option you prefer:
In the example that I am using, here is how the "Categories List" looks like if the layout is "Vertical":
And here is how the list looks like if I decide to use the "Horizontal" layout:
Enable Icons for List Items
After deciding which layout to use for the "Dynamic Styled List" element, you can also decide if you want the list to consist of icons, as well, or not. The element has this option, called "Enable Icons for List Items", activated by default. You can remove the icons from the element by clicking on the switch next to the option:
Change All Icons
If the above mentioned option is enabled, you will also be able to change the icons, with the use of the next option ("Change all icons"). In order to do that, click on the field next to the option:
This will open a pop-up with all the available icons. You can scroll down until you find the one you like, select it, and then click on the green "Select" button:
List Items Spacing
The last option from the left sidebar "Dynamic Styled List" section is the "List Item Spacing" option. This is where you can decide the spacing in between the items. Depending on which type of layout you have previously chosen, you can either set the vertical spacing, or the horizontal spacing. In order to modify it, either drag the slider from side to side, or manually enter a numerical value in the field next to the slider:
These were all the options that can be found under the "Dynamic Styled List" section of the left sidebar. Besides these, you can also use the rest of the options to further customize the element (such as "Borders & Corners","Animation and Action", etc.), all for which we do have separate articles in our knowledge base.
For more information about various Thrive Theme Builder elements or features, make sure to check out the articles we have in the dedicated section of our Knowledge Base.
I hope this article was useful for you. If so, don't forget to rate it with a smile below:)