Working with page layouts in SharePoint 2013

Design Manager:- my friend in SharePoint 2013 to work with Page Layouts and Master Page.

Certain new and interesting stuffs are introduced in SharePoint 2013 to work with page layouts using Design Manager.

First thing on which we should focus is that now every page layout will have two component i.e. first .aspx which is used by SharePoint and second is .html which is used to edit the pagelayout in any html designer. Basically this concept was introduced for the ease of designing.

Lets start with creating new page layout. Every page layout is associated with some Page content type and hence I have a habit of creating my own content type while creating new page layouts for several reasons like ease of searching, modification etc.

Here I have created new content type from Article Page content type which is inherited from Page Layout Content Type.

First goto DesignManager which is available in Publishing Site.

Clicking on publishing site will navigate to the below page.

Here we can create our own page layout. Creating new page layout will ask for layout name, master page and which content type to be used.

Now it’s time to customize the Page layout. Download the page layout into your filesystem and start playing with it. Downloading from DesignManager will download the HTML file.

In HTML we can see two important divs which are mentioned below:-

1) <div data-name="EditModePanelShowInEdit">:- Content of this div is visible only when it is Edit Mode.

2)  <div data-name="EditModePanelShowInRead">:- Content of this div is visible only when it is Read Mode. In short this is the div where actually end user will be interacting.

In my case end user will only read news and will be able to navigate to the archived contents.

Hence in ShowInRead I have created the blank skeleton i.e the approved UI for end user. Rest everything I did it using javascript and jquery.

Reference of javascript files has to given in "PlaceHolderAdditionalPageHead".