Object Layers in Fixed Width Pages in EverWeb
https://everwebapp.com
The best website builder for non-Techies!
An 'object' in EverWeb can be either a TextBox, shape, image or widget.
You create your website’s pages by adding these objects to either a Fixed or Responsive Page Layout.
A Fixed Width page layout uses either a Centered or Left Aligned Layout, whilst a Responsive Page Layout is used when you want to design a Responsive website.
You add objects to your page just by drag and drop, but the way in which objects are handled on the page differs between fixed and responsive page layouts .
In this video we will explain how objects are handled in Fixed Width Page Layouts.
When you add an object to a page, it is like adding a new layer on top of the existing layers of the page.
We can see this effect in the following way...
Start by creating a new fixed width Blank Home page. This page uses a Centered Page Layout and has only one object in it - the EverWeb logo which we will delete to keep things simple.
Now that the page is completely blank, click on the Shapes button in the Toolbar and add a rectangle to the page.
Click on the Shapes button again and add a triangle. The triangle sits directly on top of the rectangle but cannot be seen as it is the same color as the rectangle.
To change the shape’s color, go to the Shape Options tab and change the Color Fill to green.
Now click one more time on the Shapes button and add a circle.
The circle sits on top of both the triangle and the square. Again, use Color Fill, to make the color of the circle to red.
Now try moving the three objects around the page. You will find that that you can move the shapes horizontally along the page's x-axis and vertically along the y-axis.
You will notice that the circle always sits on top of the triangle and the rectangle whilst the triangle always sits on top of the rectangle and below the circle. The rectangle on the other hand is always beneath the triangle and circle.
This 'stacking' of objects shows you the depth of each object on the page. This occurs along the z-axis of the page.
Most of the time, you will not need to worry about this but there may be times when it does become important.
For example, you might want to place two shapes on top of each other to create ‘play’ button using a triangle on top of a rectangle.
In this case, I added a triangle to the page first then the rectangle
so the rectangle is always above the triangle.
Fortunately EverWeb allows you to easily change the stacking order of objects.
Select the rectangle then use the Arrange, Send Backwards menu option.
If the triangle had been selected, you would have used Arrange, Bring Forward instead.
You can also access these options by secondary clicking on the selected object then using the popup menu.
The Arrange menu also lets you quickly move an object to the top or bottom of the stack using the Arrange, Bring To Front and Send To Back menu options.
As you add more objects to your page it becomes more complex. As such, you may find that there are times where you want to have one or more objects always positioned at the top of the stack.
You do this using the Always on Top option in the Arrange menu, or by checking the option in the Metrics Inspector.
For example, place a star shape on the page then add a triangle. As you can see the triangle is above the star.
Select the star and check the Always on Top checkbox in the Metrics Inspector. The star is now above the triangle.
Now add a rectangle. You will see that the rectangle sits above the triangle but below the star shape.