How to add a Grid 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 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 Grid

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 “Grid” 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.

Editing the Grid

1. Once a section has been added onto a page, you will have the ability to edit the section's formatting. This can be done by hovering your mouse cursor over the section 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, there are numerous options across multiple tabs, you can find an overview of the primary settings below:

• Layout

  • Column Layout: this will allow you to choose the layout of your section, by breaking it down into different column options.

• Grid Style

  • Add background: This will allow you to choose a background colour or image for your section or a column within the section.

  • Flexible Column: This will allow you to

  • Grid Height: This will allow you to

  • Column Spacing: This will allow you to

  • Add background: This will allow you to choose a background colour or image for your section or a column within the section.

  • Border: This will allow you to create a border around the section or columns within the section

  • Padding: this will allow you to add space between the section or columns within the section and other sections or columns.

  • Margin: This will allow you to add margins between the section or columns within the section and other sections or columns.

  • Container Class: This area is to allow our designers to add custom styling to the grid.

• Column Style

  • Column Height: This will allow you to choose the height of the column.

  • Add background: This will allow you to choose a background colour or image for your section or a column within the section.

  • Border: this will allow you to create a border around the section or columns within the section

  • Section Padding: this will allow you to add space between the section or columns within the section and other sections or columns.

  • Margin: This will allow you to add margins between the section or columns within the section and other sections or columns.

  • Container Class: This area is to allow our designers to add custom styling to the grid.

• Mobile Styles

  • Layout: This will allow you to choose the Default layout or reverse the columns.

  • Display: This will allow you to choose a background colour or image for your section or a column within the section

3. Once you have applied the section settings click the “Save” button to save the section changes and close the edit window. Your section will now be ready to add in content, the addition of content modules will be covered in depth within other knowledge base articles

4. Once you have added your section and applied the settings click the “Save” button located at the bottom of the side menu, this will save your page.

Note: These settings mentioned are the primary settings for section edits, there are further settings that you can tweak to your liking, that can be used alongside the above.

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