Summary

  • Overview
  • Video Lesson
  • Add Grid Repeater
  • Add Elements To Grid Repeater
  • Move, Resize, Rotate Elements
  • Change Item Order
  • Convert Elements To Grid Repeater
  • Grid Repeater Properties
  • Hover Effects In Grid Repeater
  • Grid Repeater In Responsive Modes

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

Video Lesson

More video lessons

Add 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

Add Elements To Grid Repeater

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

list-add-elements.gif

Move, Resize, Rotate Elements

You can move an Element in any Item in the Grid Repeater, and the same Element will be transferred automatically to all other List Items. While editing, the changes are synchronized in all Columns.

grid-repeater-editor.gif

Change Item Order

You can reorder the Grid Repeater Items by dragging them like the Grid Cells.

list-reorder.png

Convert Elements To Grid Repeater

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

convert-icons-grid-repeater-text.gif

You can convert the multiple selected Elements to Grid Repeater.

convert-multiselection-repeater.png

You can also choose the conversion option in the Property Panel.

convert-options-property-panel.png

Grid Repeater Properties

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

Change Element Background

You can default enable the Background for all Items in the Grid Elements.

grid-repeater-item-background.png

You can also switch this behavior for the current Item. It works similarly for the Button Element added to the Grid Item.

grid-repeater-item-background-one.png

Columns, Rows, And Gap

The Columns, Rows, and Gap Properties are combined into one section, like other Elements.

grid-repeater-reworked.png

Add Row Marker

Like the Add Column side icon, we have added the Add Row icon to the bottom of the Grid Repeater frame to simplify the addition of the Rows.

add-row-button.gif

Columns And Rows Options

Also, you can now choose the Columns and Rows operations for the Grid Repeater from the Context Menu.

columns-rows-context-menu.png

Hover Effects For Grid Repeater

You can apply all the Properties with the Hover for Elements used in the Grid Repeater.

hover-animation-grid-repeater.gif

Grid Repeater in Responsive Modes

You can set the different numbers of the Grid Repeater Columns in the Responsive Modes.

list-responsive.png

## Summary - Overview - Video Lesson - Add Grid Repeater - Add Elements To Grid Repeater - Move, Resize, Rotate Elements - Change Item Order - Convert Elements To Grid Repeater - Grid Repeater Properties - Hover Effects In Grid Repeater - Grid Repeater In Responsive Modes ## 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! ## Video Lesson <iframe width="600" height="330" src="https://www.youtube.com/embed/l2p2PXBm4Tg" title="Video Lesson: Grid Repeater Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> [More video lessons](page:1318) ## Add 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! ## Add Elements To Grid Repeater Click the round plus icon to add Elements to the Grid Repeater. You can add an Element to any Grid Item, and the same Element will be added automatically to all other Grid Items. !list-add-elements.gif! ## Move, Resize, Rotate Elements You can move an Element in any Item in the Grid Repeater, and the same Element will be transferred automatically to all other List Items. While editing, the changes are synchronized in all Columns. !grid-repeater-editor.gif! ## Change Item Order You can reorder the Grid Repeater Items by dragging them like the Grid Cells. !list-reorder.png! ## Convert Elements To Grid Repeater If you duplicate a Box or selected Elements, you will see a dialog offering to convert this Box or Elements to the Grid Repeater. !convert-icons-grid-repeater-text.gif! You can convert the multiple selected Elements to Grid Repeater. !convert-multiselection-repeater.png! You can also choose the conversion option in the Property Panel. !convert-options-property-panel.png! ## Grid Repeater Properties You can change the Properties of any Item in the Grid Repeater, and the same Property will be added automatically to all other Grid Items. ### Change Element Background You can default enable the Background for all Items in the Grid Elements. !grid-repeater-item-background.png! You can also switch this behavior for the current Item. It works similarly for the Button Element added to the Grid Item. !grid-repeater-item-background-one.png! ### Columns, Rows, And Gap The Columns, Rows, and Gap Properties are combined into one section, like other Elements. !grid-repeater-reworked.png! ### Add Row Marker Like the Add Column side icon, we have added the Add Row icon to the bottom of the Grid Repeater frame to simplify the addition of the Rows. !add-row-button.gif! ### Columns And Rows Options Also, you can now choose the Columns and Rows operations for the Grid Repeater from the Context Menu. !columns-rows-context-menu.png! ### Hover Effects For Grid Repeater You can apply all the Properties with the Hover for Elements used in the Grid Repeater. !hover-animation-grid-repeater.gif! ## Grid Repeater in Responsive Modes You can set the different numbers of the Grid Repeater Columns in the Responsive Modes. !list-responsive.png! ##