Content Controls
Content
This section allows users to set and customize the images used in the Image Comparison element, as well as add descriptive labels to enhance clarity and context.
- Before – Upload or select an image to represent the ‘before’ state in the comparison.
- After – Upload or select an image to represent the ‘after’ state in the comparison.
- Labels – Customize the text labels for ‘before’ and ‘after’ images.
- Before – Enter text for the label that describes the ‘before’ image.
- After – Enter text for the label that describes the ‘after’ image.
Design Controls
Settings
This section offers various controls to tweak the behavior of the Image Comparison element, including its initial look, interactivity settings, and animation preferences.
- Initial Position – Set the starting point of the comparison slider.
- Start On Hover – Decide if the comparison slider should move only when the user hovers over the image.
- Auto Animation – Enable or disable automatic sliding of the comparison slider.
- Animation Speed – Adjust the speed of the slider’s movement during auto animation. (Note: This control is only available when Auto Animation is enabled.)
- Vertical Mode – Toggle between horizontal and vertical slider movement.
Separator
Customize the visual aspects of the separator line that divides the ‘before’ and ‘after’ images, giving you control over its visibility, color, and width.
- Hide – Choose to show or conceal the separator line.
- Color – Pick a color for the separator line. (Note: This control is only available when the separator line is not hidden.)
- Width – Define the thickness of the separator line. (Note: This control is only available when the separator line is not hidden.)
Labels
This area provides options to manipulate the visibility and appearance of the ‘before’ and ‘after’ labels, including their position, background, typography, and padding.
- Hide – Opt to display or hide the ‘before’ and ‘after’ labels.
- Position – Select the location of the labels on the image. (Note: This control is only available when labels are not hidden.)
- Background – Choose a background color for the labels. (Note: This control is only available when labels are not hidden.)
- Typography – Modify font attributes for the text within the labels.
- Padding – Adjust the spacing around the text within the labels.
- Padding – Set the exact padding values for all sides of the label text.
Spacing
Control the spacing around the Image Comparison element to ensure it fits well within the page layout and doesn’t clash with other elements.
- Margin Top – Increase or decrease the space above the Image Comparison element.
- Margin Bottom – Increase or decrease the space below the Image Comparison element.
