# Image Comparison

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FFiAv3aCo4PYZhdxHri18%2Fs_i_compar.png?alt=media&#x26;token=128b725c-6e41-49ce-888e-2e5a1dee1606" alt=""><figcaption></figcaption></figure>

**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.                                                   |
