{"title":"Adding Group Layer","id":51934,"link":"https:\/\/env.averta.net\/en\/step\/adding-group-layer\/","parent":[51827],"content":"<p>Group layer lets you group your layers. Layers can be inside a group and get position related to the group layer. It helps you easily move multiple layers, add single or additional layer animation to them, and create a masked area to move layers inside it.<\/p>\n<p>To create a group layer, you need to specify it with <code>data-layer<\/code> class name and set its type by <code>data-type=\"group\"<\/code>. Other layers need to be added as a child element of the group to locate inside the group layer. The following example create a group layer containing two text layers.<\/p>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t\t&lt;div class=\"ms-layer\" data-type=\"group\"&gt;\r\n\t\t\t\t&lt;div class=\"ms-layer\" data-type=\"text\"&gt;\r\n\t\t\t\t\tText layer content here...\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"ms-layer\" data-type=\"text\"&gt;\r\n\t\t\t\t\tText layer content here...\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<p>This article only describes how to create the group layer. If you need more information about layers, check out the following articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/positioning-layers\/?b=51939,51939\" title=\"Positioning Layers\">Positioning layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/defining-animation-for-the-layers\/?b=51959,51959\" title=\"Defining Animation for the Layers\">Animating layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/masking-a-layer\/?b=51971,51971\" title=\"Masking a Layer\">Masking layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/?b=51972,51972\" title=\"Adding a Layer Parallax Effect\">Layer parallax effect<\/a><\/li>\n<\/ul>\n","type":"solution"}