Groups in the SiteDu.de Website builder allow&nbsp;you to group elements on the layers' list. For example, one can bind all the header elements in the "Header" folder. Group of elements helps you keep the layers list clear and organized. <h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">What does a group look like?</h2>A Group allows you to keep chosen elements together, automatically adjusting its size. To view the contents of the group, simply select it from the layers list. Once selected, the group of objects will be highlighted with a green dotted line.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_82-l9ptmfmx.png" alt="" width="inherit" height="inherit"> &nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Create a new group</h2>In order to create a new group, select a folder icon at the bottom of the layers' list.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_80-l9ptmp64.png" alt="" width="inherit" height="inherit"> &nbsp;Another way is to select elements&nbsp; and press CTRL+G. A new group of elements will be automatically created.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add elements to a group</h2>To add elements to a group, select elements &nbsp;and drag them to a&nbsp; previously created group.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_81-l9ptmgbo.png" alt="" width="inherit" height="inherit"> &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Delete elements form a group</h2>Elements added to a group can be easily removed from it&nbsp;by dragging an&nbsp;object out of a group in the&nbsp;layers' list.&nbsp; &nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Edit your Group</h2>Once you click on a group , you will be able to&nbsp;edit its style and content. Group's style can be edited just like any other element in the website builder. You may set background color, transparency, border, shadow and more.&nbsp;When you click on a group twice, you will be able to edit all the&nbsp;elements in it.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_84-l9ptmgx2.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">A group with 100% width</h2>If you set the group width to 100%, it will act like a website section. It will adjust its width to the browser width and&nbsp;height will be calculated depending on the group elements.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_83-l9ptmhk0.png" alt="" width="inherit" height="inherit">&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Bind two groups</h2>Binding two groups (or even more) allows&nbsp;you to create a website which will adjust its style when you change its content. In order to link websites, select a group and in the Settings panel choose "Add bind".&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gr3-lsyqmxn3.gif" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Vertical relation</h3>Vertical relation is the first relation type between groups. It automatically moves groups so they don't overlap each other. The important thing&nbsp;is: if one of the groups gets pushed down, all the elements in this group will get pushed out as well.&nbsp;&nbsp;&nbsp;Vertical relation is mainly used when you want the height of your website to dynamically and automatically adjust to its content.&nbsp;&nbsp;The perfect example of vertical relations is putting a text element in one group and an image, which needs to always stay behind the text, in&nbsp;another binded group. Regardless of the amount of text, the image will always adjust itself and stay behind it. <img src="https://help.webwave.me/lib/dkwr2z/gr4-lsyqpkbn.gif" alt="" width="inherit" height="inherit">&nbsp;

Learn how to group elements, so you can edit the group as a whole

Groups in the SiteDu.de Website builder allow you to group elements on the layers' list. For example, one can bind all the header elements in the "Header" folder. Group of elements helps you keep the layers list clear and organized.

## What does a group look like?

A Group allows you to keep chosen elements together, automatically adjusting its size. To view the contents of the group, simply select it from the layers list. Once selected, the group of objects will be highlighted with a green dotted line.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_82-l9ptmfmx.png)

## Create a new group

In order to create a new group, select a folder icon at the bottom of the layers' list.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_80-l9ptmp64.png)

Another way is to select elements and press CTRL+G. A new group of elements will be automatically created.

## Add elements to a group

To add elements to a group, select elements and drag them to a previously created group.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_81-l9ptmgbo.png)

## Delete elements form a group

Elements added to a group can be easily removed from it by dragging an object out of a group in the layers' list.

## Edit your Group

Once you click on a group , you will be able to edit its style and content. Group's style can be edited just like any other element in the website builder. You may set background color, transparency, border, shadow and more.

When you click on a group twice, you will be able to edit all the elements in it.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_84-l9ptmgx2.png)

## A group with 100% width

If you set the group width to 100%, it will act like a website section. It will adjust its width to the browser width and height will be calculated depending on the group elements.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_83-l9ptmhk0.png)

## Bind two groups

Binding two groups (or even more) allows you to create a website which will adjust its style when you change its content. In order to link websites, select a group and in the Settings panel choose "Add bind".

![](https://help.webwave.me/lib/dkwr2z/gr3-lsyqmxn3.gif)

### Vertical relation

Vertical relation is the first relation type between groups. It automatically moves groups so they don't overlap each other. The important thing is: if one of the groups gets pushed down, all the elements in this group will get pushed out as well.

Vertical relation is mainly used when you want the height of your website to dynamically and automatically adjust to its content.

The perfect example of vertical relations is putting a text element in one group and an image, which needs to always stay behind the text, in another binded group. Regardless of the amount of text, the image will always adjust itself and stay behind it.

![](https://help.webwave.me/lib/dkwr2z/gr4-lsyqpkbn.gif)

Groups in the SiteDu.de Website builder allow&nbsp;you to group elements on the layers' list. For example, one can bind all the header elements in the "Header" folder. Group of elements helps you keep the layers list clear and organized.&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Create a new group</h2>In order to create a new group, select a folder icon at the bottom of the layers' list.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_80-l9ptmp64.png" alt="" width="inherit" height="inherit"> &nbsp;Another way is to select elements&nbsp; and press CTRL+G. A new group of elements will be automatically created.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add elements to a group</h2>To add elements to a group, select elements &nbsp;and drag them to a&nbsp; previously created group.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_81-l9ptmgbo.png" alt="" width="inherit" height="inherit"> &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Delete elements form a group</h2>Elements added to a group can be easily removed from it&nbsp;by dragging an&nbsp;object out of a group in the&nbsp;layers' list.&nbsp; &nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">What does a group look like?</h2>Group keeps elements of your choice and its size is calculated automatically. In order to see what's in the group, select the group on the layers' list. The Group of objects will have a green dotted line around.&nbsp;&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_82-l9ptmfmx.png" alt="" width="inherit" height="inherit"> &nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Edit your Group</h2>Once you click on a group , you will be able to&nbsp;edit its style and content. Group's style can be edited just like any other element in the website builder. You may set background color, transparency, border, shadow and more.&nbsp;When you click on a group twice, you will be able to edit all the&nbsp;elements in it.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_84-l9ptmgx2.png" alt="" width="inherit" height="inherit">&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">A group with 100% width</h2>If you set the group width to 100%, it will act like a website section. It will adjust its width to the browser width and&nbsp;height will be calculated depending on the group elements.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_83-l9ptmhk0.png" alt="" width="inherit" height="inherit">&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Bind two groups</h2>Binding two groups (or even more) allows&nbsp;you to create a website which will adjust its style when you change its content. In order to link websites, select a group and in the Settings panel choose "Add bind".&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gr3-lsyqmxn3.gif" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Vertical relation</h3>Vertical relation is the first relation type between groups. It automatically moves groups so they don't overlap each other. The important thing&nbsp;is: if one of the groups gets pushed down, all the elements in this group will get pushed out as well.&nbsp;&nbsp;&nbsp;Vertical relation is mainly used when you want the height of your website to dynamically and automatically adjust to its content.&nbsp;&nbsp;The perfect example of vertical relations is putting a text element in one group and an image, which needs to always stay behind the text, in&nbsp;another binded group. Regardless of the amount of text, the image will always adjust itself and stay behind it. <img src="https://help.webwave.me/lib/dkwr2z/gr4-lsyqpkbn.gif" alt="" width="inherit" height="inherit">&nbsp;

Group elements into sections

Groups in the SiteDu.de Website builder allow&nbsp;you to group elements on the layers' list. For example, one can bind all the header elements in the "Header" folder. Group of elements helps you keep the layers list clear and organized. <h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">What does a group look like?</h2>A Group allows you to keep chosen elements together, automatically adjusting its size. To view the contents of the group, simply select it from the layers list. Once selected, the group of objects will be highlighted with a green dotted line.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_82-l9ptmfmx.png" alt="" width="inherit" height="inherit"> &nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Create a new group</h2>In order to create a new group, select a folder icon at the bottom of the layers' list.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_80-l9ptmp64.png" alt="" width="inherit" height="inherit"> &nbsp;Another way is to select elements&nbsp; and press CTRL+G. A new group of elements will be automatically created.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add elements to a group</h2>To add elements to a group, select elements &nbsp;and drag them to a&nbsp; previously created group.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_81-l9ptmgbo.png" alt="" width="inherit" height="inherit"> &nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Delete elements form a group</h2>Elements added to a group can be easily removed from it&nbsp;by dragging an&nbsp;object out of a group in the&nbsp;layers' list.&nbsp; &nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Edit your Group</h2>Once you click on a group , you will be able to&nbsp;edit its style and content. Group's style can be edited just like any other element in the website builder. You may set background color, transparency, border, shadow and more.&nbsp;When you click on a group twice, you will be able to edit all the&nbsp;elements in it.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_84-l9ptmgx2.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">A group with 100% width</h2>If you set the group width to 100%, it will act like a website section. It will adjust its width to the browser width and&nbsp;height will be calculated depending on the group elements.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_83-l9ptmhk0.png" alt="" width="inherit" height="inherit">&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Bind two groups</h2>Binding two groups (or even more) allows&nbsp;you to create a website which will adjust its style when you change its content. In order to link websites, select a group and in the Settings panel choose "Add bind".&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/gr3-lsyqmxn3.gif" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Vertical relation</h3>Vertical relation is the first relation type between groups. It automatically moves groups so they don't overlap each other. The important thing&nbsp;is: if one of the groups gets pushed down, all the elements in this group will get pushed out as well.&nbsp;&nbsp;&nbsp;Vertical relation is mainly used when you want the height of your website to dynamically and automatically adjust to its content.&nbsp;&nbsp;The perfect example of vertical relations is putting a text element in one group and an image, which needs to always stay behind the text, in&nbsp;another binded group. Regardless of the amount of text, the image will always adjust itself and stay behind it. <img src="https://help.webwave.me/lib/dkwr2z/gr4-lsyqpkbn.gif" alt="" width="inherit" height="inherit">&nbsp;

Got a builder package? Learn how to use it and how to edit your content

Was this article helpful?