Before After layer

You can find the Before After layer in the Slide Editor.

The Before After layer lets you create the popular before after image effect in Smart Slider.

Content

General

Before image

You can select the before image the layer displays.

After image

You can select the after image the layer displays.

Label

Labels

Enables the option to display a label for the before and after images.

Show Label

You can change when the label shows up on the layer.

• Normal: The label shows up when there's no interaction with the layer.
• Hover: The label shows up only when the mouse is over the layer.
• Always: The label always shows up.

Position

You can select the position of the label.

• Start: If the Direction is Horizontal the labels display at the top of the layer. If the Direction is Vertical the labels display at the left side of the layer.
• Center If the Direction is Horizontal the labels display at the center of the layer. If the Direction is Vertical the labels display at the middle of the layer.
• End If the Direction is Horizontal the labels display at the bottom of the layer. If the Direction is Vertical the labels display at the right side of the layer.

Before label

This text is displayed in the label for the before image.

After label

This text is displayed in the label for the after image.

Background

The background color of the label.

Behavior

Direction

You can choose the interaction direction of the layer.

• Horizontal: The Before and after images change horizontally.
• Vertical: The Before and after images change vertically.

Interaction

You can choose what kind of interaction changes the images.

• Drag: To reveal more of the before or after image, you need to click and drag the divider.
• Hover The divider follows the mouse movement to reveal more of the before or after image.

To support touch screen devices clicking anywhere on the image makes the divider to jump to that position, regardless of which interaction was selected.

Divider

Type

This sets the look of the divider.

• Line: Displays a single as a divider.
• Arrow: Displays a single line with arrows as a divider.
• Circle: Displays a single line with arrows closed in a circle shape as a divider.
• Rectangle: Displays a single line with arrows closed in a rectangular shape as a divider.

Color

The color of the divider.

Position

The starting position of the divider.

Width

The width of the divider.

Caption

Caption

You can display a caption on the Before After layer.

Show Caption

This option decides how the caption is displayed.

• Normal: The caption displays when there's no interaction with the Before After layer.
• Hover: The caption only displays on mouse enter.
• Always The caption always displays, even when the divider is moved.

Position

You can select the placement of the caption.

Caption text

This is the text the caption will display.

Background

The background color of the caption

SEO

Before image alt tag

The Alt tag of the before image.

After image alt tag

The Alt tag of the after image.

Optimize

You can optimize the image with the Layer images options.

Style

Typography

At the Typography you can select whether you want to adjust the font for the Label or Caption.

Learn about the typography options at the Layer Typography & Design documentation.

Responsive

Learn about the responsive options at the Layer Style documentation.

Effect

Learn more about the effect options at the Layer Style documentation.

Position

Learn about the position options at the Layer Style documentation.

Size

Learn about the size options at the Layer Style documentation.

Advanced

Learn more about the advanced options at the Layer Style documentation.

Animations

Learn about the animations at the Animation documentation.