Create a responsive website with anchored layers

The Layer object in WYSIWYG Web Builder is a very powerful feature for advanced web layouts and it can be used for many different layout types. In this tutorial we will explain a new concept (introduced in version 9) called anchored layers. This can be useful to create 'responsive' layouts. Responsive means that the layout will adapt itself automatically based on the available screen size. For example on mobile devices with different screen sizes.

With Anchored Layer you can anchor one or more sides of the layer to the sides of the page. For example if you enable 'Anchor Left' and 'Anchor Right' then then the layer will stretch if you resize the browser window (the offset to the left and right page border will remain the same). But you can also anchor just one border (or all).

Here is an example how this feature can be used:
Step 1
Insert a Layer. This will be the header of the page so place the layer at the top of the page.
Set the width to exactly 970 pixels (the height does not matter). We use 970 pixels because that is the minimal resolution we want to support. (For example to support the iPad).

Set the Layer mode to 'Anchored Layer' and enable:
Anchor Left
Anchor Top
Anchor Right

Also set the alignment to 'Center' this will align all content in the center of the layer when the page is published.
Step 2
Insert another Layer. This will be the left side bar so place it at the left side of the page.
Set the Layer mode to 'Anchored Layer' and enable:
Anchor Left
Anchor Top
Anchor Bottom
You can view a live demo here:
http://www.wysiwygwebbuilder.com/support/anchoredlayer/

Download the demo project:
http://www.wysiwygwebbuilder.com/support/anchoredlayer/anchoredlayer.zip


Related tutorials:
Create a responsive website with floating layers
Using Layers in WYSIWYG Web Builder
Step 3
Insert another Layer. This will be the right side bar so place it at the right side of the page.
Set the Layer mode to 'Anchored Layer' and enable:
Anchor Right
Anchor Top
Anchor Bottom

Step 4
Insert another Layer. This will be the footer of the page so place it at the bottom of the page.
Set the Layer mode to 'Anchored Layer' and enable:
Anchor Left
Anchor Right
Anchor Bottom
Set the alignment to 'Center' so all content will be aligned in the center of the layer when the page is published.
.

Step 5
FInally add the content layer. Place this layer exactly between all other layers in the center of the page.
Set the Layer mode to 'Anchored Layer' and enable:
Anchor Left
Anchor Right
Anchor Top
Anchor Bottom

Preview or publish the page and you will notice that the entire layout adapts itself to the size of the browser window.

But... of course we also want to add some content. In this tutorial we will use floating layers so that everything inside the content layer will size and move dynamically. See also this related tutorial: Create a responsive website with floating layers

Just like in the previously mentioned tutorial we will use a few layers with an image and some text.
a) Insert a new Layer
b) Set the width to 140 pixels and the height to 160 pixels.
c) Set the Layer mode to 'Floating Layer' and set all margins to 10.
d) Move the layer inside the content layer

Repeat this to add more floating layers.

The final result will look something like this: