Image Comparison

This section is designed to visually demonstrate the difference between two products or two states of a single product (e.g., "Before & After," "Option A vs. Option B") using a draggable slider.

Location: Sections -> Templates -> Banners → Image Comparison

---

Option	Category	Detailed Explanation
Heading	Content	The primary title text for the entire comparison section.
Subheading	Content	Secondary text, typically smaller and placed above the main heading, used for introductory context.
Description	Content	Text content placed below the headings, used to give a detailed explanation of what the customer is comparing.
Heading alignment	Layout	Sets the horizontal alignment for all introductory text (Left or Center).
Top spacing	Layout	Controls the amount of empty vertical space (padding) applied above the section: None, Small, Medium, or Normal.
Width	Layout	Defines the horizontal width of the section content: Default, Boxed, or Wide. The Wide option works specifically for screens with a width of 1440 pixels and more.
Image hover effect	Design	Sets a pre-defined animation that is triggered when a user hovers over the images. Options include: Basic theme settings, Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, and Shine.
Height	Design	Controls the height of the comparison area on desktop screens: Auto (adapts to image height) or Fixed (constant height).
Height mobile	Design	Controls the height of the comparison area specifically on mobile screens: Auto or Fixed.
Dividing line: Show	Design	Toggles the visibility of the thin vertical line separating the two images when the slider is not being dragged.
Background: Hide/Color/Gradient/Image	Background	Controls the section's background style (transparent, solid color, gradient, or a full image).
Colors: Base	Colors	Sets the foundational color for standard text and elements within the section.
Colors: Accent	Colors	Sets the color for secondary elements like links or highlighted text.
Colors: Lines	Colors	Sets the color for any dividing lines or borders within the section.
Comparison button: Background	Colors	Sets the background fill color of the draggable comparison handle/button.
Comparison button: Icon	Colors	Sets the color of the arrow or symbol icon displayed inside the comparison handle.

Nested Block: Image (For Image Comparison Section)

The Image comparison section is filled with two separate Image blocks. These options control the specific image, its overlay, and the content text for one side of the comparison.

Option	Category	Detailed Explanation
Image (upload)	Image	Uploads the specific image used for this side of the comparison (left or right).
Image overlay opacity	Image/Design	Controls the transparency level (0-100%) of the color overlay on the image, ensuring text readability.
Image overlay color	Image/Design	Sets the color used for the semi-transparent layer that covers the image.
Content: Heading	Content	The main title text that is overlaid on the image.
Content: Description	Content	Secondary text or a short paragraph that is overlaid on the image.
Content: Button	Content	The text label for a call-to-action button placed over the image.
Content: Link	Content	The URL that the overlaid button will link to.
Settings: Heading size	Text/Design	Controls the size of the overlaid Heading text.
Settings: Underline on hover	Text/Design	Applies an underline effect to the overlaid Heading when a cursor hovers over it.
Settings: Text position	Layout	Defines the vertical and horizontal anchor point for the overlaid content (e.g., Top left, Center, Bottom right).
Settings: Text align	Layout	Sets the horizontal alignment of the text content within its box: Left, Center, or Right.
Settings: Description width	Layout	Sets the maximum width of the Description text block, ranging from 0% to 100%.
Settings: Show text box	Layout	Toggles a background box behind the overlaid content for better contrast.
Colors: Heading/Heading hover	Colors	Sets the color of the overlaid Heading text in both normal and hover states.
Colors: Description	Colors	Sets the color of the overlaid Description text.
Colors: Button	Colors	Sets the text color of the overlaid Button.
Box: Show background	Colors	Toggles the background fill for the content box that appears over the image.
Box: Background/Background gradient	Colors	Sets the solid or gradient background color for the content box.
Box: Border	Colors	Sets the color of the border surrounding the content box.
Box: Text (color)	Colors	Sets the default text color for all content inside the box.
Box: Show background on hover	Colors	Toggles a distinct background style for the content box that activates only upon mouse hover.
Box: Background hover/Gradient hover	Colors	Sets the background color/gradient of the content box when hovered.
Box: Border hover	Colors	Sets the color of the content box border when hovered.
Box: Text hover	Colors	Sets the text color inside the content box when hovered.
Box: Enable shadow/Shadow/Shadow hover	Design	Toggles and configures the drop shadow effect on the content box in both normal and hover states.
Mobile: Heading/Description/Button	Mobile	Mobile-specific controls for the size or style of the overlaid content on small screens.
Mobile: Show background	Mobile	Mobile-specific toggle for showing the content box background.
Mobile: Background/Background gradient	Mobile	Mobile-specific background color/gradient for the content box.
Mobile: Border	Mobile	Mobile-specific border color for the content box.
Mobile: Text	Mobile	Mobile-specific text color for the content box.
Mobile: Enable shadow/Shadow	Mobile	Mobile-specific toggle and configuration for the shadow effect.