Change the layout of a web page

Typically, you want the style of your website to be uniform and consistent, which you can easily do by changing the look of your website. However, you sometimes want to depart from this on certain pages and have a different layout. You might have some pages with continuous text and some with images that make up the entire page. You might have others with important business information on the left and supplemental information on the right.

You can control how objects appear on a page by choosing a different page layout, by changing the Cascading Style Sheets (CSS) style for a page layout, and by creating a new page layout.

In this article


Change the page layout

Watch the video below (at 2:31 in the video) for a quick demo of changing the layout on your public website. The steps that follow also describe how to change the page layout.

To change the layout of a page on your website:

  1. Log in to Office 365.
  2. Make sure you must have at least the Design permission level for the site.
  3. Browse to the web page that you want to change.
  4. Click the Page tab and choose Edit.
  5. From the Page tab, choose Page Layout, and you’ll see a set of page layouts like this:
Layout
Change Page Layout
Name Definition
Error Uses the page layout for a custom error page, which site visitors see when they open a page that doesn’t exist.

Left sidebar

Creates a narrow column on the left and wide column on the right.

Right sidebar

Creates a wide column on the left and narrow column on the right.

Two Columns

Creates two equal sized columns where you can place text or images on your website.

Two Columns header

Creates two rows and two columns. The top row spans the entire page and the bottom row has two columns.
Full Page Creates a single page with no columns so text and images can take up the entire page.
  1. Choose the page layout that you want to use for, and you’ll see it applied to the page.
  2. Click Save or Save and Publish to save the web page.


 Notes 

  • You may need to modify the text and images on the page so they fit better with the new layout.
  • When you change the layout of a page from a more complex layout to a simpler layout (such as the Two Column Layout to a Full Page Layout), you may see some content disappear. However, the content has not been deleted. You can recover the content by temporarily switching back to the more complex layout, copying and pasting the content elsewhere, and then changing back to the simpler layout.
  • The page layouts on your website are different than site layouts, which appear on the Change the Look page. Page layouts are based on publishing page layouts in SharePoint Online; while site layouts are based on master pages in SharePoint Online.
  • Although the Public Website is based in part on the publishing site features and template, not all features are available for use. For example, you cannot use Page layout columns (such as Byline) and Publishing columns (such has Article Date, Scheduling Start Date, and Scheduling End Date).
  • Search results do not use the web page layouts; there is a different way to change how search results look. For more information, see Change how search results look by using result types and display templates.

Top of Page Top of Page

Customize the page layouts using CSS

You may want to modify a page layout beyond what you can do with the website editor. For example you might want a different background color for the Full Page Layout, or different sizes for the Two Column Layout so the left column is 60% and the right column is 40%. You can add your own Cascading Style Sheet (CSS) to override the default page layout attributes and position the page contents differently.

The region between the page header and footer is where you can make style and layout changes. This region has the Page Content which is a container of the Page Layout. You can also make style changes to the header and footer. The following diagram helps you understand the basic anatomy of web page regions and their corresponding CSS class names.

The four regions of a public web page

  1. From the Site tab, click Edit Style Sheet.
  2. To override the default page layout attributes, add your own custom CSS in the Edit Style Sheet dialog box. Page layouts have corresponding CSS class names:
  • Full Page    .fullPageLayout
  • Two Columns    .twoColumnLayout-left, .twoColumnLayout-right
  • Left sidebar    .twoColumnLeftLayout-left, .twoColumnLeftLayout-right
  • Right sidebar    .twoColumnRightLayout-left, .twoColumnRightLayout-right
  • Two Columns header    .twoRowTwoColumn-top, .twoRowTwoColumn-bottomLeft, .twoRowTwoColumn-bottomRight

Learn more in the video Add custom CSS to your public website.

Top of Page Top of Page

Examples of customized page layouts using CSS

The following examples focus on making simple background color, position, padding, border, and width changes. There are many more CSS style changes you can make. When you modify the page layout, you may also need to modify the Page Content, which is a container for the various page layouts. For more information about CSS, see W3Schools Tutorial on CSS.

Change the background color of the full page layout

.fullPageLayout{background-color:Peru;}

Example of Full Page Layout with changed background color

Make the background of the Page Content transparent

.ms-pub-contentLayout{background-color:transparent;}

Example of Page Content with transparent background

Move the position of the Page content to the left and to the top

.ms-pub-contentLayout{position:relative;top:-5px;left:-45px;}

Example of Page Content repositioned

Move the position of the Page content all the way to the left and to the top

.ms-pub-contentLayout{position:relative;top:-10px;left:-60px;}

Example of Page Content repositioned

Fit the Full Page Layout inside the Page Content

.ms-pub-contentLayout{padding:0px;}

Example of Full Page Layout fit inside Page Content

Maximize the width of the content layout with default padding

.ms-pub-contentLayout{width:993px;}

.fullPageLayout{max-width:993px;}

Example of maximized width of content layout with padding

Maximize the width of the content layout with no padding

.ms-pub-contentLayout{padding:0px;width:1032px;}

.fullPageLayout{max-width:1032px;}

Example of maximized width of content layout with no padding

Change the background color, padding, and width of the Two-Column Layout

.twoColumnLayout-left{background-color:Aquamarine;}

.twoColumnLayout-right{background-color:Aqua;}

.twoColumnLayout-left{padding-left:20px; padding-right:20px;}

.twoColumnLayout-right{padding-left:20px;padding-right:20px;}

Example of several changes to the Two-Column Layout

Change the background color, padding, border, and width of the Left Sidebar Layout

.twoColumnLeftLayout-left{background-color:LavenderBlush;}

.twoColumnLeftLayout-left{border:5px solid Cyan;padding:10px;width:225px;}

.twoColumnLeftLayout-right{background-color:Lavender;padding:10px}

Example of several changes to the Left Sidebar Layout

Change the background color, padding, border, and width of the Right Sidebar Layout

.twoColumnRightLayout-left{background-color:Lavender;padding:10px;}

.twoColumnRightLayout-right{background-color:LavenderBlush;}

.twoColumnRightLayout-right{border:5px solid Cyan;padding:10px;width:225px;}

Example of several changes to the Right Left Sidebar Layout

Change the background color, padding, and width of the Two-Column Header Layout

.twoRowTwoColumn-top{background-color:LightGreen;padding:10px;max-width:780px}

.twoRowTwoColumn-bottomLeft{background-color:YellowGreen;padding:10px;}

.twoRowTwoColumn-bottomRight{background-color:SpringGreen;padding:10px;}

Example of several changes to the Two-Column Header Layout

Top of Page Top of Page

Customize a specific page layout using CSS

By default, the same layout page is used on all pages for which you have chosen that layout page. But you can also create a page-specific layout page. In the Contoso Bistro website, you might have a specific page in your Pages library, such as FullMenu, that displays your entire restaurant menu. Add a hyphen to the end of the CSS class name (such as .fullPageLayout) and the filename of the page (with an exact case match) in the Pages library.

For example, to designate a specific Full Page layout for just the FullMenu page, add this style.

.fullPageLayout-FullMenu{background-color:Khaki;border:5px solid blue;}

Example of changes to a specific page layout

Top of Page Top of Page

Create a new layout page using Design Manager

To create a new page layout, such as a three column layout, use Design Manager. Design Manager is an advanced site design tool that works with popular web design tools or HTML editors. When you use Design Manager to create a page layout, two files are created: an .aspx file that SharePoint uses, and an HTML version of that page layout that you can edit in your HTML editor. The HTML file and page layout are associated, so that whenever you edit and save the HTML file, your changes are synced to the associated page layout.

For more information, see Use Design Manager with your Public Website in Office 365.

 Note    We strongly recommend you do not use SharePoint Designer 2013 to create a new page layout or redesign a site.

Top of Page Top of Page

 
 
Applies to:
Office 365 Enterprise admin, Office 365 Midsize Business admin, Office 365 Small Business admin, SharePoint admin center, SharePoint Online Enterprise (E1), SharePoint Online Enterprise (E3 & E4), SharePoint Online Midsized Business, SharePoint Online Small Business, SharePoint Online Website