You can create element groups in Showit to set click actions, hover actions, animations and more on groups. Move and resize a group on your page, and drill in to make any needed adjustments to the individual elements.
Create & Customize a Group
You can group multiple elements together so that they behave similarly to a single element. This can be useful if you'd like to hover over a group of elements to trigger each individual element's hover, if you'd like to set a single link on an entire group, or for moving and resizing groups of elements within your design.
How to Create a Group
To create a group, select multiple elements and click the Group Elements button at the top of the Properties Panel on the right.
Alternatively you can use the shortcut CMD+G (or CTRL+G for PC) to group multiple selected elements.
How to Customize Elements Within a Group
To make changes or adjustments to the elements within a group, double click into the group.
This will focus in on the group and allow you to select individual elements that you would like to move, make adjustments to, or change the settings of.
You can also drill in to your group by clicking on the group icon in the left side panel.
Add or Remove an Element from a Group
Once a group has been created, you can add and remove individual elements from that group.
How to Add Elements to a Group
To add an element, select both the element that you would like to add, along with the group you'd like to add it to.
You will see the toolbar icon above the group change to indicate you can add an element to the group, and the button at the top of the Properties Panel on the right will say Add to Group.
How to Remove an Element from a Group
If you'd like to remove an element from a group, drill in to that group by double clicking on it, then select the element that you'd like to remove.
The toolbar icon at the top of the group will change to let you know you can remove that element from the group, and the button at the top of the Properties Panel on the right will say Remove from Group. Use either of these options to remove the element.
Note: Removing all elements from a group will dismantle a group. Similarly, leaving only one element in a group will cause the group to dismantle.
Ungroup Elements
To ungroup elements, select a group and use CMD+Shift+G (or CTRL+Shift+G for PC). This will dismantle the group, leaving all individual elements on the page.
You will also see the toolbar icon above the selected group change to indicate you can ungroup, and the button at the top of the Properties Panel on the right will say Ungroup Elements.
