How to create custom Page Layouts in SharePoint 2013
Before you create a Page Layout there are two questions:
- What is a Page Layout? and
- What do you need to create a Page Layout?
What is a Page Layout?
A Page Layout is a way to design content on sites. You can create content areas and place them with CSS. Simplified: it is like a form for list items. A site is nothing else than an item in a library, so you can see the layout, that you build, as the display form, the edit form and the new form.
What do you need to create a Page Layout?
You will need to download and install the SharePoint Designer 2013, but the most important thing, to make you the less work as possible, is that you know what you want to design and what content you want to display. I recommend you to create a custom Content Type for your Page Layout. It will make it a lot easier to add all the columns you need. It is also recommended to got some knowledge in HTML, ASPX, JavaScript and CSS.
Step one: Create the Page Layout files
Now we got all we need and begin. First of all you should create a Content Type. Now go to the 'Site Settings' and from there go to 'Page Layouts and Master Pages'. In here you can add design files. Hit the expander at the 'New Item' area and choose 'HTML Page Layout'. A form opens where you can give it a name and choose a Content Type. Pressing 'OK' will create two file: <PageLayoutName>.html and <PageLayoutName>.aspx. They contain automatically all columns out of your ContentType. Everytime you want to edit it you need to work with the html-file, the aspx-file will be updated automatic.
Step two: Edit the html-file
After the files are created you can customize them. For this you will need the SharePoint Designer. Open the designer and connect to your SharePoint. After that go to 'Page Layouts', you will find it in the navigation bar on the left side. You will find the both files of your layout, but you will only need the html-file. Open it and you can begin. All aspx-areas are columns or some other stuff that SharePoint need. If you want to delete some columns out of the display you can do it here. Also you can add them here. You are free to do everything as long as you do not destroy the aspx blocks. Use HTML to create tables and give your content a cool structure or add some script tags and add JavaScript. In here you are free.
Step three: Add columns, areas and markups
If you want to add some extra stuf or new columns you will need this step. For this step you need to begin in the 'Site Settings' go to 'Design Manager'. Go to '4. Page Layout' on the left, then choose your Layout. In the corner on the top right click on 'Snippets'. A new window opens where you can choose what you want. In the textbox appears the code you need to add this. Add this code to the html-file with the SharePoint Designer like in step two.
Step four: Publich the Page Layout
To make the changes aviable for everyone you need to publish it. You can publish it from the 'Design Manager' under '4. Page Layout' or in the 'Page Layouts and Master Pages' menu. Open the menu of the layout with the three dots (under 'Page Layouts and Master Pages' use the html file) and hit 'Publish as Majorversion'. Now it is aviable for everyone. Existing pages with this layout will be updated automatic.
Step five: Use the new Page Layout
To use your Page Layout go to the site library and add a new site. The new form asks you for a Page Layout. Your layout should appear n the dropbox, too. That's it.
- What is a Page Layout? and
- What do you need to create a Page Layout?
What is a Page Layout?
A Page Layout is a way to design content on sites. You can create content areas and place them with CSS. Simplified: it is like a form for list items. A site is nothing else than an item in a library, so you can see the layout, that you build, as the display form, the edit form and the new form.
What do you need to create a Page Layout?
You will need to download and install the SharePoint Designer 2013, but the most important thing, to make you the less work as possible, is that you know what you want to design and what content you want to display. I recommend you to create a custom Content Type for your Page Layout. It will make it a lot easier to add all the columns you need. It is also recommended to got some knowledge in HTML, ASPX, JavaScript and CSS.
Step one: Create the Page Layout files
Now we got all we need and begin. First of all you should create a Content Type. Now go to the 'Site Settings' and from there go to 'Page Layouts and Master Pages'. In here you can add design files. Hit the expander at the 'New Item' area and choose 'HTML Page Layout'. A form opens where you can give it a name and choose a Content Type. Pressing 'OK' will create two file: <PageLayoutName>.html and <PageLayoutName>.aspx. They contain automatically all columns out of your ContentType. Everytime you want to edit it you need to work with the html-file, the aspx-file will be updated automatic.
Step two: Edit the html-file
After the files are created you can customize them. For this you will need the SharePoint Designer. Open the designer and connect to your SharePoint. After that go to 'Page Layouts', you will find it in the navigation bar on the left side. You will find the both files of your layout, but you will only need the html-file. Open it and you can begin. All aspx-areas are columns or some other stuff that SharePoint need. If you want to delete some columns out of the display you can do it here. Also you can add them here. You are free to do everything as long as you do not destroy the aspx blocks. Use HTML to create tables and give your content a cool structure or add some script tags and add JavaScript. In here you are free.
Step three: Add columns, areas and markups
If you want to add some extra stuf or new columns you will need this step. For this step you need to begin in the 'Site Settings' go to 'Design Manager'. Go to '4. Page Layout' on the left, then choose your Layout. In the corner on the top right click on 'Snippets'. A new window opens where you can choose what you want. In the textbox appears the code you need to add this. Add this code to the html-file with the SharePoint Designer like in step two.
Step four: Publich the Page Layout
To make the changes aviable for everyone you need to publish it. You can publish it from the 'Design Manager' under '4. Page Layout' or in the 'Page Layouts and Master Pages' menu. Open the menu of the layout with the three dots (under 'Page Layouts and Master Pages' use the html file) and hit 'Publish as Majorversion'. Now it is aviable for everyone. Existing pages with this layout will be updated automatic.
Step five: Use the new Page Layout
To use your Page Layout go to the site library and add a new site. The new form asks you for a Page Layout. Your layout should appear n the dropbox, too. That's it.
Comments
Post a Comment