Creating a Standard Page Design in EverWeb

When designing the pages of your website in EverWeb, you can create its page in a number of different ways. You could add a new page to your site and then add all of the objects you need to the page every time. That’s time consuming, repetitive, and prone to errors. Alternatively, you could create one page and duplicate it every time you need a new page. Then you just need to delete the content you don’t need and add the content that you do want for the page. That’s a better idea, but what happens if, for example, you want to change your company logo or footer height of all of your pages at a later date? You’ll need to go back and change every page. So what not create a time saving, flexible, future proof page layout that can be reused as often as you want? The answer is to use a Master Page.

Master pages are template pages that are attached to regular pages. Real life examples include receipt books, interview forms, questionnaires and so on. Every page has the same layout and so is completed in the same way. Master Pages are similar in that they give you the ability to create a standard page layout and design for the pages of your website. You could use one Master Page for all of the pages in your site, or you could create specific Master Pages for specific groups of pages in your site (e.g. a Master Page for each department of your company). To create a Master Page just click on the ‘New Master Page’ button at the top of the Web Page List on the left hand side of the EverWeb User Interface.

What To Include In a Master Page Design?
There are a number of things that should be considered when it comes to designing your page layout:

1. Page Layout Type. The first thing to decide is whether your website will be of a fixed width or responsive design? If you’re new to website design it’s worth finding out the differences so you can choose the best page layout style for your site. Check out our series ‘Your First Responsive Website in EverWeb for more info. If you’re designing a fixed width site, you can set the page width using the Content Width field in the Page Layout section of the Page Settings tab of the Inspector Window. Typically, you will create one Master Page for desktop and tablet devices with a Content Width value of about 980 pixels, and an equivalent Master Page for mobile devices with a Content Width of about 480 pixels. You can link desktop pages to their equivilant mobile pages using a page redirect. If you’re creating a responsive website, your pages automatically scale so the Content Width field is greyed out. A responsive page style also means that you’ll only have one page design and not two as with a fixed width page layout. Whilst a responsive design style sounds quicker and easier, the learning curve is going to be steeper than for a fixed width page layout. If you’re a first time website designer, check out the chapter on Responsive Website Design in the EverWeb User Manual before starting out as this will explain how responsive web design works in EverWeb. You can find the User Manual from EverWeb’s Help menu. Once you have decided upon the page layout type that you want to use, change this in the Page Layout section of the Page Setting tab if you need to.
2. Page Layout Settings. The Page Layout section of the Page Settings tab is the place to set the dimensions of your page. Depending on the type of page layout that you have selected (i.e. fixed width or responsive), you will have different page layout settings available. Typically, there is no need to change the Top Margin setting unless you have a specific need to do so. The Content Width field is only used in Fixed Width websites where, as mentioned above, the width for desktop and tablet pages will be about 980 pixels and for mobile pages around 480 pixels. For responsive pages, the Header Height, as well as the Content Width Height field, is greyed out. In responsive web design, the header is just like any other responsive row, just placed at the top of the page. As such it does not require a specific setting. Remember that the Page Layout Settings for Header, Content and Footer Heights, are in fact minimum height settings. If your content in these sections extends beyond the minimum height, the section will automatically expand to accommodate the content.
3. Page and Browser Background. These two settings are great to use on a Master Page. Choose the colors and images that you want. If using an image file, keep the file size relatively small so that the image does not impact page loading times in your visitor’s browser.
4. The Right Content. Your Master Page’s page layout should contain the items that you want to see replicated on either some, or all, of your pages of your site. For example, typically the header section of a fixed width Master Page will include objects such as company logos, company name, navigation menu and social media buttons. If you’re designing a responsive page, add these such objects in to a Responsive Row widget placed at the top of the page. The footer can be used for a site map, social media buttons, legal text, copyright text and so on. The content between the header and footer is usually left empty. This space will be filled by the contents of each page of your site that has the Master Page is attached to.

Using Your Page Layout Template
Now that you have designed your Master Page, you can use it throughout your website. To do so, select an existing page, or create a new page, then go to the Page Settings tab in the Inspector Window. In the Master Page section, use the dropdown menu and select the Master Page that you just created. You will see the page layout is now overlaid the page. You’ll notice that all objects that come from the Master Page have a black page marker in their top right hand corners. These objects cannot be changed except by editing the Master Page itself. Remember that if you add a Master Page to an existing page, there may be an opportunity to remove duplicate objects from the regular page. You may also need to move some of the objects on the regular page as they may have been displaced by the Master Page’s objects.

Future Proofing Your Website
Setting up your page layout is something that a Master Page really is useful for. You only need to set up the page once and then attach it to as many regular pages as you want to. You can also create multiple Master Pages to suit any requirement you need.

The great thing about Master Pages is that if you need to make global changes in the future to your site, there will be less work to do. There’s also less change or formatting errors creeping in to your page.

So, creating a standard page layout in EverWeb is easy, just use a Master Page!