This is the third article in the SharePoint Online planning guide for Office 365 for professionals and small businesses. This article discusses the features in SharePoint Online that enable you to design a professional-looking web presence for your organization.
In this article
Who should read this article?
You should read this article if you are responsible for customizing the public-facing Website that is available with SharePoint Online for Microsoft Office 365 for professionals and small businesses. You should also read this 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, and 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.
Note In SharePoint Online for Microsoft Office 365 for professionals and small businesses, your public site is called the Website, and is the top-level site in the site collection. Your Team Site, which is available to people you invite, is another site in the site collection. You can create additional sites for your colleagues as subsites of the Team Site, but there is only one public-facing 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 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 PayPal transactions. 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:
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 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.
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.
|Map & Directions
Add a map and directions from Bing Maps for an address.
Tip Use the Map & Directions gadget to provide directions to your office location to site visitors.
Add custom HTML code including hyperlinks to images, a web page, a document or an email address.
Tip Use the HTML gadget to add links to partner web sites by using appropriate images.
Embed a video from Bing Video, YouTube, or any other video hosting service provider in your Web page.
Note You have to know the HTML code or the URL of the video to embed it in a Web page.
Create a slide show album in your Web page. You can add up to 50 images to each slide show. You can specify the length of time that each image appears in the slide show, or you can let visitors move through the pictures at their own pace.
Tip Use the Slide Show gadget for a visual showcase of your products.
||Add a PayPal button to your site. If you are selling products or services on your web site, you can use PayPal buttons to set up an online payment processing solution.
||Add a Contact Us form to a Web page to enable site visitors to get in touch with your business through e-mail. You can have the e-mail sent to one or several addresses at once.
||Add a Stock list gadget to show the latest trading information for a particular stock as a service to Web site visitors.
||Add a Weather gadget to provide a brief weather report for a particular location.
Add a Date modified gadget to show the date and time the Web page was last updated.
Tip If your Web site needs frequent updates to content such as limited-time promotions or discounts for your products or services, the Date modified gadget may be useful for site visitors to see how frequently you update the page.
Add a Site information gadget to display the site title, site slogan, or footer text inside the Web page.
Note When you update a site title, site slogan, or the footer text in Web Site Design Tool, the referenced text in the Site information gadget is automatically updated.
Find more information about gadgets at the following links:
Top of Page
Previous article in this planning guide: Step 2: Plan the structure and content for your Team site
Next article in this planning guide: Step 4: Train and support users
Main planning guide article: SharePoint Online planning guide for Office 365 for professionals and small businesses