How to add Social Icons to your 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 Social Icons

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 “Social Icons” 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.

Link your Social Accounts.

1. Once you have added the Social Icons 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 manage your social links. You can find another article on how to add social links here: https://support.thewebconsole.com/help/a/add-or-edit-your-social-media-links  

Social Icon Layout

1. Once you have added your social icons you can choose the layout to display them. These can be found in the layout tab, the options can be seen below:

• Layout - This allows you to choose the layout of your social icons.

  • List Style - Choose how the icons will be displayed.

  • Icon Theme - This allows you to choose the theme of your icons.

  • Icon Size - This allows you to choose the size of the icons.

  • Show Text - This allows you to choose where to display the text as well as the icons.

  • Icon Background - This allows you to choose the background color of the icon.

  • Icon Color - Allows you to choose the font for the text in the button

  • Border - Allows you to choose a border for the social icons.

  • Icon Radius - This allows you to curve or straighten the edges of the button.

• Style - Allows you to style certain elements of your social icons

  • Background Color - Choose what the background color behind the social icons is.

  • Text Color - Allows you to choose the color of the text on the social icons

  • Font Family - Allows you to choose the font for the text with the social icons.

  • Font Size - This allows you to choose the size of the text in the social icons.

  • Font Weight - Allows you to choose the boldness of the text on the social icons.

  • Line Height - Allows you to add space between lines of text on the social icons.

  • Align - Choose where the text will align in the section.

  • Border - Allows you to choose a border for the social icons.

  • Padding - Allows you to add space between the social icons and other content
     

  2. Once you have added your social icons 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.