Collection Items Settings

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.


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.


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

2. You can duplicate or delete items by clicking on three dots at the top right corner:

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

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


1. Firstly, hover over the collection item and click on the "gear" at the top right corner to access its settings:

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

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


1. Firstly, hover over the collection item and click on the "gear" at the top right corner to access its settings:

2. Navigate to the Background tab to select a color or image background specifically for the chosen item:
3. When you set a photo as a background of the column, you will see more customization options — e.g., applying filter or color correction:
4. 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.


1. For that, navigate to the Modes tab in the Settings of the collection items:



2. Once you've chosen the Slider mode, you can set the type and the color of the controls, and more:


Tip: check the article Setting slides to auto scroll to see how you can enable auto play for your collection.

3. If you've selected Tabs to your collection items, make sure to check the article Adding blocks with tabs for more detailed information on how you can manage them.


Don't forget to publish your site for the changes to appear live.




    • Related Articles

    • List Items Settings

      Some blocks on SiteCliq 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 ...

    • Footer Settings

      Footer is a block that is placed at the bottom of your site. It allows you to organize a lot of site navigation and add additional information about your company. Our team designed a fully customizable and user-friendly footer with a wide range of ...

    • Menu Bar Settings

      If you add a new page to the pages menu, it will be accessible only by a direct link. To make a page visible to the site visitors, you should add it to the navigation menu as well. The site menu is a part of a header or a footer block that serves for ...

    • Icons Settings

      SiteCliq allows you to add icons from the integrated services — Icons8 and Noun Project. You can also upload your own, custom icons in the editor. Follow the instructions below to see how you can add icons and change their background, color, and ...

    • Adding Blocks With Tabs

      Tabs are useful for organizing chunks of related information into a single block, thereby freeing space on a page. With this feature, you can structure the pictures in a gallery by general topics, organize your company's products and services, and ...