Compare two images by using a slider.
What is the before/after image slider section?
The Before/after image slider section displays two images side by side with an adjustable slider in between. This feature is perfect for highlighting transformations or showcasing product benefits, helping customers to make more informed purchase decisions.
How to create a before/after image slider section
Tip
- Open the Theme Editor and add the Before/after image slider section.
- Either click on one of the four blocks available, or delete and add a different block as required.
- Use the Animate on load setting to choose whether the section should animate or remain static when the page loads.
- In the main section Images settings, select an Image before and an Image after. To achieve the best results, it is advised to select two images of the same dimensions.
- Adjust the Image before caption and Image after caption text and consider whether using the Show captions on mobile setting would add value to the mobile experience for customers.
- In the Image layout settings, there are two Image height options that can be selected:
Original image height - This will use the height of the original image up to a maximum of 1080px.
Fixed height - Use the sliders to select the required pixel height for both desktop and mobile. - Also in the Layout settings, there are four Image position settings:
Above - The images will show above the text.
Below - The images will show below the text.
Left - On larger screens, the images will show to the left of the text.
Right - On larger screens, the images will show to the right of the text. - In the Style settings, select a Color scheme. Color schemes can be managed in Theme settings > Colors.
- Decide whether the section should be Full width. If the section is not full width the content will appear inset on a content panel.
- Choose one of the five Section background options:
Default: Uses Beautify's default color scheme selected in Theme settings > Colors > Schemes.
Color: Select a custom Background color
Image: Upload a Background image
Simple gradient: Set the gradient start and end colors, plus the gradient style
Advanced gradient: Customize the gradient further using the COLOR STOP settings - If the section is not full width, an additional Layout setting, Boundary above section controls the spacing above the section. This can help to create smoother transitions between sections.
Default - Will leave the standard spacing at the top of the section
Tight - Will leave a smaller space between sections
Join - Adjacent sections will touch each other
Tip
In the Heading block, if the before/after slider is to be used as the first section on the page, ensure that the Set as a page heading (uses h1 tag) is selected.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us