{"title":"Positioning Layers","id":51939,"link":"https:\/\/env.averta.net\/en\/step\/positioning-layers\/","parent":[51827],"content":"

Locating layers<\/h2>\n

To locate a layer over a slide, use data-offset<\/code> attribute. The attribute value can contain multiple parameters.<\/p>\n

Parameter definition pattern<\/h3>\n

To add offset parameters, they should be added between {<\/code> and }<\/code> and parameter values define by param:value<\/code> pattern, and like CSS, separated by ;<\/code>. For example data-offset=\"{ x:30px; y:100px; origin:mc; }\"<\/code><\/p>\n

Offset parameters<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n
Name<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
x<\/td>\nSpecifies the layer position horizontally relative to layer origin in pixels or percentage (x:100px;<\/code> or x:20%<\/code>).<\/td>\n<\/tr>\n
y<\/td>\nSpecifies the layer position vertically relative to layer origin in pixels or percentage (y:100px;<\/code> or y:20%<\/code>).<\/td>\n<\/tr>\n
width<\/td>\nSpecifies the layer width size in pixels or percentage.<\/td>\n<\/tr>\n
height<\/td>\nSpecifies the layer height size in pixels or percentage.<\/td>\n<\/tr>\n
origin<\/td>\nLets you modify the origin of the layer position. Default value is tl<\/code>.
\nPossible values are:<\/p>\n
    \n
  • tl<\/code> – Position from the top and left.<\/li>\n
  • tc<\/code> – Position from the top and center.<\/li>\n
  • tr<\/code> – Position from the top and right.<\/li>\n
  • ml<\/code> – Position from the middle and left.<\/li>\n
  • mc<\/code> – Position from the middle and center.<\/li>\n
  • mr<\/code> – Position from the middle and right.<\/li>\n
  • bl<\/code> – Position from the bottom and left.<\/li>\n
  • bc<\/code> – Position from the bottom and center.<\/li>\n
  • br<\/code> – Position from the bottom and right.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
absolute<\/td>\nEnabled by default. Disabling this option (absolute:false;<\/code>) lets you set the layer to get position relatively to its parent element. It is useful when you are adding a layer inside a column grid or you want to control the layer positioning with CSS and media queries. Disabling this option ignores x<\/code>, y<\/code> and origin<\/code> parameters.<\/td>\n<\/tr>\n
contentAlign<\/td>\nSpecifies alignment of the layer content when the absolute<\/code> parameter is disabled. Possible values are left<\/code>, right<\/code> and center<\/code>.<\/td>\n<\/tr>\n
inline<\/td>\nEnabling this option adds display inline style to the layer element, it is useful when you need to add two or more layers in a line. This parameter is only effective if the absolute<\/code> is disabled.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The following example locates the layer from the center of the slider:<\/p>\n

\t<div id=\"masterslider\" class=\"master-slider\">\r\n\t\t<div class=\"ms-slide\">\r\n\t\t\t<!-- ... -->\r\n\t\t\t\t<div class=\"ms-layer\"\r\n\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t data-offset=\"{ origin:mc; x:100px; y:-100px; width:95px; }\"\r\n\t\t\t\t>\r\n\t\t\t\t\tText layer content\r\n\t\t\t\t<\/div>\r\n\t\t\t<!-- ... -->\r\n\t\t<\/div>\r\n\t\t<!-- ... -->\r\n\t<\/div><\/pre>\n
Relocate the layer in a breakpoint<\/h3>\n
If you need to change the layer position on a breakpoint<\/a>, you can set a new offset attribute with the breakpoint name. For example,?data-tablet-offset=\"{ origin:tl; x:100px; y: 150px;}\"<\/code>. In the following example, the text layer relocates in the tablet and mobile devices:<\/p>\n
\t<div id=\"masterslider\" class=\"master-slider\">\r\n\t\t<div class=\"ms-slide\">\r\n\t\t\t<!-- ... -->\r\n\t\t\t\t<div class=\"ms-layer\"\r\n\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t data-offset=\"{ origin:mc; x:100px; y:-100px; width:95px; }\"\r\n\t\t\t\t\t data-tablet-offset=\"{ origin:bl; x:0; y:100px; width:100px; }\"\r\n\t\t\t\t\t data-mobile-offset=\"{ origin:tr; x:10px; y:10px; }\"\r\n\t\t\t\t>\r\n\t\t\t\t\tText layer content\r\n\t\t\t\t<\/div>\r\n\t\t\t<!-- ... -->\r\n\t\t<\/div>\r\n\t\t<!-- ... -->\r\n\t<\/div><\/pre>\n
Important: <\/strong>If the offsets are not defined for smaller breakpoints, the layer considers the first defined offset for the larger breakpoint. For example when the mobile offset is not set, the tablet offset will be considered for the mobile size instead of?data-offset<\/code> value.<\/p>\n
Note: <\/strong>Breakpoint names are defined by breakpoint option. For more information check out Breakpoints<\/a> article.<\/p>\n
Hide layer in a breakpoint<\/h3>\n
If you need to hide a layer in a breakpoint, you can set hidden:true<\/code> parameter in the offset attribute. For example,?data-tablet-offset=\"{hidden:true;}\"<\/code> hides the layer on tablet and mobile sizes.<\/p>\n
Wrapping layers<\/h2>\n
It is optional to set the layer to wrap with the wrapper container. The wrapper container appears in the center of the slider and its max-width sets by slider width<\/code> option. If your slider is boxed<\/code>, the wrapper container gets the same width as the slider’s. Therefore, this will make more difference if the slide is fullscreen<\/code> or fullwidth<\/code>. By default, all the layers wrap by the wrapper. To disable it, you can add data-wrap=\"false\"<\/code> attribute to the layer element.<\/p>\n
Resizing layer<\/h2>\n
Layers resize when the slider resizes by the browser window or gets smaller in a mobile device screen. You can set how a layer reacts to the slider resizing by the following attributes:<\/p>\n
    \n
  • data-resize<\/code> – Disables layer resizing (data-resize=\"false\"<\/code>).<\/li>\n
  • data-fixed<\/code> – Let you to set the layer fixed when the slider resizes. (data-fixed=\"true\"<\/code>).<\/li>\n
  • data-reset-scale<\/code> – Enabling this option resets the layer scaling after each breakpoint (data-reset-scale=\"true\"<\/code>).<\/li>\n
  • data-upscale<\/code> – Disabling this option prevents layer to get larger that its actual size in large screen sizes. (data-upscale=\"false\"<\/code>).<\/li>\n<\/ul>\n
    Layer position attribute<\/h2>\n
    You can set how the layer gets position by data-position<\/code> attribute. Default value is normal<\/code>. Possible values are:<\/p>\n
      \n
    • normal<\/code> – Slide layer moves by slide when the slide changes.<\/li>\n
    • fixed<\/code> – Slide layer remains stationary when the slide changes.<\/li>\n
    • static<\/code> – It is same as normal<\/code>, but the static layer is not animatable. It is useful to add a content without any animation and stationary over a slide, or over the slider as an overlay layer.<\/li>\n<\/ul>\n","type":"solution"}