|
|
|
|
|
The Layout Manager can be a very useful tool, however, it can be very frustrating and confusing if it is not used carefully. With the ability to nest Layouts, it has been designed to give you great flexibility for designing a page to look the way you want.
|
|
|
|
|
|
|
|
The Layout Manager is a block which allows other blocks to be arranged in rows or columns within the pagebuilder environment. This means that any blocks you choose can now be placed side by side wherever you want on the page! The Layout Manager also includes advanced features which allow for borders and backgrounds around blocks.
When a Layout block is added, you will notice in the drop down menu of blocks that there are two entries added. The Start Layout entry and the End Layout entry. Any block added between these two entries will have a layout of what you have chosen in the Layout Manager. All types of blocks can be added into this layout, this includes both sidebar blocks and other Layout Managers.
|
|
|
|
|
|
|
When you first add a Layout Manager, you will notice the choice of whether you want a layout style of rows or columns. This indicates whether the blocks you add are below each other (rows) or side by side (columns). This basic option is the building block for any look that you want to accomplish with your page. In EZ-PageBuilder™ by default all blocks are added in a rows layout style. For this reason the majority of Layout Managers you will add will have a column layout style, allowing you to put more than one block side by side in the same row. You will notice that the numbering system for your blocks you add between the layout will now be x.1, x.2, x.3, . . . where x is your layout’s number. You can edit your Layout Manager style and other properties by clicking Edit after selecting either the Start Layout or the End Layout entry.
|
|
|
|
|
|
|
After you have added blocks between the Start and End entries, by editing your Layout Manager you will notice that each block added will now be represented by a line of options in the advanced section. This line of options will allow you to customize the look of each block you have added. This line contains the Block, Width, Vertical Alignment, and Cell Background Color or Image.
|
|
The block column indicates which block of the layout that these options will correlate with. The options correlate with the position, not with the actual block. This means that if you have a specific look for a Title block in the second position and you add a Text block which gets placed in the second position, the Text block will now have the look of what the Title block had previously. If you wish for those options to go on the Title block, you will have to change them over. It is best, for this reason, to add all your blocks that you want in the Layout before you start to edit these advanced options for each position.
The width option only applies to column layout styles. There are two types of width values pixels or percentages. When using pixels remember that about 72 pixels equals 1 inch. When using percentages widths should add to 100%. Also be aware that smaller widths only apply if there is room to shrink the column down. Trial and error is probably the best tool for determining whether the width that you need for a column will work.
The vertical alignment also only applies to column layout styles. It has three options: top, middle, or bottom. Top moves the block to the top of the cell, middle centers the block in the cell, and bottom aligns the block to the bottom of the cell. Horizontal positioning is taken care of in the individual blocks.
You can specify a background color or a background image for each block added. If a background image is entered it will always be used over a color. The background chosen will be behind the block added. The cellpadding will also have this background.
|
|
Each Layout Manager can have an overall look that will apply to all the blocks added to it. These options include a background color, a border, cellpadding, and cellspacing.
The background color applies to all blocks that do not have a color specified. Because of how Netscape handles background images, an overall background image is not possible. If you wish to have an image behind all of your blocks, please see the section Nesting Layouts.
The border option allows you to specify how wide you wish to have the border around the outside of a Layout. This can add an extra three dimensional look to a page. The border size has a default value of 0, which means there is no border shown.
The cellspacing option allows you to specify how wide you want the space between the cells which hold the blocks of the layout. This space in Internet Explorer is filled in with the Layout background color. Netscape, however, leaves it as the background behind the Layout.
The cellpadding option allows you to specify how much space you want inside each cell around its block. This can be used to separate your blocks from each other or from the border of the layout. When a border is not used, the cellpadding and cellspacing will appear to do the same thing. Only when a border is added, will you notice the difference described above.
The default for each of these options is 0, meaning you can place graphics or other blocks next to each other without the Layout getting in the way and causing extra spaces.
|
|
|
|
|
|
The Layout Manager has the ability to contain another Layout Manager as one of its blocks. This ability is known as Nesting Layouts. Perhaps this is the best feature of the Layout Manager because using rows and columns as you get deeper allows you to setup your page with whatever look you want. You could have three columns of rows like a left and right sidebar and a middle section. This can be done using a column Layout Manager containing three row Layout Managers as its blocks (Example).
When nesting Layouts you need to be very careful because it can get confusing fast. It is best to plan out your page before hand of what you want it to look like. Then determine the best method of using layouts to do the job. Remember there is always more than one way to make the layouts do what you want, so try to use the method that uses the least amount of layouts.
Netscape is limited on the number of nested Layouts it can handle. If you are using a Netscape browser below 6.0 to edit your page, you will only be able to nest them three Layouts deep and have it still display on the edit screen. (This also depends on which blocks you are using.) Netscape will handle up to five Layouts deep when viewing the page normally. If you are editing the page in Internet Explorer, although you can nest your Layouts up to around 20 deep, we suggest staying less than five because you want your Netscape surfers to be able to see your sight. This shouldn’t be a problem because a well-designed page should easily be able to stay less than three or four layouts deep.
If you would like a background behind your whole layout, simply add another layout around your main layout. Set the background color or image for the position your main layout block is in and this will make the background you have chosen to appear throughout all of your main layout.
|
|
|
|
|
|
|
When adding a block inside a layout that has the sidebar option selected, do not expect it to move over to the sidebar. This is to allow you to use these blocks with their sidebar vertical format inside your layout itself. Sidebars within a layout takes on the spacing of that layout. If you wish to have a regular sidebar make sure the block is added outside of all Layout Managers. We would suggest putting all regular sidebar blocks at the very first. This allows you to move around all the blocks on your page without the sidebar getting in the way.
|
|
|
|
|
|
