how to create custom sharepoint 2010 page layouts using sharepoint designer 2010.pdf

The SharePoint Swiss Army KnifeStories from a SharePoint Engineer that isn't afraid of Visual Studio.

How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010

June 8, 2010

Becky Bertram has a nice post on how to create custom SharePoint 2010 Page Layouts via Visual Studio but my googling didn’t yield anywalkthroughs on how to do this via SharePoint Designer. So let’s take a crack at this…

Scenario:You’re working with the Enterprise Wiki Site Template and you don’t really like where the “Last modified…” information is located (abovethe content). You want to move that information to the bottom of the page.

Option 1: Modify the “EnterpriseWiki.aspx” Page Layout directly.

Option 2: Create a new Page Layout based on the original one and then modify that one.

We’ll go ahead and go with Option 2 since we don’t want to modify the out of the box template just in case we need it later on.

How To:

Step 1

Navigate to the top level site of the Site Collection > Site Actions > Site Settings > Master pages (Under the Galleries section). Thenswitch over to the Documents tab in the Ribbon and then click New > Page Layout.

Step 2

Select the Enterprise Wiki Page Content Type to associate with, give it a URL and Title. Note that there’s also a link on this page to create anew Content Type. You might be interested in doing this if you wanted to say, add more editing fields or metadata properties to the layout.For example if you wanted to add another Managed Metadata column to capture folksonomy aside from the already included “WikiCategories” Managed Metadata column.

Step 3

SharePoint Designer time! Hover over your newly created Page Layout and “Edit in Microsoft SharePoint Designer.”

Step 4

Now you can choose to build your page manually by dragging your SharePoint Controls onto the page and laying them out as you’d like…

… Or you can copy and paste the OOB Enterprise Wiki Page Layout. I think I’ll do that.

Step 5

Alright, so you’ve copied the contents of the EnterpriseWiki.aspx Page Layout and now it’s time for some customizing. I found the control Iwant to move, so I’ll simply do a copy or cut/paste to the new spot.

Step 6

Check-in, publish, and approve the new Page Layout. Side note: I like to add the Check-In/Check-Out/Discard or Undo-Checkout buttons toall of my Office Applications’ Quick Access Toolbars for convenience.

Step 7

Almost there! Navigate to your publishing site, in this case the Enterprise Wiki Site, then go to Site Actions > Site Settings > Page layoutsand site templates (Under Look and Feel). Here you’ll be able to make the new Page Layout available for use within the site.

Step 8

Go back to your site and edit the page that you’d like to change the layout for. On the Page tab of the Ribbon, click on Page Layout andselect your custom Page Layout.

Et voila! You just created a custom Page Layout using SharePoint Designer 2010, re-arranged a SharePoint control and managed to plan forthe future by not modifying the out of the box template. That was a really simple example but I hope it helped to give you some ideas on howelse you can customize Page Layouts within SharePoint 2010!

Like 2 bloggers like this post.

Posted by HenryFiled in SharePoint 2010Tags: Custom Page Layouts, Enterprise Wiki, SharePoint Designer18 Comments »

18 Responses to “How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010”

1. SharePoint 2010: Recopilatorio de enlaces interesantes (IX)! « Pasión por la tecnología… Says:

July 1, 2010 at 7:56 am

[...] How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010 [...]

Reply2. SharePoint 2010: Recopilatorio de enlaces interesantes (IX)! - Blog del CIIN Says:

July 1, 2010 at 8:07 am


Reply

3. cc861023 Says:

July 2, 2010 at 9:07 pm

fgghgh

Reply

4. Micro Projector Says:

July 28, 2010 at 5:08 am

zomg!!!

Reply

5. yasser Says:

August 11, 2010 at 2:48 pm

Hi!My “New” button is disabled in Step 1 and I can follow “New > Page Layout” !Would you please tell me what could be the problem?

Thanks.

Reply

6. yasser Says:

August 11, 2010 at 2:50 pm

Sorry for misspell >> “I Can’t”

Reply7. Sửa đổi giao diện SharePoint 2010 « Tech Master Vietnam Says:

August 28, 2010 at 8:13 am


Reply

8. neel Says:

September 7, 2010 at 11:15 am

I am not able see the Pagelayout Icon in my ribbon(it is not there), I see only preview button.

I have tried googling folowed steps, still no icon next to preview button

Help me out

Thank you

Neel

Reply

Nikhil Says:

December 21, 2010 at 2:43 am

use this i hope it will helpful for youGo SiteAction ->Site Settings -> Page Layout and Site Template Settingsgoto —> New Page Default Settings choose Your published PageLayout then Your New Page is default for all pages

Reply

9. Bill Says:


Had the same problem (icon disabled). You need to enable Publishing infrastructure feature (site collection) and publishingfeature(web).

Reply

10. keren Says:


Hi,Can you help how to make it more user friendly by setting that the new page will be open directly and user won’t need to pass throughchoosing page layout page?

Reply

11. XristosK Says:

October 1, 2010 at 2:01 am

Thank you.

Reply

12. Timmy Says:

October 26, 2010 at 9:17 am

I [heart] you!

Reply

13. Dean Says:

November 23, 2010 at 6:40 am

I followed your instructions, but when i open the new Page Layout, I get the following message “This page does not contain anyregions that you have permission to edit” any ideas why this would occur? i am the Site collection admin and the server admin hasenabled Edit Master Page and Page Layout option.TIADean

Reply

14. Nikhil Says:

December 21, 2010 at 2:46 am

it is a very helpful to beginner

Reply

15. Markus Says:

January 5, 2011 at 9:35 am

Thanks for this how-to! You mention what I exactly want to do: I want to display resp. edit metadata in a wiki. But I don’t have SPServer, but SP Foundation and I work on that simple non-Entreprise Wiki. Should this be running in my environment as well? Thankyou.Markus

Reply

16. JF Says:


Hi, I have a permission issue, only site collection administrator can create or edit my page layout, a user with full control get accessdenied.

Any idea ?

Thanks

Reply

17. Izzi Says:


I need to customize the ribbon of a sharepoint 2010 site, having a bit of trouble, any help?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquotecite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Comment

Notify me of follow-up comments via email.

Notify me of site updates

« SharePoint Dev Error: Exception from HRESULT: 0x80040E14A Strategy for Migrating Documents Out of Files Shares and Into SharePoint »

Search

Twitchy

@EricaToelle My pleasure Erica! :) 2 days ago"SharePoint is about to get more social. Sign up here http://www.attinisoftware.com to be the first to know." http://t.co/kO20vN1via @AttiniSoft 1 week agoSitting in on an awesome #SharePoint 2010 + PerformancePoint BI demo by Robert Christensen, CIO from HorizonTechnologies @ OCSPUG 1 week agoOC #SharePoint User Group Tonight @ Roland DGA | 1/19/2011 | 6:30pm - http://bit.ly/dSKBFp 1 week ago

Top Posts

How to move/migrate SharePoint list items/documents and preserve metadata properties at the same timeHow to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010Importing User pictures from Active Directory to MOSS 2007How to edit the form fields of a SharePoint ListAlternate Access Mapping in SharepointHow to Create Document Templates for Document LibrariesHow To Create SharePoint Document Library Subfolders ProgrammaticallySharePoint 2010 Troubleshooting: 503 Service Unavailable, App Pool ShutdownHow to Customize People Search ResultsHow to customize the Content Query Web Part XSL to aggregate blog posts

Links

About MeMy Del.icio.us LinksMy FacebookMy LinkedInMy Personal Blog

Recent Comments

Terrell Boehning on SharePoint Active Directory FB…

jasear on SharePoint Dev Error: Exceptio…

Attiq on How to make MOSS 2007 search r…

Attiq on How to make MOSS 2007 search r…

Everton Stewart on SharePoint 2010 Troubleshootin…

Blog Stats

519,936 hits

Theme: Simpla by Phu. Blog at WordPress.com.