Before after

The Before after section places a "before" and an "after" image side by side next to your content, making it easy to show the difference your product delivers.

Example: https://purity.nextsky.co/products/anti-aging-serum

Section settings

General

Setting	Description
Section width	3 options for the container width: Fixed width: matches your page content width in Theme settings -> Layout. Stretch width: spans the width regardless of screen size. Full width: takes up the entire width of the screen.
Color scheme	Select colors from Theme settings -> Colors.

Before after images

Setting	Description
Image width	Width of the image column on desktop (40–100%). Automatically optimized for mobile.
Before	The "before" image.
After	The "after" image.
Show before/after text	Shows a text label on each image.
Before text	Label shown on the before image (visible when Show before/after text is on).
After text	Label shown on the after image (visible when Show before/after text is on).
Image ratio	Aspect ratio of the images: Adapt to image Square (1:1) Portrait (3:4) Landscape (4:3)
Desktop image position	Places the images to the Left or Right of the content on desktop. Images are shown above the content on mobile.
Equal height adjustment	Matches the height of the images to the height of the content column.

Content settings

Setting	Description
Background type	Use a Color or an Image as the content background.
Background image	The background image (visible when Background type is Image).
Background color	The background color (visible when Background type is Color).
Desktop vertical alignment	Aligns content Top, Middle, or Bottom on desktop.
Content alignment	Aligns the content Left, Center, or Right.
Column gap	Space between the columns: No gap, Small, Medium, or Large.
Padding inline	Left and right spacing inside the content (0–100px). Automatically optimized for mobile.
Padding block	Top and bottom spacing inside the content (0–100px). Automatically optimized for mobile.

Mobile layout

Setting	Description
Content alignment	Aligns the content Left, Center, or Right on mobile.

Section padding

Setting	Description
Top	Customize the top padding of the section (0–100px).
Bottom	Customize the bottom padding of the section (0–100px).

Section divider

Setting	Description
Show divider	Displays a dividing line to separate this section from the previous one.

Block settings

Build the content column from blocks. This section supports:

1. Heading,

2. Heading highlight,

3. Subheading,

4. Highlight text,

5. Description,

6. Button,

7. Countdown timer,

8. Citation,

9. Detail list,

10. Metrics,

11. and FAQs, plus any compatible app block.

See the Citation, Detail list, Metrics, and FAQs block pages for their settings.