How to Add Icons to your Blog
Navigate to the Blog Editor
1. Login to TheWebConsole
2. From the left side menu click Blog and choose Blog posts.
3. From the blog post list either "Add Post" or click "Edit" on the desired blog.
Note: Information on How to Add or Edit a Blog can be found in more depth within separate knowledgebase articles.
Adding an Icon
1. Once the blog editor has loaded you will be given the option to add different content modules to the page. Click and drag the “Image” content module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.
Choose an Icon
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, Upload an Image or Choose from Icon Manager
- Select Choose from Icon Manager: This will open the icon manager for you to select an icon to use.
2. Once you have selected your image you will then be presented with new options:
- Title: 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.
- Alt Text: By filling in the Alternative Text field. This helps with optimization 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).
- Link Type: This area allows you to link the image to either one of your web pages (User-friendly page link), Dynamic page link (brings up a list of pages on your website), External page, or file, email address, or telephone number.
- Image Flex:
- Container Class: This area is to allow our designers to add custom styling to the image.
Caption
1. On the caption tab you are able to add a text caption to the icon. Once you add a caption in the text area you will then get an option for the caption position. You will get the options for:
- Bottom
- Top
- Left on Desktop & Top on mobile
- Left on Desktop & Bottom on mobile
- Right on Desktop & Top on mobile
- Right on Desktop & Bottom on mobile
Adding Icon 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:
Default and Mobile Styling
Border: Allows you to apply and style a border around the image.
Margin: Allows you to add space around your image.
Padding: This allows you to add space between the image and other modules within the section.
Background: Allows you to set chose if the background is hidden or not hidden.
Background Colour: This allows you to set a background color to appear behind the text.
Image Align: This allows you to choose the position of the image within the section.
Effects
Default Appearance: This allows you to change the filter of the image.
Mouse Hover / Cursor Over Appearance: Allows you to change which filter applies to 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.
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