Advanced layout options
Although normally the content blocks will appear "stacked" i.e. the previous block above the next, YWD provides alternative methods to layout a content block within the page.
Default layout: “stacked”
By default, all content blocks in YWD are stacked. That means that each content block you add will appear above the next, within the same column.
That's adequate in the virtually all cases. In the example to the left, each content block is highlighted. Notice that each of them occupies the whole column width (in this case, the Main column).
Side by side (adjacent)
Sometimes you may want to to have two or more content blocks appearing side by side. For instance, perhaps you'd like to have a Word Processor block containing some text on the left, and a separate block (for instance, a Google Map) placed to its right, like in this example.
In order to do that, set both content blocks as 'Side by side'. YWD will place them in the same horizontal row within the page layout. You can also specify a width for each "box", or a left margin (i.e. a gutter) in case you'd like to have some separation between the current block and its predecessor.
You can have more than two blocks side by side; but you must explicitly set each of them as such. And you can have regular (stacked) blocks above or below them as well.
In this example we wanted to have a clickable flag image positioned in an area of the page used by the navigation bar (where normally we can't place content). Specifically, we needed it to appear 40 pixels from the top of the page and 30 pixels from the right.
So we created a separate Word Processor content block just for the flag image, selected 'Coordinates (floating)' for it and set to 40px from the top and 30 from the left of the page.
The distance can be relative the top or bottom and from left or right; it's up to you to decide. You can also determine the layer order, so that floating content blocks can even overlap each other. The regular content beneath will always be in layer 0, whereas floating blocks start at layer 1.
This option can be particularly useful if you're using Global content blocks. This way you can have the same floating block appearing on all pages. A good example is a social media button e.g. a "Follow us on Twitter" button linked to your Twitter page and placed on top of your banner.
“Box style” (optional)
If stacked, by default a content block will use all the available width of its container (the column, header or footer areas where it's positioned). But sometimes you may want to specify a width, especially if placing it side by side by another block.
Useful if you're placing the blocks side by side, especially if you’re applying an autoformat to the blocks that includes a border or a background colour. Entering an amount for the height of the blocks will ensure that the “boxes” that you’ve placed side by side have the same heights, irrespective of the lengths of the content inside them.
Inserts additional space at the top, right, bottom or left of the content block. Especially useful if you're placing this content block side by side with another block to its left and would like some distance between the two, acting as a gutter.
Autoformats are styles that you can create in YWD Designer / Layout / Autoformats. Typically you'll apply an autoformat globally (e.g. to all Word Processor content blocks) but if you don't, this option allows you to assign it specifically to this content block.
- Bgnd. image
You can specify a background image so that the content will be overlaid on top of it. The image must have been previously uploaded to YWD's Assets Manager.