{"title":"Adding Text Layer","id":51927,"link":"https:\/\/env.averta.net\/en\/step\/adding-text-layer\/","parent":[51827],"content":"<p>Here you can find out how to create a text layer. Text layer can contain any HTML content. If you want to show a single image or video, it is recommended to use <a href=\"https:\/\/env.averta.net\/en\/step\/adding-image-layer\/?b=51928,51928\" title=\"Adding Image Layer\">image<\/a> or <a href=\"https:\/\/env.averta.net\/en\/step\/adding-video-layer\/?b=51929,51929\" title=\"Adding Video Layer\">video layer<\/a> instead.<\/p>\n<p>Layers are defined in slider by <code>ms-layer<\/code> class name and their type is specified by <code>data-type<\/code> attribute. The example below creates a simple text layer over a slide.<\/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=\"text\"&gt;\r\n\t\t\t\tText layer content here...\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 a text 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<li><a href=\"https:\/\/env.averta.net\/en\/step\/linking-a-layer\/?b=51973,51973\" title=\"Linking a Layer\">Linking layer<\/a><\/li>\n<li style=\"list-style-type: none;\"><\/li>\n<\/ul>\n","type":"solution"}