1. What is image comparison?
Image comparison is a section that allows users to compare two different images side by side, highlighting their distinct characteristics or differences. It's commonly used to showcase before and after images, product comparisons, or visual transformations, enabling users to easily discern changes or variations between the two images. This feature enhances user experience by providing a clear and visual representation of differences, aiding in decision-making or understanding of the content being presented.
2. How to set up image comparison?
To set up image comparison, follow these key configurations:
Section Heading: Specify the heading for the section & Adjust heading size and tag.
Before and After Images:
- Upload images for before and after comparisons.
- Specify heading inside the image, its size, and position (start, middle, end).
Desktop and Mobile Layout:
- Choose to show images in horizontal or vertical layout.
- Customize desktop and mobile image heights.
- Set corner radius for images.
- Choose whether you want the image aligned to the left or the right (Left/Right)
- Decide the order in which the images will appear (first or second) in mobile view.
- Choose the alignment for the text within the Image Comparison section (Left/Center/Right)
- Configure section width and padding.
- Show or hide section dividers.
- Adjust top and bottom padding.
Styles: Customize heading and background colors for light and dark themes.
3. How to add heading and additional text to the section?
To add a heading and additional text to the section, follow these steps:
a) Heading Block:
Add a "Heading" block to the section. Customize the following settings:
- Optionally, provide a subheading for additional context.
- Enter the main heading text & Adjust the size of the heading.
- Choose the HTML tag for the heading (e.g., H1, H2, etc.).
- Add any additional text content.
- Choose the color for the heading text.
b) Button Block:
Add a "Button" block to the section. Configure the button settings:
- Enter the text for the button & Paste the URL link for the button.
- Optionally, check this box “Show as primary button” to highlight the button as the main call-to-action.
- Set up the color for the button to match your branding or design scheme.
By adding these blocks and configuring the settings accordingly, you can easily include a heading and additional text, as well as a button, within your section. When these blocks are added, the text block will appear beside the image. Adjust the content and styling to align with your brand's identity and messaging.
