fbpx

How To Create A New Page Layout In SharePoint 2010

Creating a new page layout in SharePoint 2010 can be done through SharePoint Designer or by utilizing the default Out of the Box (OOTB) web browsable layouts. In this step-by-step guide, we will explore both approaches and provide you with the necessary information to create a page layout that meets your requirements.

When using SharePoint Designer 2010, you can start by opening the application and navigating to the desired site. From there, access “Page Layouts” under the “Navigation” section and select “New Page Layout” to begin creating a new layout.

Alternatively, if you prefer to use the default OOTB SharePoint web browsable layouts, you can access them by going to “Site Actions,” then “Site Settings,” and finally “Master pages and page layouts” under the “Galleries” section. Click on “New Document” and select “Page Layout” to create a new page layout.

Regardless of the approach you choose, when creating a page layout, two files are generated: an .aspx file that SharePoint uses and an HTML version of the layout that can be edited in an HTML editor. These two files are associated, meaning any changes made to the HTML file will be synchronized to the .aspx file when saved.

It’s important to note that this extensibility option is only available for classic SharePoint experiences and not for modern experiences in SharePoint Online.

Each page layout is associated with a specific content type, which consists of site columns that define the schema of allowed data types. The page fields available for a layout correspond to the site columns of the associated content type. Additionally, the content placeholders on a page layout must match those on the master page for proper rendering.

In Design Manager, you can create a page layout by selecting a name, master page, and content type. SharePoint will generate an HTML file and an .aspx file with the same name. You can then preview the page layout and make any necessary edits by modifying the HTML file in an HTML editor.

When transferring styles from your HTML mockups to the actual page layout, it’s crucial to determine where the styles should be applied. You can either add the styles directly to the HTML file or store them in a separate CSS file and reference it in the HTML file.

By following these steps and guidelines, you can successfully create a new page layout in SharePoint 2010. Remember to associate the layout with the appropriate content type, sync the HTML and .aspx files, and style the page layout according to your desired design.

Approaches for Creating a New Page Layout

There are multiple approaches you can take to create a new page layout in SharePoint 2010, including using SharePoint Designer 2010 and the default Out of the Box (OOTB) SharePoint web browsable layouts. Let’s explore both options in detail:

SharePoint Designer 2010

To create a new page layout using SharePoint Designer 2010, start by opening the application and navigating to the desired site. Once you’ve accessed the site, look for the “Navigation” section and click on “Page Layouts.” From there, select “New Page Layout” to initiate the creation process. SharePoint Designer 2010 allows you to customize the layout by adding and arranging various elements to suit your needs.

Out of the Box SharePoint Web Browsable Layouts

If you prefer a simpler approach, you can utilize the default OOTB SharePoint web browsable layouts. Access this option by going to “Site Actions,” then “Site Settings.” Under the “Galleries” section, you will find “Master pages and page layouts.” Click on “New Document” and select “Page Layout.” This will prompt SharePoint to generate a new page layout, which you can then customize further to meet your requirements.

When creating a page layout, two files are created: an .aspx file that SharePoint uses and an HTML version of the layout that can be edited in an HTML editor. These two files are associated, meaning any changes made to the HTML file will be synced to the .aspx file when saved. It’s important to note that this extensibility option is only available for classic SharePoint experiences and not for modern experiences in SharePoint Online.

Approach Steps
SharePoint Designer 2010
  1. Open SharePoint Designer 2010.
  2. Navigate to the desired site.
  3. Click on “Page Layouts” under “Navigation”.
  4. Select “New Page Layout”.
OOTB SharePoint web browsable layouts
  1. Go to “Site Actions”.
  2. Click on “Site Settings”.
  3. Under “Galleries”, select “Master pages and page layouts”.
  4. Click on “New Document” and choose “Page Layout”.

Creating a new page layout in SharePoint 2010 involves selecting the right approach for your needs. Whether you opt for SharePoint Designer 2010 or the default OOTB web browsable layouts, associating the layout with a content type, syncing the HTML and .aspx files, and styling the page layout according to your desired design are key steps in the process.

Content Type and Master Page Association

Each page layout in SharePoint 2010 is associated with a content type and must be linked to a specific master page, ensuring consistency and proper rendering. The content type defines the schema of allowed data types through the site columns it comprises. These site columns are used to populate the page fields available for a page layout. Therefore, when creating a new page layout, it is essential to select the appropriate content type to align with the desired structure and data requirements.

Additionally, the content placeholders on the page layout must match those on the master page. Content placeholders act as containers for dynamic content and allow for the proper rendering of web parts and other components on the page. By ensuring consistency between the content placeholders on the page layout and the master page, a seamless and visually appealing user experience can be achieved.

To create a page layout and associate it with the desired content type and master page, SharePoint provides the Design Manager tool. Within the Design Manager, you can specify the page layout’s name, select the appropriate master page, and choose the associated content type. SharePoint will generate both an HTML file and an .aspx file with the same name, allowing you to preview and customize the layout according to your requirements.

Page Layout Association Role
Content Type Determines the site columns and data types available on the page layout.
Master Page Ensures visual consistency and proper rendering of web parts and components.

By leveraging the content type and master page association in SharePoint 2010, you can create customized and structured page layouts that align with your specific content requirements and design guidelines. This enables users to easily create new pages with consistent branding and layout, improving the overall user experience within the SharePoint environment.

Styling and Finalizing the Page Layout

When finalizing a page layout in SharePoint 2010, it is crucial to transfer styles from HTML mockups by determining the appropriate location for styles and previewing the layout for any necessary adjustments. To begin, decide whether to add styles directly to the HTML file or store them in a separate CSS file. By adding styles directly to the HTML file, you can easily see how the design will look, but it may clutter the code. On the other hand, storing styles in a separate CSS file promotes cleaner code and easier maintenance.

If you choose to add styles directly to the HTML file, you can use the tag within the section. This allows you to define the styles specific to your page layout. Alternatively, if you opt for a separate CSS file, you can reference it in the HTML file using the tag. This ensures that styles are applied consistently across multiple pages, making it easier to update and manage the design.

Once the styles have been transferred and applied to the page layout, it is essential to preview the layout to ensure that the desired design is achieved. By previewing the page layout, you can identify any errors or inconsistencies and make the necessary adjustments. This step is crucial in creating a visually appealing and user-friendly page layout in SharePoint 2010.

To summarize, when finalizing a page layout in SharePoint 2010, it is important to transfer styles from HTML mockups by determining the appropriate location for styles. Whether you choose to add styles directly to the HTML file or store them in a separate CSS file, be sure to preview the layout for any necessary adjustments. By following these steps, you can create an aesthetically pleasing and cohesive page layout that meets your design goals.