The 'Bootstrap' grid button within ATTO allows you to group content into columns. This is similar to the layouts you see in web pages where text and images are placed side by side. Grids are great for laying out content as they resize for smaller screens and will retain their design ratio.

Select a layout option.
Once selected, a layout will be added to the text area and any content can be added to the respective columns.


If you have two pieces of content that need to be separated, a separator can be used.

Click the Horizontal rule button in the toolbar.

Tables can be added to layout content in a table format. Grids/Columns are recommended to be used for general layout instead of tables as they are more flexible and resizable.

Click on the Insert table button in the toolbar.

A popup will appear with options to set up the table, these options must be adjusted to make a good table.

Begin by selecting the number of rows and columns you want at the start. Additional rows and columns can still be added later

Select a border type and style, this determines how the outlines for the table will display. These options should be selected if you want the table to show the cells with an outline.

Select a border color and background color, this is the color of the table outlines and the background color of cells. You do not need to select a background color but a border color needs to be selected if you want to see the table cells

Select a table width, this is the percentage of the available space (width) the table will take. It is good to set this as it makes it easier to select cells and add content, especially if you want the table to take the whole available width.

Click Create Table

Tip: Click on the contents of a table cell and click the 'Insert table' tool in the toolbar to edit the table after it is created. This is commonly used to add new rows and columns

Formatting

Grids and Columns

Horizontal Separators

Tables