The Ultimate Toolbox for creating
amazing web sites!
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).
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).
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
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
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
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.
.
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:
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:
Note:
Layers are primarily designed for use with absolute or fixed layouts. Unlike layout grids, they are not inherently responsive. To ensure proper display on smaller devices, you will need to implement breakpoints.
Additionally, combining layers with layout grids or other flexible containers is generally not recommended, as it can lead to overlapping elements or other unexpected behaviors. For a consistent and reliable layout, we recommend using the same container type for all elements on the page.
Layers are primarily designed for use with absolute or fixed layouts. Unlike layout grids, they are not inherently responsive. To ensure proper display on smaller devices, you will need to implement breakpoints.
Additionally, combining layers with layout grids or other flexible containers is generally not recommended, as it can lead to overlapping elements or other unexpected behaviors. For a consistent and reliable layout, we recommend using the same container type for all elements on the page.
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 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.