Layer Style
You can select layers in the Slide Editor, to open up the layer window.
In this article you can learn the common positioning and effect options for the layers. You can find these options at the Style tab of the layer window.
Tips for using the layer window
Hover/Normal and other special states
The hover, normal and any other states can be selected at some of the sections:
Opacity at the color picker
Within most color pickers, you can find an opacity chooser on the right:
More options
Press the MORE buttons:
to see additional settings, which aren't used that often:
Default positioning
These options are available for layers which are in Default position.
Position
Position
The editing mode the layer is in.
Align
The horizontal alignment of the layer. If there's no Max Width set, this options sets one automatically.
- Inherit: Inherits the align from the parent. By default this means left alignment.
- Left: Aligns the layers to the left.
- Center: Aligns the layers to the center.
- Right: Aligns the layers to the right.
Size
Max Width
The maximum width of the layer. You can also set it on the UI.
Height
You can set a fix height for the layer, so it won't be auto anymore.
Margin
You can use margins to create distance between the layers.
⚠️ Warning: Margins are for creating distance, not for positioning. Use the Inner Align and Vertical Align on the layer's parent for positioning. Watch the dedicated tutorial video to learn more about the positioning.
Absolute positioning
These options are available for layers which are in Absolute position.
Position
Position
The editing mode the layer is in.
Align
The horizontal align of the layer.
Vertical Align
The vertical align of the layer.
Left
The distance from the horizontal align position.
Top
The distance from the vertical align position.
Responsive
By default the positioning is responsive, which means its scaled with the slider. By turning it off you can have the Left and Top values as fixed distances. It's useful for example, when you want to have a layer that's always 10px away from the top-left corner.
Linked To Pro
You can link your Absolute layer to another layer on the same level. Learn more about the layer linking.
Size
Width
The width of the layer.
Height
The height of the layer.
Responsive
By default the sizing is responsive, which means its scaled with the slider. By turning it off, you can make your layer the set Width and Height on the device. It's useful for images which you use as design element.
Common
Responsive
Hide On
You can hide this layer on the selected devices.
Text Scale
You can adjust the font size device specifically on this device. You can find this on the Responsive bar, and use it as seen on the Responsive Settings video.
Effect
Parallax Pro
You can enable the layer parallax effect for this layer. The number you set will define the depth/strength of the effect
Crop
You can crop the layer's content.
☝️ Note: If you use the Scroll option at the Crop on your Content layer your Slide link will not work on click/touch action to allow scrolling through the Content layer's content on touch screen devices.
Rotation
You can rotate this layer.
Advanced
Z Index
You can set the z-index for the layer.
CSS Class
⚠️ Warning: To be able to take advantage of the CSS Class option you'll need a developer's knowledge.
Keep in mind that we're unable to provide help with custom coding, or the possible issues that are happening because of them.
You can give a custom CSS class to the layer. The field accepts any valid CSS class name (without the . ).
You can use this CSS class to write your own codes and target this specific layer with it. For example, if you write "example" (without quotemarks) into that field, in a HTML code the result would look like:
<div class="example">
<div>Inner html code depends on layer</div>
</div>
and you can write CSS codes like this:
.example *{
color:red!important;
}
to override the styling.