Before/After Slider

The Before/After Slider compares two images in the same frame: the before image is revealed on one side of a divider, the after image on the other. Visitors move the divider to see how much of each image shows.

Adding the element

Add an element in the YOOtheme Pro builder and pick Before/After Slider from the Planckie Elements group. Until you choose your own images, both sides show the YOOtheme placeholder, so the element is visible while you configure it.

Use two images with the same dimensions. The after image is cropped to the frame the before image defines, so images of different proportions will not line up.

Content

Option	Description
Before Image	The image revealed on the left, or on top in vertical orientation.
Before Image Alt	Alt text for the before image.
After Image	The image revealed on the right, or at the bottom in vertical orientation.
After Image Alt	Alt text for the after image.

Settings

Reveal

Option	Description
Reveal Mode	Drag (default) moves the divider on press and drag. Hover shows the before image and swaps to the after image while the pointer or keyboard focus is on it. Follow Pointer moves the divider with the pointer, without pressing.
Start Position	How much of the before image is visible at page load, from 0 to 100. Default 50. Not used in Hover mode.
Orientation	Horizontal (default) or Vertical. Not used in Hover mode.

On a touch device, Hover mode turns into Drag, because there is no hover to work with. The divider and its keyboard support come back with it.

Handle Style

Available in Drag and Follow Pointer mode.

Option	Description
Handle	Circle with Arrows (default) or Divider Only.
Handle Color	Circle background. Default white.
Arrows Color	Arrows inside the circle. Default black.
Divider Color	The line between the images. Default white.
Divider Width	1 to 10 pixels. Default 2.

Labels

Option	Description
Labels	Shows a caption on each image. On by default.
Before Label / After Label	Your own captions. Left empty, they read Before and After in the site language.
Label Position	Corners (default) puts them in opposite corners, At Divider next to the reveal line. Not used in Hover mode.

Labels are clipped together with their image, so each one appears only while its side is visible.

Layout

Option	Description
Aspect Ratio	Auto follows the before image, or enforce 16:9, 4:3, 3:2 or 1:1. Unavailable once a height is set below.
Width / Height	An exact size in pixels. The width stays responsive and never exceeds the available space. A height here overrides the aspect ratio.
Focal Point	The crop anchor, applied to both images.
Height	Fill the available column space, or match the viewport height and optionally subtract the header above. Either one takes priority over the aspect ratio and the custom height.

Image

Loading, Border, Box Shadow, Box Decoration, Inline SVG, SVG Color and Text Color work as they do in the native Image element of YOOtheme Pro. Border, shadow and decoration are applied to the comparison as a whole, not to each image separately.

Accessibility

Option	Description
ARIA Label	Describes the comparison for assistive technology, for example Kitchen before and after renovation. Left empty, it reads Before and after image comparison.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-before-after, .pe-before-after-image, .pe-before-after-image-before, .pe-before-after-image-after, .pe-before-after-label, .pe-before-after-label-before, .pe-before-after-label-after, .pe-before-after-divider, .pe-before-after-handle

Colors and sizes you set in the builder are applied as CSS custom properties on .pe-before-after, and you can override any of them:

Property	Meaning
--pe-before-after-position	Current divider position, updated live as the divider moves.
--pe-before-after-handle-color	Circle background.
--pe-before-after-arrows-color	Arrow color.
--pe-before-after-divider-color	Divider line color.
--pe-before-after-divider-width	Divider thickness.
--pe-before-after-handle-size	Diameter of the circle, 48px by default. It has no field in the builder, so this is the way to change it.

Styling the labels is a plain CSS job: .pe-before-after-label carries the dark pill background, and the two side classes let you treat before and after differently.

Accessibility and keyboard

The element is a figure labelled by the ARIA Label field. In Drag and Follow Pointer mode the divider is a slider that reports its position to screen readers as a percentage of each image, and keeps reporting it while it moves. In Hover mode the element is a button that reports whether the after image is currently shown.

The focus outline uses the handle color, so it stays visible against your images. It appears for keyboard users and not on mouse clicks.

In Drag and Follow Pointer mode, the divider takes focus and responds to the keyboard.

Key	Action
Arrow keys	Move the divider by 1%, along the orientation.
Shift + arrow keys	Move the divider by 10%.
Page Up / Page Down	Move the divider by 10%.
Home / End	Reveal the after image or the before image completely.

In Hover mode the element itself takes focus and behaves as a button: Enter or Space switches between the two images, and moving focus away restores the before image.

Notes and limits

• The after image is cropped to fill the frame. Use two images of the same size.
• Height settings win over the aspect ratio: viewport and column height first, then a custom height, then the aspect ratio.
• The divider is not animated. It follows the pointer or the key press directly, which is why there is no reduced-motion fallback to make.
• One page can hold as many comparisons as you like; each one keeps its own position.