Layer Styles & Positioning
- 1. Style Template
- 2. Font Family
- 3. Font Size
- 4. Line Height
- 5. Text Color
- 6. Bold Text
- 7. Letter Spacing
- 8. Layer Tag
- 9. Horizontal Align
- 10. Vertical Align
- 11. Horizontal Offset
- 12. Vertical Offset
- 13. Layer Width
- 14. Layer Height
- 15. Text Wrapping
- 16. Image Sizing
1. Style Template
Automatically apply styling from a list of style template presets.
2. Font Family
Setup your Google Fonts from the slider’s settings section.
3-4. Font Size / Line Height
Font-size can be set in pixels, and line-height is useful for paragraphs of text.
6-7. Font Weight / Letter Spacing
Make your text bold or add some spacing between the letters.
8. Layer Tag
Choose which type of HTML tag should be used for the Layer. Usually “div” is best, but you can also use H1, H2, etc. for enhanced SEO.
9-10. Horizontal / Vertical Aign
* Layer content should always be positioned within the “Layers Grid”. Otherwise the content may bleed off the screen when the slider is resized. Click here for a visual example.
11-12. Horizontal / Vertical Offsets
Offset positions from initial alignments (#7-8). For example, a “Horizontal Alignment” of “center” with a “Horizontal Offset” of 50px would equal 50px to the left of center.
13-14. Layer Width / Height
Entering pixel values will give the layer a predefined size. Or for text layers, enter “auto” for automatic sizing.
15. Text Wrapping
Meant for Layers where text should wrap at a certain screen size. Apply a fixed width (#11) to use the text-wrapping option.
16. Image Sizing
Useful for applying a “cover” or “contain” background-size position to Image Layers
Click the “+” button to activate the advanced styling section.
- 1. Font Opacity
- 2. Italics
- 3. Underline
- 4. Text Transform
- 5. Layer Selectable
1. Font Opacity
Enter a number between 0-1, such as “0.75”.
4. Text Transform
Capitalize each word, or convert the text to uppercase or lowercase automatically.
5. Layer Selectable
Choose if the text can be highlighted by the user for copy/paste
Blend Mode Example:
Image Background Example:
- 1. Padding Top
- 2. Padding Right
- 3. Padding Bottom
- 4. Padding Left
- 5. Margin Top
- 6. Margin Right
- 7. Margin Bottom
- 8. Margin Left
- 9. Text Align
- 10. Layer Selectable
Useful for applying a background to the Layer, and also helpful for improving readability.
Useful for apply space between columns and rows.
9. Text Align
Set the text-align for your HTML/Text Layers
Applicable for content placed inside a fixed-sized container (via Layer Width/Height).
- 1. Border Color
- 2. Border Opacity
- 3. Border Style
- 4. Border Width Top
- 5. Border Width Right
- 6. Border Width Bottom
- 7. Border Width Left
- 8. Border Radius Top Left
- 9. Border Radius Top Right
- 10. Border Radius Bottom Right
- 11. Border Radius Bottom Left
2. Border Opacity
Enter a number between 0-1, such as “0.75”. Or for no background color (i.e. “transparent”), enter the number “0”.
3. Border Style
Choose “solid” for a regular border, and “none” for no border.
4-7. Border Width
Border sizes in pixels for each side.
8-11. Border Radius
Use to achieve rounded corners for your layers. Applicable for when the layer also has a background color applied (see “Background” tab above).
- Quick Tip:
Enter "50%" for all 4 "Border Radius" fields to create a perfect circle.
- 1. Opacity
- 2. scaleX
- 3. scaleY
- 4. skewX
- 5. skewY
Apply a transparency level to the entire layer. Enter a number between 0-1, such as “0.75”.
- 1. rotationX
- 2. rotationY
- 3. rotationZ
- 4. Horizontal Origin
- 5. Vertical Origin
1-2. rotationX, rotationY
Rotate the layer in 3D space:
Can be used in combination with #1 and #2 above, but can also be used by itself for a traditional rotation (i.e. non-3D).
4-5. Horizontal/ Vertical Origin
Usually “50%” is best. Click here for more information.
The options here can be applied to SVG Layers, and are for the SVG’s “stroke”. This is similar to a CSS border, but not exactly. Instead, it’s more similar to applying a “Layer Style -> Stroke” in Photoshop.
- 1. Stroke Color
- 2. Stroke Opacity
- 3. Stroke Width
- 4. Stroke Dash Array
- 5. Stroke Dash Offset
3. Stroke Width
Similar to the CSS “border-width” property in that it’s the amount of pixels used for the stroke.
4. Stroke Dash Array
The amount of dashes to apply to the stroke.
5. Stroke Dash Offset
Rotate the orientation of the stroke dashes.
Apply sharp corners to the sides of your layers. The screenshot to the right is a useful example of this, where the layer is positioned at the bottom of the slider.
Advanced CSS is in relation to the selected layer style (circled in the screenshot below).
Choose “Template” to modify the CSS for the currently selected predefined layer style.
CSS entered here will be attached to the predefined layer style (i.e. will carry over when used for additional layer content).
Style from Options:
CSS styles automatically applied from the layer’s chosen settings.
Additional Custom Styling:
Add additional CSS that can’t normally be applied through the layer’s WYSIWYG editor.
Choose “Layer” to add CSS to this specific layer only.
CSS entered here will not be attached to the predefined style, and therefore will not carry over when the predefined layer style is used for other layers.
The advanced styling section has two possible “states” where styles can be applied.
The first is “idle”, which will be the default styles for the layer, and the second is “hover”, where you can change the layer’s styles for its mouseover state.
To setup some special styles for the layer’s “hover” state, set “Layer Hover” to “ON”, as shown in the following screenshot:
- Quick Tip:
Use the "Force Animation" to ensure that hovers are always honored regardless of the Layer's default animation.
Then once “Layer Hover” is set to “ON”, you’ll see settings for the two states that can be toggled.
Then you’ll have the ability to set specific styles for both the layer’s “Idle” state (default appearance), and its “Hover” state (mouseover appearance).
For convenience, click the “copy” button to copy over styles from one state to the other.
For example, if you’ve applied multiple styles to the “idle” state, but only want to adjust the border-color for the “hover” state, click the “hover” state button, then click the “copy” button, and then choose “copy from “idle”.
Special Hover Settings
- 1. Animation Speed
- 2. Animation Easing
- 3. Hover Mouse Cursor
- 4. z-index Layer Order
1-2. Animation Speed / Easing
Idle styles will automatically animate when converted to their hover styles.
“Animation Speed” is in milliseconds, and a number between 200-500 is usually best.
“Easing” is what gives a web animation that “real life” type of movement. Choose between over 35 options to see which one you like best. The most commonly used options are “Power2.easeOut”, and “Power3.easeOut”.
3. Mouse Cursor
The most common choice for a hover mouse cursor is “pointer”, which will be a hand symbol. Other common choices are “auto” and “default”.
Specify a z-index for the Layer to help avoid visual and hotspot collisions with other Layers. Lower numbers (starting with 0) represent the lowest in the stacking order, and a high number such as “99” will ensure that the Layer is always displayed on top of all other Layers.
The “Toggle” option is great for switching between content on a mouse click. In the following example, we’ll use the “Toggle” option to setup a “FullScreen” button with two different icon states.