Groups in website builder WebWave CMS allows you to group elements on layers list - for example, place all header elements in "Header" folder. Group of elements helps you keep layers list neat and tidy.  


Create a new group

Add elements to a group

Delete elements from a group

What does a group look like?

Group edition

A group with 100% width

Bound two groups

Bound many groups 



 Create a new group

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



You can also select elements on a website, right click on them and choose "Group".


The last way is to select elements on a website 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 on a website and drag them to a  previously created group.



Delete elements form a group

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

If you want to, you can regroup all elements at once. Select a group of elements by pressing "CTRL+SHIFT+G", right click on them and choose "Regroup".




 What does a group look like?

Group holds elements of your choice and its size is calculated automatically. In order to see what's in the group, select it on layers list. Group of objects will have a green dotted line around. 




 Group edition

When you click on a group once, you will select it and will be able to edit its style and content. Group style can be edited just like any other element in website builder WebWave. 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.




 A group with 100% width

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




 Bound two groups

Linking groups 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 Settings panel choose "Add bind".



 Vertical relation

Vertical relation is the first relation type between groups and it automatically moves groups so they don't overlap each other. What's important, if one of the groups gets pushed down, all elements in this group will get 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 one. Regardless of the amount of text, the image will always stay behind it.


 Horizontal relation

Horizontal relation automatically resizes group to the same height (only the background and border of a group are resized). It is particularly useful when creating columns, which need to always end in the same place - for example, a column with a menu on the left side and a column with content and articles in the central area.



 Bound many groups

In WebWave website builder you can also bound many groups and create sections on your website. 

Group of layers and its properties

15 January 2019


Didn't find a solution to your problem? Contact us on live online chat or ask on Facebook group.


Missing any feature? Share your ideas with us.





This website has been entirely created using our web design software WebWave. We use cookies to give you the best possible experience. Read more.







Click here to chat with us.




Free website builder WebWave makes creating websites effortless. You can start building your website either from scratch with a blank page or, if you are looking for some inspiration, with a free template.  Web design software for free? It is easy!