Topics

Layout


In This Guide

Content hierarchy

The key to managing a dynamic, high-volume website is consistency. Visitors expect certain aspects of a website to be the same regardless of the individual page they view. One aspect of consistency is page structure—consistently placing and positioning the same elements in the same parts of a web page. Other examples of elements requiring consistency include the following:

  • Page layout
    • Position of advertisements
    • Position of reader comments
    • Position of related items
    • Position of author’s bio
    • Position of action bar
  • Contents of headers and footers
    • Appearance and function of search bar
    • Appearance and position of site’s logo
    • Hat, site-wide links, copyright

Looking at a popular news, political, or commercial website, it is clear that although individual pages have different content (different articles, images, or videos), those pages still have consistent structure.
Overview of the Brightspot hierarchy

Brightspot implements consistent page layout using content hierarchy. The hierarchy starts at the global level, flows through site level, nested section levels, package level, and ends at the asset level.

Content Hierarchy Diagram.png

Here is an example showing how Brightspot, Inc. (that's us!) uses this hierarchy to easily implement layout designs for multiple publications.

Brightspot, Inc. is a company that produces the Brightspot Content Management System (CMS). In addition to the Brightspot CMS, they also produce several other products such as Brightspot Media Desk, Brightspot Assignment Desk, Brightspot Ops Desk, and Brightspot Intranet. Their company website is broken down into standard areas such as “About Us", “Resources”, and “Documentation” to name a few. There is also an area titled “Products” that highlights each of the products mentioned above. Within each of these product areas are various pages. Each page has its own content, but most have the same look and feel as the overall site and each page shares the same header and footer. Finally, Brightspot is a company that is very involved in giving back to the community. One of the organizations they partner with is the Special Olympics. Each year, when the U.S. Special Olympics Games are held, Brightspot.com publishes special content solely dedicated to these incredible athletes and their journeys.

Using the above information as a guide, let’s see how Brightspot organizes its content hierarchy:

  • Global: This is the highest level in the hierarchy, so Brightspot places content shared by all publications at this level. In particular, because the header and footer are the same for all publications, Brightspot sets its header and footer at the global level.
  • Site: As mentioned above, Brightspot offers several different products. Each product needs its own look as it fits within the global site. In order to accomplish this, each product is broken down into its own site with its own settings that cascade down to the sections and assets contained within. This allows Brightspot to set different color themes, or graphics, for each product and all of the individual pages related to each product, yet still be maintained within one instance of Brightspot.
  • Section: Sections are used to divide the content within your sites into logical groupings for your viewers.  Sections help drive the URL structure of your content and provide the navigation path to similar content.
  • Asset: At the asset level, Brightspot’s editors provide the most granular information associated with each piece of viewable content. This includes articles, blogs, images, etc.

When Brightspot assembles content for display in a web browser, it searches the hierarchy to determine what content, layout, and color scheme to use. It first collects all the settings at the global level, then checks if any of those settings are changed at the site level, then the section level, then package level, and finally the asset level.

Implementing content hierarchy

To maximize the consistency and minimize the maintenance of your publications, make settings as high as possible in the content hierarchy. For example, if all of your news publications run an ad above the headline, make that part of the page layout at the global level. If one of your publications puts contact information in the header, and another publication puts contact information in the footer, make that part of the page layout at the site level. If you run a publication with sections (such as news, sports, weather), you can define page layout at the section level, giving each section its own personality. You can further define page layout at the package and asset level. Overall, as a best practice, make settings as high as possible in the content hierarchy to ensure consistency and reusability across all of your publications.

You configure the content hierarchy in the Page Defaults or Page Overrides tab. The following table explains how you access this tab for each level in the hierarchy.

To configure page structure for…
Use
Tab Name
Global levelNavigation Menu > Admin > Sites > Sites widget > Global.Page Defaults
Site levelNavigation menu > Admin > Sites > Sites widget > (Site name).Page Defaults
Section levelOpen the section in the content edit form.Page Overrides
Package levelOpen the package in the content edit form.Page Overrides
Asset levelOpen the asset in the content edit form.Page Overrides

Layout prerequisites

To complete the layouts 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 hat, navigation, and footer.
  • Search engine optimization tags.
  • Integration with social networks.

If you’re creating an enterprise-grade site, consider discussing these items with a web designer.


Setting the site layout

With this procedure you make the settings for the pages in your site.

To set the page layout for a site:

  1. Click menu > Admin > Sites & Settings.
  2. In the Sites widget, click the site for which you want to define the site layout. (If you click Global, you define the site layout at the highest level in the Content hierarchy, and they appear in all your published items.) The Edit Site widget appears.
  3. Click Front End, > Layout, and do the following:
    1. 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 select the hat for your site.
      • Click None if you do not want a logo to display.
    2. In Navigation, do one of the following:
      • Click Inherit to use the navigation set in the Global site.
      • Click Select to display the selection field and specify the navigation for this site.
      • Click None if you do not want any navigation to display.
    3. In Footer, do one of the following:
      • Click Inherit to use the footer set in the Global site.
      • Click Select to display the selection field and specify the footer for this site.
      • Click None if you do not want a footer to display.
  4. Set the module placement for your pages.
  5. In the Search Page selection field, specify a search page.

Module placement

In addition to the general page elements set above, you can also set how modules are placed on your page from the Layout tab.

  • Above: Modules to display above the page’s main content. The following options are available:
    • Inherit—Takes 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—Takes 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—Takes 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.

Creating a navigation

To create a navigation:

  1. Create or open the item to which you want to add a navigation.
  2. Do one of the following:
    If the item is a…
    and you want to…
    do the following:
    Site (including the global site)Create a navigation that appears in all the site’s items.
    1. Click Page Defaults.
    2. Expand Layout Overrides.
    SectionCreate a navigation that appears in all the section’s items. This navigation overrides navigations at the site levels.
    1. Toward the right of the widget, select more_horiz> Overrides. A widget appears.
    2. Expand Layout Overrides.
    SectionCreate a navigation that appears in the section’s landing page.Toward the right of the widget, select more_horiz> Main. A widget appears.
    ItemCreate a navigation that appears in the published item. This navigation overrides navigations at the section or site levels.
    1. Toward the right of the widget, select more_horiz> Overrides. A widget appears.
    2. Expand Layout Overrides.
  3. Under Navigation or Section Navigation, select Select. A selection field appears.
  4. From the selection field, select Create New. A content edit page appears.
  5. In the Name field, enter a descriptive name for this navigation.
  6. To add a simple navigation item (a link to an item on your site or on an external site), do the following:
    1. Under Items, click add_circle_outline and select Simple Navigation Item. A form appears.
    2. To add a navigation item that contains a clickable link, do the following:
      1. From the Title list, select Navigation Link. A form appears.
      2. In the Text field, enter the text for the link that appears on the published site. If you leave this field blank, and you link to an item on your site, Brightspot uses the title of the linked item.
      3. (Optional) In the Description field, enter a description for this navigation item.
      4. Do one of the following:
        • To add a link to an item on your site, from the Link list select Internal, and select the required item.
        • To link to an item on an external web site, from the Link list select External, and paste the item’s URL.
      5. If this navigation has a sub-navigation, under Sub-navigation, do the following:
        1. Add navigation items to the sub-navigation by doing the following:
          • To add a grouped sub-navigation item, under Sub Navigation click add_circle_outline, and select Grouped Sub Navigation Item. In the form that appears, enter a title for the group and select items appearing in the group.
          • To add a simple navigation item, under Sub Navigation click add_circle_outline, and select Navigation Link. In the form that appears, enter an optional title and description for the link, and select or paste the link to the internal or external item.
          • To add a social navigation item, under Sub Navigation click add_circle_outline, and select Social Navigation Item. Select the social network, and enter text and the post’s URL.
        2. To add promos to the sub-navigation, under Promos click add_circle_outline. In the form that appears, configure a promo.
  7. Click Publish.
  8. Click Back. You return to the parent item’s content edit page.
  9. Complete your site's workflow and publish the item.

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.

Action Bar Sample.png
Sample action bar

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

To add an action bar:

  1. Click menu > Admin > Sites & Settings.
  2. In the Sites widget, click the site for which you want to create an action bar, or click Global to create an action bar for all sites. The Edit Site or Edit Global widget appears.
  3. Under Front-End, expand Action Bar.
  4. To create a default action bar, do the following:
    1. From the Default Action Bar list, select Set. A form appears.
    2. Click 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 Configuration.png

  5. To create a type-specific action bar, do the following:
    1. Under Type Specific Overrides, click 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 Items, click add_circle_outline and select a social networking share. Your form looks similar to the following:

      Action Bar Overrides.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. Under Integrations, expand Facebook.
    2. From the Facebook Settings list, select Set. A form appears.
    3. Paste the Facebook 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.

To add a favicon:

  1. Click menu > Admin > Sites & Settings.
  2. 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.
  3. Click Front-End, > Logos & Icons and complete the following:
    1. Use the Favicon field to set your favicon as a .png or .jpeg file by using one of the methods listed below.
      • 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.
      • Select None to have no favicon displayed on your page.
    2. Use the Favicon Ico field to set your favicon as an .ico file by using one of the methods listed below.
      • 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.
      • Select None to have no favicon displayed on your page.
  4. Click Save.
Note
You may find it useful to set both the Favicon field and the Favicon Ico field to ensure your favicons are compatible with older browsers. Also, most browsers still request the favicon.ico field. If you don’t specify one, or include a shortcut via <link> you may get a 404 error.