HOW TO CUSTOMIZE YOUR WEBSITE

Customize pages on your website

There is a lot you can do with the pages on your Office 365 public website. You can add and delete text, pictures, videos, and much more. You can customize each page differently depending on its purpose. For example, you might put more effort into customizing the Home page because of the web traffic it gets. Or you might spend a lot of time customizing your Products pages because your customers are spending most of their time there. Watch the video below for a quick demo. The rest of this article appears below the video.

Up Next

0

Video: Customize pages on your website

Share

Video: Customize pages on your website

Date 4/15/13,Duration 2:40,Views 2824

Video by: Content Publishing

In this article

---

• Add and format text
• Add tables, links, and media
• Add reusable content
• Add Parts to a page
• Change page layout
• Learn more

---

Add and format text

One of the first things you’re likely to do with your web pages is add text to describe your business, your products, your contact information, and so on. When you first open your website, you’ll find that each page already contains sample text presented in different ways. It’s easy to replace this text with your own to describe your business or organization.
When you start editing a page, you see a toolbar with text editing options as shown here.

Using the toolbar, you can copy and paste text and do standard formatting like change the font size, center text, and insert bullets or numbering. It’s a lot like using a word processor, but of course you don’t need to install any software on your computer because it’s all browser-based. Follow these steps to add and format text on your web pages.
Add and edit text

1. In Office 365, click Sites > Public site.
2. Browse to the web page where you want to add and format text.
3. From the Page tab, choose Edit.
   (See Add and edit pages on your public website.)

Don’t see the Page tab? Here’s a handy trick. Add \pages to the end of your website address (URL). For example, if your site is https://contoso-public.sharepoint.com, then change it to this:

https:// contoso-public.sharepoint.com/pages

4. Place your cursor where you want to add or change the text.
5. Format or modify the text using the following toolbar options.

Commands	Definition
Edit	Save or Save and Publish the page.
Clipboard	Cut, copy, paste, or undo the last editing action.
Font	Change the typeface, font size, bold, italicize, highlight, and so on.
Paragraph	Add bullets, numbered lists, centered paragraphs, and so on.
Styles	Change the style of the text, for example, Heading 1, Heading 2, Quote, or Emphasis.
Spelling	Run a spellcheck of the page in your given language.
Markup	Edit the page source, select page elements, convert existing text to XHTML, and so on.

Tip For accessibility, it’s a good idea to use the fonts that you find in the Styles group. Office 365 makes sure that assistive technologies such as screen readers can use these easily. To learn more about making the site content accessible, see Add accessible content and links to a site.

6. When finished, click Save or Save and Publish.

Top of Page

Add tables, links, and media

In addition to the text that you add to each page, you can add tables, links, media, and other objects that make the page visually interesting. These options are all available on the Page tab as shown here.

Follow these steps to add tables, media, and links to your web pages.
Add and edit tables

1. Browse to the page where you want to add a table.
2. From the Page tab, choose Edit.
3. Place your cursor where you want the table to appear.
4. From the Insert tab, click Table and select the number of rows and columns you want to add to the page.
   (Learn more in Add a table to a web page.)

Note To make tables accessible, check the Header Row box on the Design tab.

5. When finished, click Save or Save and Publish.

Add and edit a picture

1. Browse to the page where you want to add the picture.
2. From the Page tab, choose Edit.
3. Place your cursor where you want the picture to appear.
4. From the Insert tab, click Picture and choose one of the following:

• From Computer to upload a picture from your computer to your website. You can choose a location for the picture on your website (Photos, Site Assets, Documents, etc.).
• From Address to insert a picture that is already stored on the Internet. When you choose this, you’ll enter the web address of the picture and the alternate text you want to use.
• From SharePoint to insert a picture that is already stored on your website. When you do this, you’ll specify the folder where the picture is stored (Photos, Site Assets, Documents, etc.).

5. Once you’ve added the picture to the page, you can customize the appearance of the picture using the toolbar:

• Pick Rendition to change how the image renders on the page.
• Address to change the source image address.
• Alt Text to change the alternate text, which appears in place of the image when the image can’t be viewed.
• Image Styles to apply a different style to the image border.
• Position to change where the image appears, such as float left or float right, or make inline top, middle or bottom.
• Horizontal Size and Vertical Size to change the size of the image. To change the aspect ratio of the image, uncheck the box Lock Aspect Ratio.
• Horizontal Space and Vertical Space to add space or padding to the top and bottom or left and right of the image.

Note: In addition to using the toolbar options, you can also use your mouse to resize or reposition the image on the page.

6. When finished, click Save or Save and Publish.

Add video

1. Browse to the page where you want to add the video.
2. From the Page tab, choose Edit.
3. Place your cursor where you want the video to appear.
4. From the Insert tab, click Video and Audio and choose one of the following:

• From Computer to upload a video file from your computer to your website. You can choose a folder for the media (like Photos, Site Assets, Documents, etc.) or create a new folder.
• Embed to directly embed a video from a video sharing site like YouTube or Microsoft Showcase.
• From SharePoint to insert a video file already stored on your website. When you do this, you’ll specify the folder where the media is stored (Photos, Site Assets, Documents, etc.).
• From Address to insert a video file that is already stored on the Internet. When you choose this, you’ll enter the web address of the media you want to use.

5. To customize the embedded player attributes, such as size, click Edit Snippet and modify the embed code directly. Click Insert when finished.
6. When finished, click Save or Save and Publish.

Tip For accessibility, it’s important to add captions to video. This helps people who can’t hear and those whose native language is different from yours. To learn more about captions, see Add accessible pictures and media to a SharePoint site.

There are

Add audio

1. Upload your audio file to your public website Site assets library:

1. In the upper right-hand corner, select Settings, and then click Site contents.
2. Select Site Assets.
3. Drag the audio file in.

2. Right-click the file, and then choose Copy shortcut.
3. Browse to the page where you want to add the audio.
4. From the Page tab, choose Edit.
5. Place your cursor where you want the audio control to appear. If you want the audio to auto-play, add it at the end of the page.
6. From the Insert tab, click Video and Audio and choose Embed.
7. In the Embed window, copy the following HTML code and replace the path in quotes after src with the path to the audio file that you copied in step 2. Choose one of the following:

• To display an audio control:

• To auto-play the audio file:




8. Click Insert to add the audio to your page.
9. When finished, click Save or Save and Publish.

Insert hyperlinks

1. Browse to the page where you want to insert a link.
2. From the Page tab, choose Edit.
3. Place your cursor where you want the link to appear.
4. From the Insert tab, click Link and choose one of the following:

• From SharePoint to insert a link to an existing page or file on your website. To link to an existing page, click the Pages library, select a page (like Contact-us.aspx), then click Insert. To link to an existing file, browse to the library containing the file and select it instead.
• From Address to insert a link to a page or website on the Internet.

5. Enter the text to display for the link. The text should describe the destination of the link, such as the title of the page or the name of a document. Avoid using meaningless phrases such as “Click here”.
6. Add the address, starting with HTTP, and then click OK.
7. When finished, click Save or Save and Publish.

Upload a file and link to it

1. Browse to the page where you want to add the link.
2. From the Page tab, choose Edit.
3. Place your cursor where you want the link to appear.
4. From the Insert tab, click Upload File.
5. Click Browse to locate the file, select the file and choose Open.
6. If you want to store the file in a different other than the default, click the drop-down menu next to Destination Library.
7. Click OK.
8. When finished, click Save or Save and Publish.

The link appears on the page and when clicked, the source file will open in its native application.
Top of Page

Add reusable content

Reusable content is a selection of content, which can include text, images, links, and so on, that you create once and reuse multiple times on the website. A good example of reusable content is a copyright, product name, mailing address, or customer quote that can be easily managed in one place. Follow these steps to create reusable content and add it to your page.
Create reusable content

1. From your website, click Settings and choose View Site Contents.
2. On the Site Settings page, click the Reusable Content library.
3. Click New Item to create new reusable content.
4. Add the Title and Comments and select the options Automatic Update and Show in drop-down menu.
5. For Reusable HTML, add the content you want to make reusable, including text, images, links, and other objects.
6. Click Save.

Add reusable content

1. Browse to the page where you want to insert the reusable content.
2. From the Page tab, choose Edit.
3. Place your cursor where you want the reusable content to appear.
4. From the Insert tab, click Reusable Content.
5. Select the reusable content from the menu.
   The reusable content is added to your page and appears in a gray box to differentiate it from other page content.
6. When finished, click Save or Save and Publish.

Top of Page

Add Parts to a page

Web Parts, App Parts, and Social Plugins all make up the Parts you can add to your web pages. These parts serve as packaged features you can add to your website to give it greater functionality. You can use parts to display a list of documents or photos on your website or add social media features.

Add parts

1. Browse to the page where you want to add a Part.
2. From the Page tab, choose Edit.
3. Place your cursor where you want the Part to appear.
4. From the Insert tab, choose one of the following:

• App Part to add an existing App Part on the website to the web page.
• Social Plugins to add a social plugin, such as a Facebook Like Box or LinkedIn Box.
• Web Part to add any Web Part on the website, including uploaded Web Parts, Content Rollups, and more.

Note If you don’t find the App part or Web part you want, such as a Contact Us Form app, you may need to add it from the SharePoint Store first.

5. Select the Part that you want to use and then click Add.
6. When finished, click Save or Save and Publish.

Edit parts

1. Browse to the page containing the Part you want to customize.
2. From the Page tab, choose Edit.
3. Select the Part, next to the check box, and click Edit Web Part.
   
4. A toolbox appears on the right side of the page with settings for Content, Presentation, Appearance, Layout, and Advanced. Click through each field to customize the appearance of the Part.
5. When finished, click OK.
6. When finished customizing the page, click Save or Save and Publish.

Top of Page

Change page layout

You can change the layout of a page so that it’s optimized for the text, graphics, and other objects that appear on it. Learn more about this customization in Change the layout of a web page.
Top of Page

Learn more

You can also use CSS to customize your website pages and make other customizations like embedding Office documents or PDF files on your website. See Public Website help for Office 365. Also, learn about creating a whole new website design with Design Manager.