How To Add An Image 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 an Image 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” 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 an Image

1.Once an Image module has been added onto a page, you will have the ability to either choose an image by either Dragging an image into the module, Browse Image Library, Image and File Manager or Upload an Image

• Drag and Drop Image: You can either drag an image from your computer files into the image box or drag it in from your browser downloads.

• Browse Image Library: 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 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.

• From your computer: If you click the edit button (pencil) on the image module you will be presented with a folder search box, you can then find and select the image you wish to add to your website and click open. Once the file name appears next to the "choose file" button, you can then hit upload.

2. Once you have selected your image you will then be presented with a box where you can give the image some "Alt Text" by filling in the Alternative Text field. This helps with optimisation and ensures that anyone that has images in their browser turned off can still read what image was meant to be there (this especially applies to visually impaired people). You can also give the image an advisory title which will pop up when the image is hovered over, and you can also link to various things such as pages on your site, third party websites and images and files.

Adding Image Styling and Effects

1. Once you have chosen an image you can apply styling and effects by clicking the “Edit” button. This can be done by clicking the image module in the section 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:

• Style Tab

  • Background Colour: This allows you to apply a coloured background behind the image.

  • Align: Allows you to choose the position of the image within the section.

  • Boarder: Allows you to apply and style a boarder around the image.

  • Padding: allows you to add space between the image and other modules within the section.

  • Image Corner Radius: Allows you to curve the corners of the image.

• Effects

  • Image Transparency: Allows you to change the opacity of the image.

  • Mouse Over transparency: Allows you to change opacity of the image when a mouse hovers over it.

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

Note: You can also edit the image itself, this is covered in depth within other knowledge base articles

3. Once you have added your image, 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