How to Add a Button 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 a Button Module
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 “Button” content module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.
Editing a Button Module
1. Once a Button module has been added to the blog, you will have the ability to edit the button and its formatting. This can be done by clicking on the button module on the page and clicking the edit button. (The edit button appears as a pencil icon in the top right of the section)
2. Once the edit button has been clicked an edit window will appear. You can either type out the button text you wish to display in this module or copy and paste it from another source.
3. Once you have added your button, there are numerous options you can use to tweak the button module. You can find an overview of the primary settings below:
Button Text: This is the text that will display on the button.
Mouse Hover Text: Allows you to change the colour of the text when the mouse is hovered over.
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.
Icon: This allows you to select an icon to display on the button.
Container Class: This area is to allow our designers to add custom styling to the image.
Adding Button Styling
3. Once you have added your button, there are numerous styling options you can use to tweak the button module’s appearance, these are located in the “Desktop” and "Mobile" tabs found at the top of the edit window. You can find an overview of the primary settings 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.
Text Colour: Allows you to change the colour of the heading text.
Font Family: this will allow you to change the font type from the default font of your site.
Font size: Allows you to increase or decrease the size of the heading text from the default, Google recommends not to display fonts in any size under 16px.
Line Height: allows you to choose the size of the space between lines of text.
Text Align: This allows you to choose the general alignment of the text.
Word Break: This property sets whether line breaks appear wherever the text would otherwise overflow its content box.
Border: Allows you to apply and style a border to sit around your heading text
Padding: This allows you to add space around your heading text and other content modules in the section
Margin: Allows you to add space around your heading text and other content modules in the section
Background: Allows you to set chose if the background is hidden or not hidden
Background Colour: Allows you to set a background colour to appear behind the heading
4. Once you have added your button text and styled it to your liking click the “Save” button, this will save the module and close the edit window.
5. Once you are happy with your page, click the “Save" button found at the bottom of the side menu, this will apply all of your changes to the page.
Note: Always remember to follow the final point and save the blog itself, or the hard work you have done will not be applied.