Summary

  • Overview
  • Adding Grid Repeater
  • Adding Elements to Grid Item
  • Moving Elements in the Grid item
  • Change Element Properties (e.g. border)
  • Change Element Background (for Button and Group)
  • Converting Elements To Grid Repeater
  • Grid
    • Columns and Rows
    • Spacing Between Items
    • Reordering Grid Items
  • Grid in Mobile Views
    • Grid and Image in Tablet
  • Grid Repeater Presets for Add Grid

Grid Repeater Overview

Use the Grid Repeater to stylize grouped Elements similarly. Then, when you edit one Grid Item, all other items get the same styling automatically.

list-repeater.png

Adding Grid Repeater

Add the Grid Repeater Element from the Add Elements Grid in the Topbar. While adding the Grid Repeater, you can see Grid Repeater Layouts, Presets, and Designs.

list-layouts-blocks.png

Adding Elements

Click the round plus icon to add Elements to the Grid Repeater. You can add an Element into any Grid Item, and there will be the same Element added automatically to all other Grid Items.

list-add-elements.gif

Moving Elements

You can move an Element in any Item in the Grid Repeater, and there will be the same Element moved automatically in all other List Items.

list-move-elements.gif

Changing Element Properties

You can change the Properties of any Item in the Grid Repeater, and there will be the same Property added automatically to all other Grid Items.

list-item-properties.png

Changing Element Background

By default, you can enable the Background for all Items in the Grid Elements.

list-item-background-for-all-items.gif

You can also switch this behavior for the current Item.

list-item-background-for-one-item.gif

It works similarly for the Button Element added to the Grid Item.

list-change-properties.gif

Converting Elements To Grid Repeater

If you duplicate a Group or selected Elements, you will see a dialog offering you to convert this Group or Elements to the Grid Repeater.

convert-group-selected-elements-into-list-repeater.gif

Grid

Columns and Rows

Change the number of Columns and Rows in the Property Panel for the Grid Repeater. It duplicates Items to fill out the Grid.
Grid

list-columns-rows.gif

Change the number of Columns and Rows in the Context Toolbar for the Grid Repeater.

list-repeater-columns-rows.gif

Spacing Between Items

You can change the Item Gap for the Grid Repeater.

list-item-gap.png

Image Background Animation On Hover for Grid Repeater

Use the Hover Animation for the Image Background for the Items of the Grid Repeater Element.

list-repeater-image-bg-hover-animation.gif

Reordering of Grid items

Now you can reorder the Grid Items by dragging them similar to the Grid Cells.

list-reorder.png

Grid in Responsive Modes

You can set the different number of columns in the Responsive Modes.

list-responsive.png

Grid and Image in Tablet

If the Grid Repeater and Image are placed near each other in the Desktop or Laptop Modes, then the Grid Element goes under the Image Element starting from the Tablet Mode.

list-and-image-in-tablet-mode.png

Grid Repeater Presets for Add Grid

To ease difficulties in finding and using the Grid repeater instead of choosing the Grid in cases where the Grid Repeater would work more efficiently, you can find the Grid Repeater Presets in the Grid section of the Add Elements.

grid-repeater-presets-for-grid.png

Grid Repeater From Groups

You can see the Best Practice dialog for Groups placed nearby, also you can turn to the Grid Repeater out of Groups placed in a row.

grid-repeater-presets-for-grid.png

Grid Repeater Item Colors

You can specify different colors for Elements in Grid Repeater Items. You can use the All Items and Item options to set whether to use the color on all similar Elements or only in the current one.

grid-repeater-colors.gif

## Summary - Overview - Adding Grid Repeater - Adding Elements to Grid Item - Moving Elements in the Grid item - Change Element Properties (e.g. border) - Change Element Background (for Button and Group) - Converting Elements To Grid Repeater - Grid - Columns and Rows - Spacing Between Items - Reordering Grid Items - Grid in Mobile Views - Grid and Image in Tablet - Grid Repeater Presets for Add Grid ## Grid Repeater Overview Use the Grid Repeater to stylize grouped Elements similarly. Then, when you edit one Grid Item, all other items get the same styling automatically. !list-repeater.png! ## Adding Grid Repeater Add the Grid Repeater Element from the Add Elements Grid in the Topbar. While adding the Grid Repeater, you can see Grid Repeater Layouts, Presets, and Designs. !list-layouts-blocks.png! ## Adding Elements Click the round plus icon to add Elements to the Grid Repeater. You can add an Element into any Grid Item, and there will be the same Element added automatically to all other Grid Items. !list-add-elements.gif! ## Moving Elements You can move an Element in any Item in the Grid Repeater, and there will be the same Element moved automatically in all other List Items. !list-move-elements.gif! ## Changing Element Properties You can change the Properties of any Item in the Grid Repeater, and there will be the same Property added automatically to all other Grid Items. !list-item-properties.png! ## Changing Element Background By default, you can enable the Background for all Items in the Grid Elements. !list-item-background-for-all-items.gif! You can also switch this behavior for the current Item. !list-item-background-for-one-item.gif! It works similarly for the Button Element added to the Grid Item. !list-change-properties.gif! ## Converting Elements To Grid Repeater If you duplicate a Group or selected Elements, you will see a dialog offering you to convert this Group or Elements to the Grid Repeater. !convert-group-selected-elements-into-list-repeater.gif! ## Grid ### Columns and Rows Change the number of Columns and Rows in the Property Panel for the Grid Repeater. It duplicates Items to fill out the Grid. Grid !list-columns-rows.gif! Change the number of Columns and Rows in the Context Toolbar for the Grid Repeater. !list-repeater-columns-rows.gif! ### Spacing Between Items You can change the Item Gap for the Grid Repeater. !list-item-gap.png! ### Image Background Animation On Hover for Grid Repeater Use the Hover Animation for the Image Background for the Items of the Grid Repeater Element. !list-repeater-image-bg-hover-animation.gif! ### Reordering of Grid items Now you can reorder the Grid Items by dragging them similar to the Grid Cells. !list-reorder.png! ### Grid in Responsive Modes You can set the different number of columns in the Responsive Modes. !list-responsive.png! ## Grid and Image in Tablet If the Grid Repeater and Image are placed near each other in the Desktop or Laptop Modes, then the Grid Element goes under the Image Element starting from the Tablet Mode. !list-and-image-in-tablet-mode.png! ## Grid Repeater Presets for Add Grid To ease difficulties in finding and using the Grid repeater instead of choosing the Grid in cases where the Grid Repeater would work more efficiently, you can find the Grid Repeater Presets in the Grid section of the Add Elements. !grid-repeater-presets-for-grid.png! ## Grid Repeater From Groups You can see the Best Practice dialog for Groups placed nearby, also you can turn to the Grid Repeater out of Groups placed in a row. !grid-repeater-presets-for-grid.png! ## Grid Repeater Item Colors You can specify different colors for Elements in Grid Repeater Items. You can use the All Items and Item options to set whether to use the color on all similar Elements or only in the current one. !grid-repeater-colors.gif! ##