How to Add Content Tabs 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 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 a Tabs 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 “Tabs” 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 Tabs

1. Once you have added the tabs content module to the page, hover over 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 appears you will have the ability to add tabs and apply settings to style those tabs. The first screen that you will see is the Tabs tab. To add tabs simply click the “Add Tab” button. 

3. By default each tab you enter will have the genetic heading of “tab”. To change this, click the grey down arrow, this appears on the right of the tab, next to the remove hyperlink. This will open a text field in which you can enter the Tab name, note that we recommend keeping this short and relevant.

Styling the Tabs

1. Once you have added all of your tabs and entered their names you can then add styling to them. The styles are broken down into 4 tabs, Layout, Title Layout, Content Layout and Individual Tab Styling. These are covered below: 

• Layout - this covers the overall layout of the entire Tabs content module.

  • Tabs title layout - Allows you to set a layout for the headings of each tab.

  • Tabs Border - Allows you to set a coloured board to the content module.

  • Border - Allows you to choose the style of border applied and its thickness.

  • Border Radius - Allows you to curve the border.

  • Padding and Margin - This allows you to add space between the content of this module and the modules around it.
     

• Title Layout - Allows you to add global styling to the tab headings.

  • Text colour - Allows you to choose the colour of the heading text.

  • Background Colour - Allows you to choose the colour of the tab.

  • Font Family - This allows you to choose the font type the heading uses.

  • Font Size - This allows you to choose the size of the heading text.

  • Font Weight - This allows you to choose the boldness of the heading font.

  • Line Height - Allows you to choose the space between the lines of text in the heading

  • Text Decoration - allows you to add a strikethrough or underline to the heading

  • Arrows Background Colour - If you have enough tabs to require scrolling an arrows box will appear, this allows you to add a background colour to that box

  • Arrows Colour - Allows you to choose a colour for the arrows

  • Active Text Colour, Active Background Colour, Mouseover Text Colour and Mouseover Background Color - Allows you to choose different colours for both the background and text when the tab is hovered over and opened.
     

• Content Layout - Allows you to add styling to the content area within the tabs

  • Background Colour - This allows you to choose a background colour for the content area of the tab

  • Fixed Height - Allows you to set a fixed height size of the content area within the tab
     

• Individual Tab Styling - This allows you to style each of the tabs individually, this uses all of the same settings as the Title Layout.

2. Once you have added all of your tabs and applied all of your styling click the blue Save and Close button to save the module.

Adding Content to the Tabs

1. Once you have added your tabs and applied the styling you will have the ability to then add content to each of the tabs. To do this simply click the tab heading you wish to open, then drag and drop the content modules you wish to use within that tab, this is done in the same manner as the normal content editor possesses.

Note: Information on how to add each of the content modules can be found in more depth within separate knowledgebase articles.

2. Once you have added your tabs, applied the settings and added your content, click the “Save” button on the bottom of the side menu to save the page and apply the tabs.

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