Collection items settings
In our editor, you can build your site with the help of the ready-made blocks and enrich their look by adding new elements. You can manage the settings of these elements separately.
However, some blocks can contain a set of entirely interdependent elements that are gathered in a collection. Each item in a collection keeps the same layout as others — if you delete an element from one item in a collection, it will be automatically deleted from all other items. This feature simplifies the editing process because you don't need to individually adjust each element — the overall shape and design remain identical.
In general, a collection allows you to synchronize several identical elements so that they look uniform. If you have a lot of similar information — for example, a product catalog, your team description, or testimonials — you can place it in a collection to quickly edit the elements and keep the design consistent.
Here's an example of how you can use the collection items:
To add a collection to your site, choose one from our block gallery — you can find it in such blocks as wireframe-series-19-features, wireframe-series-6-services, wireframe-series-11-careers, etc. Follow the instructions below to learn how you can add and adjust items in a collection.
Also, you can watch our short video tutorial about the collection items:
Most blocks in our gallery have 3-5 items in the collection by default. If you want to expand your lection, add a new item to it.
For that, hover over an existing item in the collection and click + Item at the bottom right corner:
Note: The new item will be added with the same content next to the existing one.
You can duplicate or delete items by clicking on three dots at the top right corner:
Drag an item to a desired position by clicking on the direction arrows icon at the top right corner of it:
Important: You can move items of a collection only within a particular block they are added to.
Weblium provides a wide range of settings for each element. After adding a collection, you can change its appearance — stretch the items to the full width, change the alignment, and so on.
Firstly, hover over the collection item and click on the "gear" at the top right corner to access its settings:
In the Layout tab you can stretch the items to full width, change the distance between them or set their alignment in the block. You can also change the maximum number of items displayed in a row or adjust the content alignment of the elements in the items:
Note: The Alignment option only works if the actual number of items in the block is less than the number stated in the settings. In other words, it changes the position of all items if the max number in a row is set to 5, but there are only 4 items in the block.
On top of that, you can set the paddings of the items and change their style — whether the rounded corners will be applied to the items. These parameters can be applied only if the background is active:
Remember that the changes in the Layout tab that you apply to one item in the collection 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.
Important: Unlike columns, you can't set a custom width for the items in the collection. The width of the items adjusts automatically as you change the number of items in the row.
In the collection you can edit the background of each item separately, or set up a single design for them using presets.
Firstly, hover over the collection item and click on the "gear" at the top right corner to access its settings:
Navigate to the Background tab to select a color or image background specifically for the chosen item:
When you set a photo as a background of the column, you will see more customization options — e.g., applying filter or color correction:
You can also change the color background for the collection as a whole. Navigate to the Presets tab and choose the suitable preset for your items — the basic coloring algorithm for your items, and change the default colors to the preferred ones:
Important: If the background of any element within a collection has been previously changed, you will be able to decide whether to apply a preset setting only to unchanged elements or all elements regardless of their background settings.
Modes are the additional settings for collection items display. You can turn a collection into a slider or a block with tabs.
For that, navigate to the Modes tab in the Settings of the collection items:
Once you've chosen the Slider mode, you can set the type and the color of the controls, and more:
Tip: Check the Setting slides to autoscroll article to see how you can enable autoplay for your collection.
If you've selected Tabs to your collection items, make sure to check the Adding blocks with tabs article for more detailed information on how you can manage them.
Don't forget to publish your site for the changes to appear live.
However, some blocks can contain a set of entirely interdependent elements that are gathered in a collection. Each item in a collection keeps the same layout as others — if you delete an element from one item in a collection, it will be automatically deleted from all other items. This feature simplifies the editing process because you don't need to individually adjust each element — the overall shape and design remain identical.
In general, a collection allows you to synchronize several identical elements so that they look uniform. If you have a lot of similar information — for example, a product catalog, your team description, or testimonials — you can place it in a collection to quickly edit the elements and keep the design consistent.
Here's an example of how you can use the collection items:
To add a collection to your site, choose one from our block gallery — you can find it in such blocks as wireframe-series-19-features, wireframe-series-6-services, wireframe-series-11-careers, etc. Follow the instructions below to learn how you can add and adjust items in a collection.
Also, you can watch our short video tutorial about the collection items:
Adding a new item to the collection
Most blocks in our gallery have 3-5 items in the collection by default. If you want to expand your lection, add a new item to it.
For that, hover over an existing item in the collection and click + Item at the bottom right corner:
Note: The new item will be added with the same content next to the existing one.
You can duplicate or delete items by clicking on three dots at the top right corner:
Drag an item to a desired position by clicking on the direction arrows icon at the top right corner of it:
Important: You can move items of a collection only within a particular block they are added to.
Changing the layout of the items
Weblium provides a wide range of settings for each element. After adding a collection, you can change its appearance — stretch the items to the full width, change the alignment, and so on.
Firstly, hover over the collection item and click on the "gear" at the top right corner to access its settings:
In the Layout tab you can stretch the items to full width, change the distance between them or set their alignment in the block. You can also change the maximum number of items displayed in a row or adjust the content alignment of the elements in the items:
Note: The Alignment option only works if the actual number of items in the block is less than the number stated in the settings. In other words, it changes the position of all items if the max number in a row is set to 5, but there are only 4 items in the block.
On top of that, you can set the paddings of the items and change their style — whether the rounded corners will be applied to the items. These parameters can be applied only if the background is active:
Remember that the changes in the Layout tab that you apply to one item in the collection 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.
Important: Unlike columns, you can't set a custom width for the items in the collection. The width of the items adjusts automatically as you change the number of items in the row.
Changing the background of the items
In the collection you can edit the background of each item separately, or set up a single design for them using presets.
Firstly, hover over the collection item and click on the "gear" at the top right corner to access its settings:
Navigate to the Background tab to select a color or image background specifically for the chosen item:
When you set a photo as a background of the column, you will see more customization options — e.g., applying filter or color correction:
You can also change the color background for the collection as a whole. Navigate to the Presets tab and choose the suitable preset for your items — the basic coloring algorithm for your items, and change the default colors to the preferred ones:
Important: If the background of any element within a collection has been previously changed, you will be able to decide whether to apply a preset setting only to unchanged elements or all elements regardless of their background settings.
Changing the modes of the items
Modes are the additional settings for collection items display. You can turn a collection into a slider or a block with tabs.
For that, navigate to the Modes tab in the Settings of the collection items:
Once you've chosen the Slider mode, you can set the type and the color of the controls, and more:
Tip: Check the Setting slides to autoscroll article to see how you can enable autoplay for your collection.
If you've selected Tabs to your collection items, make sure to check the Adding blocks with tabs article for more detailed information on how you can manage them.
Don't forget to publish your site for the changes to appear live.
Updated on: 12/05/2023
Thank you!