{"id":2115,"date":"2015-10-15T12:00:29","date_gmt":"2015-10-15T17:00:29","guid":{"rendered":"http:\/\/www.ragesw.com\/blog\/?p=2115"},"modified":"2018-04-10T02:19:27","modified_gmt":"2018-04-10T07:19:27","slug":"creating-master-pages-for-everwebs-theme-templates","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2015\/10\/15\/creating-master-pages-for-everwebs-theme-templates\/","title":{"rendered":"Creating Master Pages for EverWeb&#8217;s Theme Templates"},"content":{"rendered":"<p>Gone are the days when the word \u2018template\u2019 immediately conjured up pictures of really bad looking PowerPoint presentations! Today templates are design savvy. EverWeb has over 40 stylish\u00a0theme templates in a wide variety of subjects for you to choose from.<\/p>\n<p>All EverWeb themes include\u00a0&#8216;Home&#8217;, &#8216;Contact&#8217;, &#8216;Photos&#8217;, &#8216;Videos&#8217;, &#8216;Blank&#8217; and &#8216;Mobile&#8217; template pages. Some themes also include a &#8216;Coming Soon&#8217; and\/or &#8216;Shop&#8217; template.<\/p>\n<p>As EverWeb organises template pages by theme, it&#8217;s quick and easy to develop a professional looking website in next to no time. All themes include EverWeb\u2019s built in widgets, such as the Navigation Menu, Contact Form, Google map etc.<\/p>\n<p>Template themes are a good way to learn about designing websites in EverWeb as well the exploring the product&#8217;s own feature set. For example, the &#8216;Aurora&#8217; theme includes the &#8216;Full Width&#8217; feature introduced\u00a0in EverWeb version 1.8. Theme templates also help you test out your own ideas without the hassle of building test pages first\u00a0from scratch.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Using EverWeb&#8217;s Template Themes<\/strong><\/p>\n<p>To use a theme template, just select the \u2018Add Page\u2019 button. Click on the theme of your choice from the list on the left, then click on\u00a0the template you want to the right. Click the &#8216;Select&#8217; button to add the template to the Web Page List (see below).<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_2126\" style=\"width: 755px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/teach1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2126\" class=\"wp-image-2126\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/teach1.png\" alt=\"teach1\" width=\"745\" height=\"544\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/teach1.png 634w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/teach1-300x219.png 300w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/a><p id=\"caption-attachment-2126\" class=\"wp-caption-text\">The EverWeb theme template selection dialog box<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>A theme template is only downloaded to your computer when you select it for use for the first time. When you select your theme\u00a0template page, EverWeb automatically downloads the theme and then adds the page you selected to the Web Page List.\u00a0Theme templates not yet\u00a0downloaded to your computer are indicated by a down arrow within a circle icon to the right of the theme name. Pressing on the icon initiates a &#8216;manual&#8217; download of the selected theme template.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Creating a Master Page to\u00a0Use With Your Theme Template<\/strong><\/p>\n<p>If you have already added theme template pages, such as\u00a0&#8216;Home&#8217;, &#8216;Photos&#8217;, &#8216;Contact&#8217; etc., to your EverWeb Project, you can customize each as you would any other web page that you would create yourself. Some objects on your theme template pages use EverWeb&#8217;s built in Widgets. To access a\u00a0widget&#8217;s\u00a0customization features, click on the &#8216;Widget Settings&#8217; cog in the Inspector Window.<\/p>\n<p>If you find that you are making the same customisations for every page type e.g. changing the background color, using a Master Page instead would be better as it will save time and effort now and for any future customisations that may be needed. Here\u2019s how you can quickly add a theme based Master Page to your template page&#8230;<\/p>\n<p>In our example, we will be using the &#8216;Teacher&#8217; template to build a website for our fictional teachers \u2018Tim and Tim\u2019, who provide tuition services for those with learning difficulties at their school.<\/p>\n<p>1. If you have not done so already, create a website project. When you create a new Project you will be asked to add a page immediately. Scroll down the theme template list on the left and select the \u2018Teacher\u2019 theme.<\/p>\n<p>2. Next, scroll down the right hand side of the dialog box which shows you the templates available for the chosen theme. Click on\u00a0the\u00a0\u00a0\u2018Blank\u2019 template page, then press the \u2018Select\u2019 button.<\/p>\n<p>3. If the &#8216;Teacher&#8217; theme template has not been downloaded already, EverWeb will do this automatically. The \u2018Blank\u2019 page incorporating the &#8216;Teacher&#8217; theme will be added to your Web Page List.<\/p>\n<p>4. To create our themed Master Page, click on the &#8216;Blank&#8217; page name in the Web Page List and drag and drop it into the blue section above. This area is where Master pages are listed.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_2120\" style=\"width: 778px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0a.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2120\" class=\"wp-image-2120\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0a.png\" alt=\"tim0a\" width=\"768\" height=\"542\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0a.png 1395w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0a-300x212.png 300w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0a-1024x723.png 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><p id=\"caption-attachment-2120\" class=\"wp-caption-text\">The blank &#8216;Teacher&#8217; theme template added as a Master Page by dragging and dropping the &#8216;Blank&#8217; page from the Web Page List into the blue area.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>5. You will now see that a Master page called &#8216;Blank&#8217; has been created. Double click on the name of the Master page, rename it and press enter to complete the renaming. Now customize the page as you wish. In our example, we have changed the background color, the text itself to &#8216;Tim &amp; Tim Teaching&#8217;, the font size and style, added a YouTube social media button (or video learning) and moved the buttons to the left hand side, making them fixed position so that as the visitor scrolls up and down the page, the buttons stay in place. The Navigation Menu widget was also customized and centered with the rectangular shape resized. All these changes only took a few minutes to complete. You can see the results below&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0b.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2121\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0b.png\" alt=\"tim0b\" width=\"768\" height=\"542\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0b.png 1395w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0b-300x212.png 300w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/tim0b-1024x723.png 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>6. You can now use this template on any new pages you create. To add a &#8216;Home&#8217; page to our website project, first click in the grey area of the Web Page List. To add the &#8216;Teacher\u00a0Home&#8217; page theme template click on the \u2018Add Page\u2019 button and select the Teacher &#8216;Home&#8217; page template style.<\/p>\n<p>7. Once the \u2018Home\u2019 page has been added (shown below), go to the Inspector Window. In the &#8216;Page Settings&#8217; tab, attach the Master Page that you created earlier using the drop down box beside \u2018Master Page\u2019. You will know that the Master Page has been attached as the &#8216;Home&#8217; page background changes and some objects now have Master Page object symbols in their top right hand corner as shown by the black page symbol.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_2122\" style=\"width: 778px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/ns-1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2122\" class=\"wp-image-2122\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/ns-1.png\" alt=\"ns 1\" width=\"768\" height=\"774\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/ns-1.png 888w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/ns-1-150x150.png 150w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/ns-1-298x300.png 298w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><p id=\"caption-attachment-2122\" class=\"wp-caption-text\">The default Teacher theme Home Page template.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>8. Notice that you now have some objects on the page twice. One of the duplicates includes the Master Page object symbol in the top right hand corner. As you cannot delete this from the normal page, select the other duplicate and delete that one instead. Repeat the process until all duplicates are removed. Remember that some objects may lie completely on top of their Master Page counterparts, and also remember objects that may be in the footer of the page. Once you are finished, you have a restyled &#8216;Home&#8217; page customized, but still based on the original Teacher theme (see screenshot below).<\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_2123\" style=\"width: 778px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/t-final.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2123\" class=\"wp-image-2123\" src=\"http:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/t-final.png\" alt=\"t final\" width=\"768\" height=\"683\" srcset=\"https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/t-final.png 1035w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/t-final-300x267.png 300w, https:\/\/www.ragesw.com\/blog\/wp-content\/uploads\/2015\/10\/t-final-1024x911.png 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><p id=\"caption-attachment-2123\" class=\"wp-caption-text\">The completed Home page&#8230;<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>9. Repeat the process above until you have all of the pages you want. You can delete\u00a0the \u2018Blank\u2019 page from the Web Page List as it was only needed to make the Master page.<\/p>\n<p>Don&#8217;t forget to fill in the Page Settings tab so that you get the best SEO possible. Check out our previous Blog &#8216;<a href=\"http:\/\/www.ragesw.com\/blog\/2015\/08\/21\/how-to-use-everwebs-seo-features\/\">How To Use EverWeb&#8217;s SEO Features<\/a>&#8216; for more information. If you want to know more about Master Pages, take a look at our Blog &#8216;<a href=\"http:\/\/www.ragesw.com\/blog\/2015\/09\/10\/all-you-need-to-know-about-everweb-master-pages\/\">All You Need to Know About EverWeb Master Pages<\/a>&#8216;.<\/p>\n<p>Finally, to see the results of your work, use Preview before you finally publish your website! <!--codes_iframe--><!--\/codes_iframe--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gone are the days when the word \u2018template\u2019 immediately conjured up pictures of really bad looking PowerPoint presentations! Today templates are design savvy. EverWeb has over 40 stylish\u00a0theme templates in a wide variety of subjects for you to choose from. All EverWeb themes include\u00a0&#8216;Home&#8217;, &#8216;Contact&#8217;, &#8216;Photos&#8217;, &#8216;Videos&#8217;, &#8216;Blank&#8217; and &#8216;Mobile&#8217; template pages. Some themes also [&hellip;]<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,252],"tags":[279,281,282],"class_list":["post-2115","post","type-post","status-publish","format-standard","hentry","category-everweb","category-everweb-software","tag-everweb","tag-master-page","tag-template"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=2115"}],"version-history":[{"count":12,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2115\/revisions"}],"predecessor-version":[{"id":3616,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2115\/revisions\/3616"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=2115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=2115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}