Layout Managers

Layout Managers are a key tool, in arranging content on your page. Layout manager blocks don't add any content. Rather, they help organize and arrange your content.  Without any Layout Managers, all your content will displayed on top of one another.

Building a Page with Layout Managers

Make a Blank Page

1. Login to your EZ-NetTools Member Account.

2. Click on Construction Tools

3. Select New Page-Blank

Create 3 Title Block

4. Select Title Block from the initial drop down menu and click Next Step.

5. Type something and push submit.

6. Add a second Title, by clicking on the Green Plus . Then type something and push submit.

7. Add a third Title block  by repeating the previous steps.

All blocks should be stacked on top of each other vertically.

Add a Layout Manager

8. Click the Green Plus  on Title block 1.

10. Choose Layout Manager from the drop down menu.

11. Click Before (this will put the layout manager before block 1)

12. Click Next Step

13. Click Submit

You now have an empty Layout Manager block above your Title block.

Put Title blocks inside Layout Manager

14. Click the Up arrow  on the title block below the layout manager. Your Title block should now be inside the layout manager.

15. Click the Up Arrow  on the other two Title blocks.  (this will move them up one space, and into the layout manager.)

Layout Manager Options

You can customize your layout manager by changing the background color, border, padding and more!  This section will explain options inside a layout manager.

Click on the Pencil Icon  on Layout Manager block 1.
Select Columns on the Layout Style

Rows and Columns

You can choose either Rows or Columns. Rows will stack the blocks within the Layout Manager on top of each other. Columns will position the blocks within the Layout Manager side by side. For our example we have chosen Columns.

Background Colors and images

Color: Use EZ-Color Picker to choose a background color or enter the hexadecimal number for your color.

Image: Add a background image by Clicking on EZ-Browse and selecting the image of your choice.

Image Position: Select where you want your image to be within the Layout Manager and whether you would like that image to repeat.

*Note – the Background Image Options are for the background of the Layout Manager Block only. This will not change the entire background of your website

Padding

Padding specifi es the amount of space between the blocks of the Layout Manager and its borders. If the padding amounts are empty you will get the browser default amounts. Entering  Padding amounts is optional.

Borders

7. If you would like to add a border to your Layout Manager block choose the Size, Color and Style of your Borders in this section Block Options

8. These options allow you to modify the appearance of each of the blocks contained within the Layout Manager block, not the Layout Manager block itself. You can set the Width and Vertical Position. You also have Background Color and Image options. The Border Size, Space Between Blocks and Padding within blocks are options that will be applied to the blocks inside the Layout Manager block and are different than the borders and padding in the sections above

CSS Class

This is a more advanced option for users that are knowledgeable with CSS (Cascading Style Sheets). This option allows you to assign advanced styling options to this Layout Manager block and the blocks contained within it.

Insert Blank Line

If checked, this option will add a blank line after the end of the Layout Manager Block.

For our example we are not going to set any specific options in the Layout Manager. Click Submit.

Nested Layout Managers

Nesting your Layout Managers gives you even more options for organizing the content on your webpage. To nest Layout Manager blocks is to put one Layout Manager block inside of another Layout Manager block. Doing this will give you options to split columns into rows and rows into columns. You will still have all of the same style options as above.

Add a layout manager

1. Click on the Plus Icon   on Block 1

2. Select Layout Manager from the drop down menu.

4. Click Next Step

5. Select Columns

6. Push Submit

Add a Layout Manager inside the Layout Manager

8. Click the plus  on block 1

9. Select Layout Manager from the Drop Down.

10. Click Next Step

11. Select Rows

12. Push Submit

Add a Second Layout Manager

13. Click Plus  on layout 1.1

14. Choose Layout Manager again.

15. Important! on the Block dropdown: Select 1.- End Layout.
(This will place the layout manager next to the fi rst one, instead of inside it.) Click Next Step

16. Select Rows and push submit.

Insert Content

17. Add a Title Block after  Layout Manager 1.2  by clicking on the Green Plus Sign in that block. This will be 1.2.1 Title Block.

18. Add a Title Block inside of Layout Manager 1.1

19. Add a Text Simple Block more Title Block after Title Block 1.2.1.  You can all all sorts of blocks from this point.  Add a Graphic Block to in put in a picture or logo.  You can even add a navigation with a button bar or Navigation

Title Block Layout Manager Block Cautions

Layout Manager blocks are mainly intended to help you organize the content of your pages in a functional and aesthetically pleasing way. They can be very useful to you however, there are some cautions when using Layout Manager blocks.

Deleting Layout Manager Blocks

Deleting a Layout Manager block is a little different from most blocks. If you're not careful you might delete more than you want to. When you click on the delete icon (red X) for the Layout Manager you want to remove, you will be presented with three options: Delete Blocks, Layout Only, and Cancel.

Delete Blocks -  will remove the layout manager and all blocks inside of it.

Layout Only -  will delete the layout manager block only, but leave the blocks that were inside the Layout Manager.

Cancel - will delete nothing.

Too Much Nesting

While the Layout Manager block is a good tool, it should not be over used. When trying to create the layout you want you may end up with dozens of layout manager blocks that you  don't need. When this happens you will have block identifi cation numbers that are long and confusing. With a little pre-planning you will rarely need to nest layout managers more than 3 deep.

The example shown is using only 3 Layout Manager blocks to achieve a nice page layout.