List items settings
Some blocks on Weblium contain list items — a set of elements in a row that are fully interconnected. That said, if you delete a button in one item of a list, it will be deleted from others too. This simplifies the editing process because you don't need to individually adjust each element — the overall shape and design remain identical.
List items line up horizontally and can be used for organizing content on your page. For example, if your site has a large amount of similar information — a description of subscriptions, services, a list of open vacancies — you can quickly and easily organize it using the list items. This way, the information will become more readable for users, and you can stick to a unified website design.
Here's a great example of the list items in action:
To add a list on your site, choose it from our blocks gallery — you can find it in such blocks as wireframe-series-3-pricing, wireframe-series-1-partners, wireframe-series-17-projects, etc. Follow the instructions below to see how you can further manage your list items.
By default, most blocks with lists contain 3-4 rows. If you have a significant amount of information that you want to place in a list, we recommend adding more items. This way, they won't be stacked in one place, and the site will generally look neater.
For that, hover over the existing item in the collection and click List item in the bottom right corner:
Tip: The new item will be added with the same content next to the existing one.
You can duplicate or delete the items by clicking on the three dots in the top right corner:
Drag the item to a desired position by clicking on the direction arrows icon in the top right corner of it:
Note: You can move items of the list only within the block they are added to.
After you have added a block with a list, you can edit the layout of its rows — delete or add paddings between them, remove borders, and so on.
For that, hover over the list item and click on the "gear" in the top right corner to access its settings:
In the Layout tab you can change the distance between the items or adjust the content alignment. Besides, you can set the paddings of the items and change their style — whether the borders will be applied to the list:
Bear in mind that there is no possibility to change the width of the list.
Important: Remember that the changes in the Layout tab that you apply to one item in the list will automatically apply to every item. Therefore, if you change the content alignment or the paddings in the settings, they will be changed in other items as well.
For that, hover over the list item and click on the "gear" in the top right corner to access its settings:
Navigate to the Presets tab and choose the suitable preset — the basic coloring algorithm for your items, and change the default colors to the preferred ones:
Here's an example of how your list can look like with the Color gradation preset:
Note: There is no way to set an individual color for each row in the list yet.
Each line in the list consists of containers where you can add all the elements available in the gallery — pictures, buttons, text, and more. Containers in a list cannot exist without an element in it, so they are not displayed in the editor by default. The number of elements that can be added to the container is not limited.
Remember that each item in the list keeps the same layout as others — if you add an element from one item in the collection, it will be automatically added to every item.
To add the needed element to it, hover over the empty section and click on the "plus", then choose the element in the pop-up window:
Important: Maximum number of boxes in a row — 8, minimum — 2.
After you've added an element to the box, you can supplement it with other items by clicking on the "plus" sign near the particular section:
You can also adjust the width of the boxes using the dividers that are placed next to them. To do this, hover over the empty space between the boxes, click on the divider and drag it to the needed direction:
Important: The dividers that allow you to change the width of the boxes appear only if 4 or fewer elements are added in the item. If more than 4 elements are added in the row, all boxes will have the same width.
You can also move or duplicate the elements in the items. To learn how to do that, check the Managing elements article.
List items line up horizontally and can be used for organizing content on your page. For example, if your site has a large amount of similar information — a description of subscriptions, services, a list of open vacancies — you can quickly and easily organize it using the list items. This way, the information will become more readable for users, and you can stick to a unified website design.
Here's a great example of the list items in action:
To add a list on your site, choose it from our blocks gallery — you can find it in such blocks as wireframe-series-3-pricing, wireframe-series-1-partners, wireframe-series-17-projects, etc. Follow the instructions below to see how you can further manage your list items.
Adding a new item to a list
By default, most blocks with lists contain 3-4 rows. If you have a significant amount of information that you want to place in a list, we recommend adding more items. This way, they won't be stacked in one place, and the site will generally look neater.
For that, hover over the existing item in the collection and click List item in the bottom right corner:
Tip: The new item will be added with the same content next to the existing one.
You can duplicate or delete the items by clicking on the three dots in the top right corner:
Drag the item to a desired position by clicking on the direction arrows icon in the top right corner of it:
Note: You can move items of the list only within the block they are added to.
Changing the layout of items
After you have added a block with a list, you can edit the layout of its rows — delete or add paddings between them, remove borders, and so on.
For that, hover over the list item and click on the "gear" in the top right corner to access its settings:
In the Layout tab you can change the distance between the items or adjust the content alignment. Besides, you can set the paddings of the items and change their style — whether the borders will be applied to the list:
Bear in mind that there is no possibility to change the width of the list.
Important: Remember that the changes in the Layout tab that you apply to one item in the list will automatically apply to every item. Therefore, if you change the content alignment or the paddings in the settings, they will be changed in other items as well.
Changing the background of items
For that, hover over the list item and click on the "gear" in the top right corner to access its settings:
Navigate to the Presets tab and choose the suitable preset — the basic coloring algorithm for your items, and change the default colors to the preferred ones:
Here's an example of how your list can look like with the Color gradation preset:
Note: There is no way to set an individual color for each row in the list yet.
Adding elements to a list
Each line in the list consists of containers where you can add all the elements available in the gallery — pictures, buttons, text, and more. Containers in a list cannot exist without an element in it, so they are not displayed in the editor by default. The number of elements that can be added to the container is not limited.
Remember that each item in the list keeps the same layout as others — if you add an element from one item in the collection, it will be automatically added to every item.
To add the needed element to it, hover over the empty section and click on the "plus", then choose the element in the pop-up window:
Important: Maximum number of boxes in a row — 8, minimum — 2.
After you've added an element to the box, you can supplement it with other items by clicking on the "plus" sign near the particular section:
You can also adjust the width of the boxes using the dividers that are placed next to them. To do this, hover over the empty space between the boxes, click on the divider and drag it to the needed direction:
Important: The dividers that allow you to change the width of the boxes appear only if 4 or fewer elements are added in the item. If more than 4 elements are added in the row, all boxes will have the same width.
You can also move or duplicate the elements in the items. To learn how to do that, check the Managing elements article.
Updated on: 12/05/2023
Thank you!