Mac SEO Blog

As you may already know, an ‘object’ in EverWeb can either be a TextBox, shape, image or widget. To add a TextBox to the page, you simply click on the TextBox button in the Toolbar then start adding your text inside the box. To add a shape, you just click on the Shapes button then click on the shape you want from the thirteen available shape types. Images can be added to your page by drag and dropping them from your hard drive, cloud location, the Assets List or by using the Media button in the Toolbar. Last but not least, widgets can be drag and dropped on to the page from the Widgets tab. All nice and easy

Objects in Fixed and Responsive Page Layouts

EverWeb has two types of page layout: Fixed Width and Responsive. In the Page Settings Tab of the Inspector Window, you will see a section called ‘Page Layout’. If you click on the dropdown menu, you will see three page layout styles are available. The Left Aligned Layout and Centered Layouts are Fixed Width page layouts whilst the third page layout, Responsive, is used if you want to design a Responsive website.

Whilst the technique of adding objects to the page in either of the two page layout types is the same, the way in which objects are handled on the page can diff.

Object Stacking in Fixed Width Page Layouts

When you add an object to a page in EverWeb, it is as if you are adding a new layer on top of the existing layers of the page, in the same manner as using layers of tracing paper. To see this effect create a new Blank Home page in an EverWeb Project file. The Blank Home page uses a Centered Page Layout and has only one object in it – the EverWeb logo image located in the Footer section. To keep this example simple, delete the logo image from the page.

Now that the page is completely blank, click on the Shapes button in the Toolbar and add a rectangle shape to the page. Click on the Shapes button a second time and add a triangle shape. This shape will sit directly on top of the rectangle. As the triangle is the same color as the rectangle you might not see it, so go to the Shape Options tab and change the Color Fill to green. Now click a third time on the Shapes button and add a circle. The circle will sit on top of both the triangle and square obscuring a part of both of these objects. Again, use Color Fill to change the color of the circle, this time to red.

You can freely move the three objects around the page as you want – horizontally along the page’s x-axis and vertically along the y-axis. In this example notice that the circle always sits on top of the triangle which always sits on top of the rectangle. This ‘stacking’ of objects shows you the depth of each object on the page which occurs along the z-axis.

For the moment, you will find that you cannot change the depth order of the stack. This is reasonable as the page is viewed on screen as a two dimensional object rather than a three dimensional object.

Changing Object Order on The Page

Most of the time, you will not need to worry about the ‘depth’ of objects on the page, however, 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, e.g. a player control button, which would be represented by a circle on top of a rectangle. If you add the circle shape first to the page then the rectangle shape next, you will find that the rectangle is always above the circle.

EverWeb allows you to easily change the z-axis order of objects by using the Arrange-> Bring Forward or Arrange-> Send Backwards menu options. The option you choose depends on which object you have selected. To save time, you can also secondary click on the object you want to change the order of then choose the option you want from the popup menu.

As you can see from the Arrange menu, you can also quickly move an object right to the top or bottom of the stack using the Arrange-> Bring To Front and Send To Back menu options.

Objects in Master Pages

So far, so good, but what happens if you have a Master Page attached to your page? In this scenario, the Master Page is treated as if it is another page underneath the page it is attached to. Master Page objects can be brought forward or sent backwards but only within the Master Page itself.

The page the Master Page is attached to sits independently above the Master Page. The objects on this page can only be stacked within the page itself. Again this usually is not a problem but there may be times where you want a Master Page object to be visible above all other objects e.g. a navigation menu widget. In this instance you can force the object to be at the top level of the stack by selecting it then selecting the Arrange-> Always on Top menu option, or by checking the same option in the Metrics Inspector.

You can apply Always On Top to multiple objects. Objects set this way will still have a stacking order too, so you can still use Bring Forward and Send Backwards when Always on Top has been set.

More About Object Stacking…

Knowing how and why objects are stacked will help to make designing your website easier. In the second part of this post, we will look at object stacking in Responsive Page Layouts.