Layer Styles & Positioning

03.15.2016Jason

After adding your layer to the slide, use the “Style” section to format text, adjust layer positioning, and also apply additional CSS styles to your layer content.

1. Size & Position

Legend:

1. Selected Preset
2. Font Family
3. Font Size
4. Line Height
5. Bold Text
6. Text Color
7. Horizontal Align
8. Vertical Align
9. Horizontal Offset
10. Vertical Offset
11. Layer Width
12. Layer Height
13. Layer Tag
14. Text Wrapping

2. Font Family

Setup your Google Fonts from the slider’s settings section.

7-8. Horizontal / Vertical Aign

Alignment can be based on Layers Grid Size or the entire size of the slider, which is set in the layer’s Behavior section.

* 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.

9-10. 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.

11-12. Layer Width / Height

Entering pixel values will give the layer a predefined size. Or for text layers, enter “auto” for automatic sizing.

13. 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.

14. Text Wrapping

Used in combination with a defined pixel width.. For example, if your layer’s width (#11) is 200px, use the Text-Wrapping option to automatically wrap long lines of text.

2. Background / Advanced Styles

Click the “+” button to activate the advanced styling section.

1. Font Opacity
2. Italics
3. Underline
4. Text Transform
5. Text Align
6. 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. Text Align

Text align for the layer itself (unrelated to actual layer positioning).

Useful for layer text with multiple lines (i.e. a paragraph of text).

6. Layer Selectable

Choose if the text can be highlighted by the user for copy/paste

1. Background Color
2. Background Opacity
3. Padding Top
4. Padding Right
5. Padding Bottom
6. Padding Left

2. Background Opacity

Enter a number between 0-1, such as “0.75”. Or for no background color (i.e. “transparent”), enter the number “0”.

3-6. Padding

When a background color is used, add some “padding” to give your layer text a nice, spaced out background.

Otherwise, for layers with no background color (i.e. “Background Opacity” equals “0”), use the number “0” for the padding values.

1. Border Color
2. Border Opacity
3. Border Style
4. Border Size
5. Top Border Radius
6. Right Border Radius
7. Bottom Border Radius
8. Left Border Radius

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.

5-8. 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

1. Opacity

Apply a transparency level to the entire layer. Enter a number between 0-1, such as “0.75”.

1-3. scaleX, scaleY *

Zoom the layer’s width. Click here for an example of “scaleX”, and here for an example of “scaleY”.

* These transforms work best when both have the same values applied (i.e. scaleX = 1.5, scaleY = 1.5).

4-5. skewX, skewY

Applies a 2D angle to the layer. Click here for an example of “skewX”, and here for an example of “skewY”.

1. rotationX
2. rotationY
3. rotationZ
4. Horizontal Origin
5. Vertical Origin

1-2. rotationX, rotationY

Rotate the layer in 3D space:

3. rotationZ

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.

1. 3D Perspective
2. translateZ

1. 3D Perspective

Adds depth to an object in 3D space. Click here for additional information.

1. translateZ

The layer’s z-axis position in 3D space. Click here to see an example.

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.

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.

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:

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”.

4. Z-Index

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.