Support and Documentation

Common components

Almost every commercial-grade website has the following components: header, footer, social-networking action bar, favicon, and page structure. The recipes in this section provide the details for creating these components.

Ingredients

To follow the recipes in this section, you'll need the following items. (You can create a bare-bones website in Brightspot without any of these ingredients.)

  • A favicon, JPG or PNG format, minimum size 260×260.

  • Your domain name.

  • A web hosting plan, as well as the login credentials so you can upload files to the host directly from Brightspot.

  • The advertising you want to run on your site. Think about the sizes of ads embedded in the page, the size of ad windows that, and how to integrate with Google's Marketing Platform.

  • Color theme.

  • Items to include in the header and footer.

  • Search engine optimization tags.

  • Integration with social networks.

If you're creating a high-end site, you probably want to discuss these items with a web designer.

Creating a new site

With this procedure you create a new site and make a few general settings.

Procedure. To create a new site:
  1. Prepare the Ingredients.

  2. Log into Brightspot.

  3. From the Navigation Menu, select Sites & Settings.

  4. In the Sites widget, click New Site, then click the Main tab.

    new-site-main-tab.png
  5. Fill out the fields.

  6. Click Save.

Adding a header and footer

With this procedure you define a header and footer for all pages associated with a site.

Procedure. To add a header and footer to a site:
  1. Prepare the Ingredients.

  2. From the Navigation Menu, select Sites & Settings.

  3. In the Sites widget, click the site for which you want to define a header and footer. (If you click Global, you define the header and footer at the highest level in the Content hierarchy, and they appear in all your published items.) The Edit Site widget appears.

  4. In Page Defaults, under Header, do the following:

    1. In Logo, do one of the following:

      • Click Inherit to use the logo set in the Global site.

      • Click Select to display the selection field and specify an image logo.

    2. In Hat, do one of the following:

      • Click Inherit to use the hat set in the Global site.

      • Click Select to display the selection field and specify a hat.

    3. In Navigation, do one of the following:

      • Click Inherit to use the navigation page set in the Global site.

      • Click Select to display the selection field and specify a navigation page.

    4. In Search Page selection field, specify a search page.

    The header settings look similar to the following:

    header-form.png
  5. In Page Defaults, under Footer, do the following:

    • Click Inherit to use the footer set in the Global site.

    • Click Select to display the selection field and specify or create a page footer.

    The footer setting looks similar to the following:

    footer-form.png
  6. Click Save.

Adding an action bar

An action bar (or share bar) is a toolbar that contains buttons for sharing web pages on social networking accounts, sending emails, and printing.

Sample action bar
Figure 46. Sample action bar


The following procedure describes how to add social networks to an action bar.

Procedure. To add an action bar to a site's pages:
  1. From the Navigation Menu, select Sites & Settings.

  2. In the Sites widget, click the site for which you want to define an action bar. (If you click Global, you define the action bar at the highest level in the hierarchy, and it appears in all your published items.) The Edit Site widget appears.

  3. In Front-End, expand Action Bar.

  4. To create a default action bar, do the following:

    1. From the Default Action Bar list, select Set.

    2. Click |mi-add_circle_outline| and select an action, such as a social networking share. Repeat to select additional actions. Your form looks similar to the following:

    action-bar-fields.png
  5. To create a type-specific action bar, do the following:

    1. Under Type Specific Overrides, click |mi-add_circle_outline|. A form appears.

    2. From the Types list, select the content types for which you are creating an action bar.

    3. Under Item, click |mi-add_circle_outline| and select a social networking share. Your form looks similar to the following:

      action-bar-type-specific.png
    4. Repeat steps a–c to create additional type-specific action bars.

  6. If you selected Facebook Share, you also need to set the app ID for that share:

    1. In Front-End, expand Facebook.

    2. Click Facebook Settings and select Set.

    3. Set App ID.

  7. Click Save.

Adding a favicon

Favicons are long associated with the branding effort of a website. Most browsers display favicons in tabs, bookmarks, and history listings.

favicon.svg
  1. Prepare your favicon in a graphic editor. The image should be a square 260w x 260h or larger. Save the image on your computer or on the Internet.

  2. From the Navigation Menu, select Sites & Settings.

  3. In the Sites widget, click the site for which you want to define a favicon. (If you click Global, you define the favicon at the highest level in the hierarchy, and it appears in all your published items.) The Edit Site widget appears.

  4. In Front-End, click the Favicon field and do one of the following.

    • Select New Upload, and click Choose to select your graphic.

    • Select New URL, and in the text box paste the URL pointing to your graphic.

      favicon-form.png
  5. Click Save.

Elements in page structure

Each level in the Content hierarchy diagram includes an Overrides widget. In this widget, you define elements of page structure that are different from the parent's page structure. The following list describes the fields an Overrides widget pertaining to page structure.

Header tab
  • Logo: Logo to display in the header. The following options are available:

    • Inherit—Take from previous level in the content hierarchy.

    • None—No logo appears in the header.

    • Select—Logo is the selected image logo.

  • Hat: Static text to display in the header. The following options are available:

    • Inherit—Take from previous level in the content hierarchy.

    • None—No hat appears in the header.

    • Select—Hat is the selected rich-text hat asset.

  • Navigation: Navigation tool to display in the header. The following options are available:

    • Inherit—Take from previous level in the content hierarchy.

    • None—No navigation tool appears in the header.

    • Select—Navigation tool is the selected page navigation tool.

Footer tab
  • Footer: Footer to display on each page. The following options are available:

    • Inherit—Take from previous level in the content hierarchy.

    • None—No footer appears in the web pages.

    • Select—Footer is the selected page footer.

Module placement
  • Above: Modules to display above the page's main content. The following options are available:

    • Inherit—Take from previous level in the content hierarchy.

    • Add After—Adds a module after any other existing modules above the page's main content.

    • Add Before—Adds a module before any other existing modules above the page's main content.

    • None—No module appears above the page's main content.

    • Replace—Replaces any existing modules above the page's main content.

  • Aside: Modules to display next to the page's main content. The following options are available:

    • Inherit—Take from previous level in the content hierarchy.

    • Add After—Adds a module after any other existing modules to the right of the page's main content.

    • Add Before—Adds a module before any other existing modules to the right of the page's main content.

    • None—No module appears to the right of the page's main content.

    • Replace—Replaces any existing modules to the right of the page's main content.

  • Below: Modules to display below the page's main content. The following options are available:

    • Inherit—Take from previous level in the content hierarchy.

    • Add After—Adds a module after any other existing modules below the page's main content.

    • Add Before—Adds a module before any other existing modules below the page's main content.

    • None—No module appears below the page's main content.

    • Replace—Replaces any existing modules below the page's main content.