Step 5: Create and customize the public-facing Website

This is the fifth article in the SharePoint Online planning guide for Office 365 for enterprises. This article discusses the features in SharePoint Online that enable you to design a professional-looking web presence for your organization.

---

• Who should read this article?
• What features does the public-facing Website provide?
• The Website is based on SharePoint
• Create the public-facing Website
• Considerations for customizing the Website
• Customizing the Website and its pages
• The design environment
• Types of customizations
• Site customizations
• Page customizations
• What are gadgets?
• Available gadgets in the Web Site Design Tool

---

Who should read this article?

You should read this article if you are responsible for creating and customizing the public-facing Website for a Microsoft SharePoint Online for Office 365 for enterprises site collection, or if you are interested in understanding the scope of customizations possible for the public-facing Website.

Top of Page

What features does the public-facing Website provide?

In addition to providing a secure intranet for your organization, SharePoint Online provides a public-facing Website where customers, clients, and others can find your business online.

This public site, called the Website, can be your organization’s web presence. Site visitors will find this site by typing your organization’s URL in their browser.

Determining the content of your Website is an important part of the planning process for your web presence. Depending on the customizations you make, the site can provide site visitors with information about your organization and the services it provides, contact information, videos and photos, a map showing your office location, and more.

The Website is based on SharePoint

Because it’s a SharePoint site, the Website content and page elements, including images, templates, documents and pages, are stored in libraries. By default, the site contains libraries named Web Pages, Images, Documents, and Templates.

By default, the Website also contains a set of common webpages, such as Home, About Us, Contact Us, and Site Map. You can either modify the default pages in the Website or create new ones according to your plans.

Create the public-facing Website

To create your public Website, you need to create a site collection and designate it as the public-facing site. A tenancy can contain only one Public Website site collection.

For step-by-step guidance on creating a public-facing Website, see the article Set up a public Website. This article explains how to create a public website with either the default domain or a custom domain name. It also explains how you can change the domain name for an existing public Website.

Top of Page

Considerations for customizing the Website

Before you begin customizing your Website, it helps to consider some basic questions:

• What business goals do you want to accomplish with your Website?
• Do you want to simply have a place that users can go to learn more about your organization?
• Do you want to accept payments via PayPal? (PayPal is an online payment service that provides users with a secure way to send money to you without leaving your site. You can add a gadget that enables your site to accept PayPal payments. See a list of available Website gadgets in the Available gadgets in the Web Site Design Tool section in this article.)
• What sort of navigation, theme, style, and color scheme best matches your organization’s branding?
• Do you want to add maps, slideshows, videos, and so on? See a list of available Website gadgets in the Available gadgets in the Web Site Design Tool section in this article.
• Will you work with large image files? Check with your Microsoft Online Services administrator to learn whether you have any storage limit issues.

Some planning questions may not be obvious until you begin working with your site. Because the Web Site Design Tool helps simplify the design process, it’s easy to explore different ideas. You’ll find more information about available customizations and the design process in the following section.

Find more information about customizing the Website at the following links:

• View a page in the browser
• Apply a header style, theme, text, or logo to your Web site
• Modify a footer
• Modify the color scheme of your Web site
• Work with hyperlinks
• Modify your Web site navigation
• Save a page
• Save a Web page as a template
• Navigating the ribbon command interface in the Web Site Design Tool

Top of Page

Customizing the Website and its pages

When you design your Website, you use the tools and tabs in the ribbon. Even if you lack web design experience, the Website’s streamlined layouts and easy-to-use design tools can enable you to quickly design a professional-looking Website. By customizing the site’s theme, graphics, fonts, and color scheme, or by adding maps, slideshows, and videos, you can create a web presence that reflects your organization’s branding. With features such as the ability to add a slide show, map, or video to a page, you can find the right functionality to interact with your site visitors.

The design environment

The tools and tabs in the ribbon on the Website pages help simplify the process of designing and customizing pages. The ribbon contains three main tabs, which are always visible, and one contextual tab, which appears when you edit an image. Each tab has options relevant to a set of tasks:

• The Home tab has options to perform basic tasks such as add, edit, delete pages, view page properties, preview a page, save a page, apply font styles and sizes, bullets and numbering, paragraph alignment, and so on.
• The Insert tab has options to allow you to insert page elements such as images, hyperlinks, tables, lines, and Gadgets.
• The Design tab has options to allow you to work with design elements at a site or a page level such as modifying the header text, theme, images, changing the color scheme of your site, modify site navigation, create a footer, add a Cascading StyleSheet (CSS), and so on.
• The Image Tools tab appears when you click an image. It contains options for changing the image, modifying the border, changing the alignment, and so on.

Find more information about the design environment in Quick Reference Guide: The user interface in Website and Web Site Design Tool.

 Note    Permissions determine the level of access you get to the Website, including Web Site Design Tool. If you are assigned to the Full Control or Designer permission level, you have full access to using Web Site Design Tool and the Website. If you have a Read permission level, you do not get any access to the Website, including Web Site Design Tool.

Types of customizations

Some customizations apply to the entire Website, while others apply only to a single page. For example, when you select a theme for your site or customize the header, footer, and navigation, the changes are applied to each page in the Website. On the other hand, when you add a page, change a page layout or a page title, or add an image, those changes are made at the page level on your public-facing site.

Site customizations

Site customizations are global changes that affect all pages. The following customizations apply to the entire Website:

• Select a theme and style for your entire Web site to give it a consistent look and feel.

• Design site navigation so that site visitors can easily get the information they need from your Web site.

• Design site pages by using the available color schemes and fonts.

• Add a header and footer text to every page.

Page customizations

Each page has several different zones with placeholder content inside of it. The content inside the zones is editable, so you can click inside the zone, delete the placeholder content, and then type your own text. You can add text, images, hyperlinks, tables, or gadgets inside a zone. When editing a page, you will see several zones, depending on the page layout. The following customizations apply to a single page:

• Add and format text in Web pages, such as creating bullets and lists, fonts, alignment, and so on

• Add page elements such as images, tables, and hyperlinks.
• Add gadgets, which are modular units of information that display content from a wide variety of sources, such as maps, slideshows or videos.

Top of Page

What are gadgets?

A gadget is a stand-alone application that you can add to a Website page to make it look more dynamic. A few examples of gadgets are videos, blogs, maps, stock tickers, or slideshows.

A wide variety of gadgets are available to you in Web Site Design Tool. Most gadgets are simple to use and do not require coding experience, with the exception of the HTML gadget, which renders custom HTML code. Gadgets provide additional services for your site visitors. For example, if you want site visitors to know the latest stock price of your company, you can insert the Stock list gadget pointing to your company’s symbol in your Web page.

Available gadgets in the Web Site Design Tool

The following table lists the available gadgets in Web Site Design Tool.

Note The availability of the following gadgets in Web Site Design Tool may depend on the locale of your SharePoint Online account.

Find more information about gadgets at the following links:

• Working with gadgets
• Modify, delete, remove or resize a gadget
• Insert a horizontal line
• Insert maps and directions
• Insert a PayPal button
• Insert a Site Information gadget
• Insert a slide show
• Insert a stock ticker
• Insert a video
• Insert a weather forecast

Top of Page

Previous article in this planning guide: Step 4: Plan customizations and solutions

Next article in this planning guide: Step 6: Train and support users

Main planning guide article: SharePoint Online planning guide for Office 365 for enterprises