Creating a Custom Page Layout in SharePoint 2013
Creating a Custom Page Layout in SharePoint 2013
In my last article, I documented how to create a Master Page in SharePoint 2013. Master Pages define the global chrome elements of your web site. This article explains how to create custom page layouts in SharePoint 2013. For more information on the SharePoint 2013 page model, see this Microsoft article.
Planning Out Your Page Layout
For this example, we’re going to recreate a chunk of a page on our web site (www.navantis.com):
In our previous article, we created Master Page that defined the header, footer and global style sheets for this page. Now we’re going to create a page layout that follows this basic format. The content will be dynamic so that you could create as many pages as you like based on this layout.
In our page layout, we’re going to define the following areas as “field controls”. We’re going to create them all in a single content container and lay them out explicitly in order to reflect our design:
The breadcrumb on the top left we can use SharePoint’s breadcrumb trail and we will embed the newsletter subscription into the page layout because we don’t want this to be explicitly defined into the layout.
Defining Your Content Type
So before we do the HTML work, let’s create a content type (a definition for content fields) that defines each of these fields for our page. Based on the above plan, we need the following fields:
- LargeHeadline
- RightHandBlurb
- LeftLinkList
- LeftColumnTitle
- LeftColumnText
- RightColumnText
In each case, these will be HTML controls. SharePoint 2013 allows you to define other types of content for these fields such as images. Images in SharePoint 2013 can be rendered in specific dimensions and SharePoint 2013 will dynamic render any image to that specified to ensure they fit nicely into your defined layout.
To create a content type, go to Site Settings –> Site Content Types (under Web Designer Galleries). If you look at Page Layout Content Types you will see existing ones for Article, Catalog, Welcome Page, etc. We’re going to create a content type for our layout. Click on Create and type in a name for your new content type:
Under Parent Content Type, you can select the parent your content type will inherit from. If you look at the existing page layout content types, they inherit from the content type Page. Page is in the group Publishing Content Types. You can also specify the group you want to place your new content type – you could add it to the existing Page Layout Content Types group or create your own custom group.
When you have created your new content type, SharePoint 2013 will display the columns that were inherited automatically from the Page content type. Lets add some new ones to represent our custom fields. Click on the Add from new site column and let’s add each field:
For each column, we can specify the type. For those fields we want to explicitly style, we can use the Single Line of Text option to have the content author put in plain text that will be formatted by the template. For those fields that we want to provide more control to the content author, we can specify the field as Full HTML content and then content author will be able to put in any HTML using the rich text editor. For our fields, let’s use this approach:
- LargeHeadline – Single line of text
- RightHandBlurb – Multiple lines of text
- LeftLinkList – Full HTML
- LeftColumnTitle – Single line of text
- LeftColumnText – Full HTML
- RightColumnText – Full HTML

For each field, create a site column.
Now we have fields to store the content, let’s now create a Page Layout.
Creating a Page Layout
To create a page layout, go to the Design Manager and Click on 6. Edit Page Layouts. Click on Create a Page Layout. Give your page layout a name, pick your master page and your content type you just created.
If you preview your page layout, you will see it doesn’t look like much – we need to update the HTML around the field controls to properly format the layout.
Publishing Your Page Layout
Before you can use your page layout, it has to be published. To publish your page layout, go to Site Settings –> Master pages and page layouts. You will see two files – one is HTML and one is ASPX. in SharePoint 2013, the HTML is now the master and you can edit it using an HTML editor. SharePoint 2013 then generates the ASPX file automatically. To publish your layout, click on the HTML file and then Publish:
This will publish both the HTML and ASPX files, now making them available to create a page based on your layout.
Creating a Page
To create a page based on our new layout, go to New Page.
If you then go to Page –> Page Layouts you will find our new Page Layout in the list of available Page Layouts. When you switch the page layout, you should now see all the fields that we created earlier in our content type.
You can fill in your content either by typing it in or copying and pasting it from either your existing web site or from office documents such as Word. The copy and paste has improved dramatically over previous versions!
Here is my content now filled out:
Now we can publish our page…
Our content is there, but the layout doesn’t reflect what we want…so now edit the HTML to update our layout.
Customizing Page Layouts
Page layouts in SharePoint 2013 are just HTML files with a lot of additional markup to specify where the controls are going to be injected. We can now customize the HTML file through the design manager. You can simply grab a copy of the HTML file, make your changes and re-upload your file and SharePoint 2013 will do the rest. There are two ways to grab the file:
- Go to Design Manager –> 3. Upload Design Files and map a network drive to your master page directory.
- Go to Site Settings –> Master pages and page layouts and you can download your file.
After iterating a few times with the page layout and moving the snippets provided by SharePoint 2013 into the appropriate spots, we now have a nicely formatted page:
All the content within the main page area is fully managed by SharePoint can be easily changed by a content author.
PS,
refer to:http://blog.navantis.com/create-a-custom-page-layout-in-sharepoint-2013/
Creating a Custom Page Layout in SharePoint 2013的更多相关文章
- 转载 SharePoint 2013配置Master Page and Page Layout
转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...
- SharePoint 2013 Deploy Master Page And Page Layout
2013年9月27日的一篇随笔,其实也是自己编写的部署文档,由于客户是HK的,所以描述部分是用英文. 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. First, L ...
- Creating a New Master Page in SharePoint 2013
Creating a New Master Page in SharePoint 2013 This article explains how to create a Master Page in S ...
- Creating Custom Connector Sending Claims with SharePoint 2013
from:http://blogs.msdn.com/b/security_trimming_in_sharepoint_2013/archive/2012/10/29/creating-custom ...
- Adding a WebPart to a SharePoint 2013 Master Page 分类: Sharepoint 2015-07-08 01:03 7人阅读 评论(0) 收藏
On SharePoint 2013 you can not add the Web Parts to the master page the same way of 2010. Please use ...
- SharePoint 2013 中使用 JavaScript Like 和Unlike list item/page/document
SharePoint 2013中新增了很多社交功能,比如用户可以like/unlike 任何一个 list item/page/document,这是一个非常不错的功能. 但有时觉得like/unli ...
- [转]Creating a custom ribbon for Outlook 2013, 2010 and toolbar for Outlook 2007, 2003 – C# sample
本文转自:https://www.add-in-express.com/creating-addins-blog/2013/05/21/outlook-ui-customization-ribbons ...
- GHOST CMS - 创建自定义主页 Creating a custom home page
创建自定义主页 Creating a custom home page 为你的网站创建一个自定义的主页是一个让你从人群中脱颖而出的好方法,并把你自己独特的印记存放在你的网上.本教程向您展示了如何在Gh ...
- Customize the SharePoint 2013 search experience with a Content Enrichment web service
Did you ever wish you had more control over how your content is indexed and presented as search resu ...
随机推荐
- FMDB条件更新
更新操作返回一个BOOL值,YES表示操作成功,NO表示执行过程遇到错误,可以通过-lastErrorMessage和-lastErrorCode查看错误信息.使用executeUpdate:方法执行 ...
- .NET Core开发:项目实践
初始化项目 本来想详细讲一讲dotnet core的,但我对于dotnet core的研究还不到一星期,半吊子,脑子又笨,就不写那些理论出来误人子弟了,还是直接来一篇实践给大家做个参考.废话不多说,直 ...
- Zeplin(for Windows)无缝集成到了 Adobe XD
Zeplin(for Windows)无缝集成到了 Adobe XD 大约6个月前,推出了 Zeplin 的新Adobe XD CC集成.从那时起,数十万个设计从Adobe XD导出到Zeplin.Z ...
- DateUtil时间工具类
package utils; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util. ...
- Android 蓝牙4.0的连接和通讯
1.加入权限 <uses-sdk android:minSdkVersion=" android:targetSdkVersion="/> <uses-featu ...
- QQ自动登录里的一些控件知识
在这个程序里面有个读取计算机指定文件的知识: private void button2_Click(object sender, EventArgs e) { openFileDialog1.Show ...
- ZBrush中SnakeHook蛇钩笔刷介绍
不同笔刷用着不同的作用,绘画出来的效果也是千姿百态,各有千秋,有些笔刷在使用的时候可以替代,但有些笔刷是无法替代,不可超越的,比如ZBrush®中给我们提供的,SnakeHook笔刷,该笔刷在模型表面 ...
- Django框架详解之template
模板简介 将页面的设计和python的代码分离开会更干净简洁更容易维护.我们可以使用Django的模板系统来实现这种模式 python的模板:HTML代码+模板语法 模板包括在使用时会被值替换掉的变量 ...
- spring-session与redis实现session共享
一.准备 两个不同端口号的输出request.getLocalPort() + " ---> " + request.getSession(true).getId()的简单S ...
- 存储过程(带有逻辑的sql语句)
-- 创建存储过程 DELIMITER $ -- 声明存储过程的结束符 CREATE PROCEDURE pro_test() --存储过程名称(参数列表) BEGIN ...