Section: Before & After

Everything you'll need to know on how to set up your Before & After section.

The Before & After section displays an interactive comparison slider — visitors drag a divider to reveal more of either image. Perfect for skincare results, fitness transformations, design before/afters, or any product where visual comparison drives conversion. Three layout modes available: stacked (slider only), text on the left + image on the right, or image on the left + text on the right.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section in your left sidebar.

2) Search for Before & After, then click on it.

3) Done — your Before & After section is added.

Select the color scheme for the section.

Small uppercase label above the title. For example: The transformation, Real results. Leave empty to hide.

The main heading. For example: See the difference, Before vs After.

Subheading instruction text. Default: Drag the divider to see the transformation. (Drag the divider to see the transformation.)

Alignment of the heading group: Left, Center, or Right. Default: Center.

Choose how content is arranged: Stacked (slider only) for a centered slider with text above; Row: text | image for text on the left and slider on the right; Row: image | text for slider on the left and text on the right.

Only applies to row layouts. Percentage of total width occupied by the text column (25–55%). Default: 40%.

Horizontal space between columns in row layouts (16–80 px). Default: 48 px.

Maximum width of the comparison slider in pixels (400–1200). Default: 800. Wider sliders feel more dramatic; narrower ones fit tighter into rows.

Aspect ratio of the slider: 1:1 Square, 4:3 Landscape, 16:9 Wide, or 3:4 Portrait. Pick the ratio that matches how you took the before/after photos.

Maximum width of the section content (800–1600 px). Default: 1200.

Round the corners of the slider (0–24 px). Default: 8.

Tick this box to add a soft drop shadow under the slider. Default: on.

Optional title shown above the Before image (in row layouts). For example: Before, Day 1.

Body text describing the Before state.

Optional title shown above the After image. For example: After, Day 30.

Body text describing the After state.

The image shown on the Before side of the slider. Critical: both Before and After images must be the same size and aspect ratio so the slider compares apples to apples.

Small pill label overlaid on the Before image (e.g. Antes, Before). Default: Before.

The image shown on the After side of the slider. Must match the dimensions of the Before image.

Small pill label overlaid on the After image (e.g. Después, After). Default: After.

Optional small caption under the slider. Useful for credits, dates, or context (e.g. 30 days, no retouching).

Space above the section in pixels (0–120). Default: 64.

Space below the section in pixels (0–120). Default: 64.

Same camera, same distance, same lighting, same pose, same angle. The slider only works visually if both images align—even small framing differences are noticeable as the divider drags.

The Before and After images must have the same dimensions and aspect ratio. If one is portrait and the other is landscape, the slider stretches one to fit the other and the comparison breaks. Resize/crop both images to the same size before uploading.

Each Before & After section displays one slider. To show multiple comparisons (e.g., skin texture, wrinkles, pigmentation), add the section multiple times—one per comparison.

Default labels (Antes, Después) match the theme's primary language. To change them to English or any other language, edit the Before label and After label fields directly. Also: the subtitle default is in Spanish — customize it.

Yes—the divider responds to both mouse drag (desktop) and touch drag (mobile). On mobile, the slider takes full width and the row layouts stack vertically (text above the slider) for readability.