This documentation provides comprehensive insights into the Image Compare Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Image Compare block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Image Compare block.
3. After on the right side, Click on the Block. Then the Image Compare details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

Upload Before Image

1. Before Image: Click on the upload button a media library will appear upload and select any image.

Upload After Image

2. After Image: Click on the upload button a media library will appear upload and select the after image.

After uploading both images the image compare will appear like this.

General Controls

3. Show Labels: Enable the switcher to show the labels.
4. Disable Slide Behavior: Disable the slider to disable the slider behavior, It will disable the sliding.
5. Only Handle Draggable: Disable it to drag from any place of the sliding.
6. Slide on Hover: Disable it and it will work to slide on clicking.

7. Initial Position: Set the position for the image comparison.

Set Horizontal Direction

8. Direction: Set the horizontal position for the image comparison.

Set Vertical Direction

8. Direction: Set the Vertical position for the image comparison.

Labels Section

Go to Basic > Labels

This section provides control for the labels,

1. Before Label: Set the before label for the image comparison.
2. After Label: Set the after label for the image comparison.
3. Labels Position: Set the position for the labels (e.g.: Up, Middle, Down).

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Item Section

Go to Style > Item

This section provides controls to change the appearance of the items.

1. Height: Set the height for the Item.

Labels Section

Go to Style > Item

This section provides controls to change the appearance of the items. You can customize it for the Normal and After tabs

Normal Tab

This section provides controls for the labels,

1. Color: Set the color for the label.
2. Background: Set the background for the labels.
3. Typography: Set typography for the labels.
4. Border: Set a border for the label.

5. Radius: Set the border corner edges rounded by setting the radius.
6. Margin: Set margin for the labels.
7. Padding: Set padding for the labels.

After Tab

Make the after-tab customization,

8. Color: Set the color for the after tab.
9. Background: Set background for the after tab.
10. Border: Set border for the after labels.

Control Section

Go to Style > Control

This section provides controls to change the appearance of the items. You can customize it for the Line and Button tabs

Line Tab

This section provides control for the line,

1. Thickness: Set the thickness for the line tab.
2. Box Shadow: Set the box shadow for this.
3. Background: Set background for the line.

Button Tab

This section provides control for the button tab,

1. Arrow Size: Set the arrow size for the button.
2. Arrow Color: Set the color for the arrow.

3. Width: Set width for the button.
4. Height: Set the Height for the button.

5. Border: Set the border radius for the button.
6. Radius: Set the radius for the button.
7. Background: Set the background for the button.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

The Video help you to learn more about the block. Please visit the demo page for examples.

Thanks for being with us.