Before/After image slider
Table of Contents
Section settings #
| Settings | Description |
| Page content width | Make section full width on desktop: Displays within the default container. When enabled, the section expands to the full width of the browser. (You can also adjust the default page layout width in “Theme Settings“) Full width offset: Applies an offset when full width is enabled, affecting devices larger than desktops. |
| Subheading | This is the section subtitle. |
| Subheading style | Body: This is the body text. Subtitle: This is the subtitle text. Font weight: 600 / Semi bold Uppercase: This is the uppercase text. |
| Heading | RichText: You can add a section title using the RichText editor. Learn more about this |
| Heading size | Large: This is the large text size of the section heading. Desktop size: 50px, Mobile Size: 30px Medium (Default): This is the medium text size of the section heading. Desktop size: 40px, Mobile Size: 28px Small: This is the medium text size of the section heading. Desktop size: 32px, Mobile Size: 25px |
| Description | This is the section description. |
| Heading alignment | Left: Aligns the content to the left. Right: Aligns the content to the right. Center: Aligns the content to the center. |
Before/after image settings #
| Settings | Description |
| Image height | The image ratio for the promotion is as follows: Adapt to image(Default): The aspect ratio of the images is used. This prevents cropping of the images. Small: Crops images to a height of 314px. Medium: Crops images to a height of 500px. Large: Crops images to a height of 695px. |
| Before/after text position | Choose the placement of the text relative to the main content. Options include Top, Middle, and Bottom. |
| Round the corners of images | Enable or disable rounded corners for images. |
| Before Image / After image | Choose separate images for desktop and mobile displays. |
| Before text / After text | Add custom text, such as “Before” or “After,” to label the images. |
Color #
| Settings | Description |
| Color scheme | You can change the color of the section. |
Section padding #
| Settings | Description |
| Desktop: Padding top | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop. |
| Desktop: Padding bottom | The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop. |
| Mobile: Padding top | The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile. |
| Mobile: Padding bottom | The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop. |