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: |
| 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: |
| 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:
- Heading,
- Heading highlight,
- Subheading,
- Highlight text,
- Description,
- Button,
- Countdown timer,
- Citation,
- Detail list,
- Metrics,
- and FAQs, plus any compatible app block.
See the Citation, Detail list, Metrics, and FAQs block pages for their settings.
No comments yet