How to add a grid 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 Grid 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 “Grid” 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 the Grid

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

• Layout

  • Total Columns: This will allow you to choose how many columns you would like to have, by breaking it down into different column options.

  • Flexible Columns: This will allow you to select if the column will adjust to the content within it or have a fixed height across each column.

  • Mobile Layout: This will allow you to either have Mobile display the same as on Desktop or have reverse columns (Right column on top of left in mobile)

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

• Container Style

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

  • Padding: this will allow you to add space between the grid or columns within the grid.

  • Margin: This will allow you to add margins between the grid or columns within the grid.

  • Background: This will allow you to choose is a background will display within the grid.

  • Background Color: This will allow you to choose a background color or image for your grid or a column within the grid.

• Column Style (Default/Mobile)

  • Column Width: This will allow you to choose the width of the column from 10 - 100%.

  • Min Column Height: This will allow you to choose the height of the column (Auto, PX, %, VW, VH or other are the units of measurement available).

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

  • 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.

  • Background: This will allow you to choose if a background will display within the grid.

  • Background Color: This will allow you to choose a background color or image for your grid or a column within the grid.

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

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.