The layout of the website sets the areas of the website in which content can be inserted. These areas include headers, footers, sidebars, and main content areas of the website. The widths and images of these sections are controlled by the theme, but the layout is what determines if the section will be included and what blocks will appear in that section.

Layouts can be modified in the following ways: 

1. Create Columns -- The Container Block can be used to create columns within sections that already exist. See: Create Columns
2. Select a Different Layout -- Layouts can be changed in a website much like switching the faceplate on a cell phone, it does not affect the content (but some content might not be displayed if it is in an area such as a sidebar that is not in the new layout), and it can be reversed at any time. See: Select a Different Layout
3. Set a Per-Page Layout -- The layout can be changed for just one page of the website. See: Set a Per-Page Layout
4. Adjust the Layout -- The areas in the website in which content can be inserted within headers, footers, and sidebars can be adjusted via overrides from the Appearance / Layout Content screen. No technical skills are required for this operation. See: Adjust the Layout
5. Create a Custom Layout -- More advanced changes may be made by creating a custom layout. Doing this, however, requires knowledge of HTML. See: Create a Custom Layout

To create more advanced layouts on each page of the website using containers. Every block must be placed within a container. When creating the first block on a page, a container is created by default and the new block is placed within it. The most advanced layouts use a custom layout.

Use Multiple Containers: Use multiple containers to create a more complex layout. For example, place a container with two columns in the top half of the page and a container with a single column in the bottom half of the page, thus creating a page with three main areas, two on the top and one on the bottom. Example:

Multiple columns allow complex arrangements of text, images and other elements to be lined up more precisely. See example below

Steps: How to Create Columns with the Container Block

1. On the HotDoodle Toolbar, click on the "Block" tab.

2. Click on the "Add Block" button.

3. On the webpage, click on the "Add Here" button in the location to add the block.

4. Click on the "Container Block" button.

5. Click on the "Insert this block" button.

6. Enter the number of columns and rows in the Configure Container Block screen.

7. Select the formatting settings.

Combined Width - The combined width of blocks within the Container Block has two options:

a. Only as wide as needed to fit the content – The container sizes itself to fit the maximum width of the contents inside.

b. Fill all of the available width – The container sizes itself to fill all of the available horizontal space on the page.

Columns evenly sized? - This option, if checked will force all columns evenly spaced within the Container Block.

Push to sides - If this option is checked, the blocks inside the container will align to the left and right respectively.

Include a bar between columns - If this option is checked, a dotted line will appear between the columns in the container.

Include a bar between rows - If this option is checked, a dotted line will appear between the rows in the container.

8. Click on the "Save" button.

The Container Block is unique in HotDoodle because it is the only block that can hold other blocks within it, even holding additional Container Blocks which can also be holding other blocks as well. This behavior is known as nesting. Within the nesting structure, the outermost container is considered a parent to the blocks within it. All blocks within a container are considered children of the container that surrounds them. To create a nesting structure, the parent Container Block must be added first and all the children added afterwards and placed inside it. There is not a way to wrap the container around existing blocks, those blocks must be copied and pasted into the container in order to nest and become children blocks. Once a Container Block holds children blocks inside of it, deleting the container also deletes all the children blocks as well.

In the parent/children relationship, children blocks automatically inherit any styles applied to the parent. For instance, when a border style is applied to a Container Block, a border is also applied to any children blocks within the container. There is a way to block this inheritance by clicking to add a check mark in the checkbox next to the "Ignore Parent Styles" option on the Style tab.

Steps: How to Ignore Parent Styles

1. Click on the "Edit" button above the respective block.

2. Click on the "Style" tab.

3. Click to add a check mark in the box to the left of "Ignore Parent Styles" option.

4. Click on the "Save" button.