Each page on your website may have a slightly different layout. You might have some pages with continuous text and some with images that make up the entire page. And you might have others with important business information on the left and supplemental information on the right. For example, you might put your phone number, email, and address on the left and a map to your business on the right. You can control how objects appear on a page by changing its page layout, as described in this article.
In this article
What are page layouts
Page layouts control how content appears on each page of your website. The page layout can put everything together so that text and images take up the entire page; or the layout can have columns that split up content so that some text and images appear on the left and some on the right. Here’s a description of the page layouts available for each page on your website.
| Page Layout |
Definition |
| Error |
Uses the page layout for a custom error page, which site visitors see when they open a page that doesn’t exist. |
| Two Column Layout |
Creates two equal sized columns where you can place text or images on your website. |
| Two Column Left Layout |
Creates a narrow column on the left and wide column on the right. |
| Two Column Right Layout |
Creates a wide column on the left and narrow column on the right. |
| Two Row Two Column Layout |
Creates two rows and two columns. The top row spans the entire page and the bottom row has two columns. |
| Full Page Layout |
Creates a single page with no columns so text and images can take up the entire page. |
Note 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.
Top of Page
Changing 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:
- Browse to the web page that you want to change.
- Click the Page tab and choose Edit.
- From the Page tab, choose Page Layout, and you’ll see a set of page layouts like this:
- Choose the page layout that you want to use for, and you’ll see it applied to the page. (See the previous section for a description of each.)
- Click Save or Save and Publish to save the web page.
Tip You may need to modify the text and images on the page so they fit better with the new layout.
Top of Page
Customize or create new layouts
If you want a different page layout than the default layouts available to you, you can do this in a number of ways. You can add your own Cascading Style Sheets ( CSS), to override the default page layout attributes and position the page contents differently. Or, you can use the Design Manager to create a new page layout for the pages on your site. Here’s how.
Customize the page layout with CSS
- From the Site tab, click Edit Style Sheet.
- Add your own custom Cascading Style Sheet, or CSS, in the box provided. This overrides the default page layout attributes.
Learn more in the article Customize your website using CSS.
Create a new page layout for your web pages
- Click Settings
in the upper right corner and choose Site Settings.
- Under Look and Feel, choose Design Manager.
- Follow the steps to Upload Design Files (step 3) and Edit Page Layouts (step 5) to create a new page layout for your website.
See the Designer documentation on MSDN for more information on the Design Manager – a set of features you can use to create an entirely new design for your website.
Top of Page
Learn more
See Public Website help for Office 365.
Top of Page
