How to Add Image Compare to a Page

Navigate To The Page
 

1. Login to TheWebConsole

2. From the left side menu click Manage Pages and choose Content Pages

3. From the content page list either add a New Page or edit an Existing Page

Note: Information on how to Add a New Page and How to edit an Existing Page can be found in more depth within separate knowledgebase articles.

Adding a Image Compare Module
 

1. Once the drag and drop editor has loaded you will be given the option to add different content modules into the page. All of these content modules first require a “Section” to be added. Once you have added your section and formatted it to your liking, simply click the “Image Compare” content module, located in the side menu. Once clicked, drag the module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

Note: Adding a Section is covered in its own knowledge base article.

Choose your Images
 

1.Once the image compare module has been added onto a page, you will have the ability to either choose your images from your Image and File Manager, Upload an Image, or Drag and Drop the image from your computer files into the image module.

• Choose a file from Image and File Manager: If your image is already uploaded to your Image and File Manager, click the “Browse Image Library” button. This will now show the Image and File Manager window, from here you will be able to select the image you wish to use on the page.
  
  Note: Adding files to the Image and File Manager is covered in depth within other knowledge base articles. 

• Upload an image: If you are yet to upload your image click the “Edit” button. This can be done by clicking your mouse cursor on the image module and clicking the edit button, the Edit button appears as a pencil icon in the top right of the section. Once the edit window appears simply click the “upload” button, to upload an image file from your device
   

• Drag and Drop: Use an image from your PC by click and dragging the image from your computer file manager into the image module.
  
  Note: You can also edit the image itself, this is covered in depth within other knowledge base articles.
   

Adding Divider Styling
 

1. Once you have chosen an image you can apply styling and effects by clicking the “Edit” button. This can be done by clicking your mouse cursor over the image module and clicking the edit button, the edit button appears as a pencil icon in the top right of the section. This will open the edit window allowing you to apply settings from both the Style and Effects tabs, these settings are covered below:

• Divider Style Tab

  • Colour: This allows you to apply a colour of the divider.

  • Width: This will allow you to select the size of the divider size. thin, medium or thick.

2. Once you have added the images and applied the settings and effects, click the “Save and Close” button to save the changes to the image compare module. 

Adding Arrow Styling
 

1. Once you have chosen an image you can apply styling and effects by clicking the “Edit” button. This can be done by clicking your mouse on the image module and clicking the edit button, the edit button appears as a pencil icon in the top right of the section. This will open the edit window allowing you to apply settings from both the Style and Effects tabs, these settings are covered below:

• Divider Style Tab

  • Colour: This allows you to apply a colour of the arrow.

  • Background Colour: This allows you to apply a colour to the background of the arrow.

  • Border: Allows you to add a border on the arrows.

  • Size: This will allow you to select the size of the divider size. small, medium or large.

  • Position: This will allow you to select the position of the arrows (Default) middle, top or bottom.

2. Once you have added the images and applied the settings and styling, click the “Save and close” button to save the changes to the image compare module. 

3. Once you have added your images, applied the style and effects and done any required edits, click the “Save” button on the bottom of the side menu to save the page and apply the image.

Note: Always remember to follow the final point and save the page itself, or the hard work you have done will not be applied.