How To Add Buttons On 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 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 Buttons 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 “Buttons” 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.

Adding Buttons

1. Once you have added the buttons content module to the page, hover over and click the module and click the edit button, the edit button appears as a pencil icon in the top right of the section.

2. Once the edit window loads you will be given the ability to add one or more buttons. By default the system will create a single button, to name and link this button click the grey downward arrow located on the far right of the button. This will give you the two fields below:

• Text - Allows you to add button text ie: Click Here or Read More

• Button Link Type - Allows you to choose the type of link the button will use

  • User Friendly Page Link - This option allows you to link a page within your website, it uses the page name for best SEO practice, this is the option we recommend using for all internal links, note that if the page name is ever changed you will need to go back and manually update all links using this option.

  • Dynamic Page Link -  This option allows you to link a page within your website, it uses page ID rather than page name so that if a page is ever renamed it will keep the link working correctly.

  • External Page - This option is used to link to pages that are not on your website.

  • Email Address - This option allows you to have the user email you from their default mail application on the device they are using.

  • File Manager Files - This option allows you to link to files in your image and file manager, such as PDF files.

  • Link To Anchor In The Text - Allows you to link to a certain area of a page.

• Target - Allows you to choose if the page should open in a new tab or the existing tab

3. To add additional buttons simply click the blue “Add Button” button and follow the same process as above to add the button text and link.

Styling Buttons

1. Once you have added all of your buttons you can apply settings to style them. These can be found in the Style and Effects tabs, the options can be seen below:

• Style - This allows you add styling to the buttons such as colours

  • Button Layout - Choose how the button will sit in the section

  • Button Alignment - Choose where the button will align from

  • Button Spacing - Allows you to add space between buttons

  • Button Colour - Allows you to choose a colour for the button

  • Text Color - Allows you to choose the colour of the text in the button

  • Font Family - Allows you to choose the font for the text in the button

  • Font Size - Allows you to choose the size of the text in the button

  • Font Weight - Allows you to choose the boldness of the text in the button

  • Line Height - Allows you to add space between lines of text in the button

  • Text Align - Choose where the text will align in the button

  • Border - Allows you to choose a border for the button

  • Border Radius - Allows you to curve or straighten the edges of the button

  • Mouse Over Text Colour - Allows you to change the text colour when the mouse hovers on the button

  • Mouse Over Background - Allows you to change the background colour when the mouse hovers on the button

  • Padding and Margin - Allows you to add space between the buttons and other content
     

• Effects - Allows you to style certain elements of each button incervudally

  • Button Colour - Allows you to choose a colour for the button

  • Text Color - Allows you to choose the colour of the text in the button

  • Mouse Over Text - Allows you to change the text when the mouse hovers on the button

  • Mouse Over Text Colour - Allows you to change the text colour when the mouse hovers on the button

  • Mouse Over Background - Allows you to change the background colour when the mouse hovers on the button

2. Once you have added your buttons and styled them click the blue “Save and Close” button

3. Once you have completed your page click the “Save” button on the bottom of the side menu to save the page and apply the buttons.

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