Scribd
Upload
23 views8 pages

K10Tutorial Creatingthemasterpage 290523 1943 139626

The master page allows you to define shared content like headers, menus, and footers that will appear on all website pages. It is defined early in the development process to ensure uniform page design. To create a master page, copy HTML from sample files and replace elements with web part zones to make content dynamic. This defines common elements and areas for variable content.

Uploaded by

Melina aittouares
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views8 pages

K10Tutorial Creatingthemasterpage 290523 1943 139626

The master page allows you to define shared content like headers, menus, and footers that will appear on all website pages. It is defined early in the development process to ensure uniform page design. To create a master page, copy HTML from sample files and replace elements with web part zones to make content dynamic. This defines common elements and areas for variable content.

Uploaded by

Melina aittouares
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Creating the master page

This page is a part of a tutorial, which you should follow sequentially, from the beginning to the end. Go to the first page:
Getting started with Kentico.

Check out a related video: https://youtu.be/zdL0qjXXuAM

The master page allows you to define content that will be shared by all pages on the website, such as a header, navigation menu
or footer. A master page does not represent a physical page on the website, but rather a design component that is added to other
pages to ensure a uniform look.

Define the master page at the beginning of your website development to know what all the pages will look like with the uniform
elements.

You can define the master page through the following steps:

1. Copy and paste the HTML code from the sample files into the master page layout.
2. Replace parts of the HTML code with web part zones.
3. Add web parts to the web part zones.

Paste the HTML code


Insert the HTML code of the shared parts of the website into the master page:

1. In the Pages application, select the root page of the website's content tree.
2. In Edit mode, switch to the Master page tab.

3. Click Edit layout.


4. Delete the default layout content.
5. Open the Index.html file from the tutorial pack in a text editor.
6. Copy the HTML code inside the <body>...</body> tags and paste it into the page layout editor.

HTML code in the body tags

https://docs.xperience.io 1
Creating the master page

<header>
<div class="col-sm-offset-3 col-sm-6">
<div class="col-sm-6">
<a href="./index.html" title="MedioClinic homepage" class="logo">MEDIO
clinic</a>
</div>
<div class="col-sm-6 nav">
<nav>
<a href="./index.html" title="Medical centers">Home</a>
<a href="./medical-center.html" title="Medical centers">Medical
center</a>
</nav>
</div>
</div>
<div class="clearfix"></div>
</header>
<section class="teaser">
<div class="col-sm-offset-3 col-sm-4">
<p>The goal of our clinic is to provide the best medical care. To make your
life healthy at all times it is also necessary to keep up with healthy way of
living. </p>
</div>
<div class="clearfix"></div>
</section>
<section class="content">
<div class="col-sm-offset-3 col-sm-5">
<h1>Welcome to MEDIO clinic</h1>
<p>Our clinic based in Bedford, NH, is federally qualified health center
offering high-quality, comprehensive, and family-oriented primary health care and
support services since 7th March 1935. We are recognized by the National Committee
on Quality Assurance as a Patient-Centered Medical Home. Providing health care for
a stronger community, we serve nearly 20,000 patients annually.</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<div class="col-sm-offset-3 col-sm-6">
<div class="row">
<div class="col-sm-6">
<h4>MEDIO clinic</h4>
<ul>
<li><i class="fa fa-map-marker"></i> Address: <address>7A
Kentico street, Bedford, NH 03110, USA</address></li>
<li><i class="fa fa-envelope-o"></i> E-mail: <a href="mailto:
[email protected]" title="Email us">[email protected]</a></li>
<li><i class="fa fa-phone"></i> Phone number: <a href="tel:
5417543010" title="Phone us">(541) 754-3010</a>
</ul>
</div>
<div class="col-sm-6">
<span class="cms">Powered by <a href="http://www.kentico.com"
title="Kentico CMS">Kentico CMS for ASP.NET</a></span>
</div>
</div>
</div>
<div class="clearfix"></div>
</footer>

https://docs.xperience.io 2
Creating the master page

7. Click Save & Close.


8. Copy the stylesheet and font lines of code from the Index.html file and paste them into the <head> section of the master
page.

Stylesheet and font code in the Header

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="
anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.
6.3/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700italic&amp;
subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="
text/css">

9. Make sure the doctype definition is HTML 5 – <!DOCTYPE html>.

10. Click Save to save the master page.

You have just copied the HTML code from the sample website to Kentico.

Because we have already defined the CSS code and the CSS stylesheet is linked to the website, the styles are automatically applied
to the master page. You can see that the master page now looks exactly the same as the sample website – switch to Preview mode:

https://docs.xperience.io 3
Creating the master page

The website design is the same as in the sample website:

Add web part zones


Web part zones are elements of the website that allow you to define the layout of pages. Web part zones represent containers, into
which the website content can be easily placed and then edited.

1. In the Pages application, switch to Edit mode.


2. Select the Design tab.
3. Click the menu in the green page template header and select Edit layout.

https://docs.xperience.io 4
Creating the master page

4. Locate the navigational part of the layout code and remove everything inside the <nav> element.
The HTML code is static, but we want to make the menu dynamic – so that it automatically updates according to the
pages we create.

Skip ahead

You can skip steps 4–9 and just copy and paste the final code in step 10.

5. Place the cursor inside the <nav> element and click Insert above the editor.
This adds a web part zone control into the layout.

6. Change the value of the web part zone’s ZoneID property to ZoneMenu.
The ZoneID values of web part zones must be unique on each page template's layout.

Web part zone code

<div class="col-sm-6 nav">


<nav>
<cms:CMSWebPartZone ZoneID="ZoneMenu" runat="server" />
</nav>
</div>

7. Locate and delete both <section> elements.


These sections with text represent content of the website, which we do not want to include in the master page.

8. Place the cursor between the </header> and <footer> tags and click Insert above the editor.
This web part zone represents a place where the page content will be located on the master page.

9. Set this web part zone’s ZoneID to ZoneContent.

Web part zone code

</header>
<cms:CMSWebPartZone ZoneID="ZoneContent" runat="server" />
<footer>

10. Check that the code now looks like this:

https://docs.xperience.io 5
10. Creating the master page

Final code of the master page

<header>
<div class="col-sm-offset-3 col-sm-6">
<div class="col-sm-6">
<a href="./index.html" title="MedioClinic homepage" class="logo">MEDIO
clinic</a>
</div>
<div class="col-sm-6 nav">
<nav>
<cms:CMSWebPartZone ZoneID="ZoneMenu" runat="server" />
</nav>
</div>
</div>
<div class="clearfix"></div>
</header>
<cms:CMSWebPartZone ZoneID="ZoneContent" runat="server" />
<footer>
<div class="col-sm-offset-3 col-sm-6">
<div class="row">
<div class="col-sm-6">
<h4>MEDIO clinic</h4>
<ul>
<li><i class="fa fa-map-marker"></i> Address: <address>7A
Kentico street, Bedford, NH 03110, USA</address></li>
<li><i class="fa fa-envelope-o"></i> E-mail: <a href="mailto:
[email protected]" title="Email us">[email protected]</a></li>
<li><i class="fa fa-phone"></i> Phone number: <a href="tel:
5417543010" title="Phone us">(541) 754-3010</a>
</ul>
</div>
<div class="col-sm-6">
<span class="cms">Powered by <a href="http://www.kentico.com"
title="Kentico CMS">Kentico CMS for ASP.NET</a></span>
</div>
</div>
</div>
<div class="clearfix"></div>
</footer>

11. Click Save & Close.

When you now switch to the Design tab, you can see the website layout with two web part zones.

https://docs.xperience.io 6
Creating the master page

Add the navigation menu


Add a dynamic web part that will represent the website menu. The web part ensures that the pages in the website are reflected in
the menu.

1. In the Pages application, switch to the Design tab.


2. In the web part toolbar on the right, search for the CSS list menu web part.

3. Drag and drop the web part into the orange ZoneMenu web part zone.

https://docs.xperience.io 7
Creating the master page

Alternatively, click the menu icon of the orange ZoneMenu, select Add new web part, select the CSS list menu web
part from the Navigation category and click Select.

4. Type Main menu (CSSListMenu) as the Web part title.


5. Click Save & Close.

The web part appears in the ZoneMenu web part zone. It does not display any page links now, as we have not created any pages yet.

The page placeholder


The Page placeholder web part ensures that the child pages of the website master page (such as Home or News pages) are loaded
inside of the master page template exactly where you want them to be loaded.

Make sure that the green pageplaceholder web part is located properly in the ZoneContent web part zone.

If you have not named the web part zone ZoneContent, then the pageplaceholder web part will be located in a separate
web part zone: Use drag & drop to move the web part into the proper web part zone.

You have created the master page and thus defined a uniform look for your website.

Previous page: Working with the Pages application — Next page: Creating website pages

Completed pages: 6 of 9

https://docs.xperience.io 8

You might also like