Brightspot CMS User Guide

Tutorial: Publishing a site in Brightspot


In this tutorial, you will learn how to publish a website using Brightspot. Before you begin, it’s worth noting that there are lots of ways you might build a site in Brightspot—both in terms of the overall site architecture you choose (for example, traditional, headless, or hybrid) as well as the order of steps you take within Brightspot itself.

There’s certainly no right or wrong way to build a website—these are simply the steps that Brightspot recommends that you follow when first publishing a new site on the platform. Again, you don’t necessarily need to do each one of these steps, or to do them in this order, but Brightspot recommends doing them in this order because you start to see the site come to life really quickly—via Brightspot's preview system—if you follow this approach. It’s built so that there is a minimum of back and forth between site settings and content creation.


There are many different components to publishing a site. As such, this tutorial is a comprehensive walkthrough that touches on many of these components. In this tutorial, you will:

  1. Gather your assets via a downloadable attachment found in this tutorial.
  2. Add a theme, create a color palette, and set your text fonts and colors
  3. Create a new site, including its components like the homepage, sections and tags, a site search page, and a navigation
  4. Add a logo and the navigation to your site
  5. Add a type-specific default module for your sections
  6. Upload images and publish articles (provided in the downloadable attachment)
  7. Add a promo module to your homepage
  8. Add a list module to your homepage
  9. Convert one-off modules to shared modules

  • A Brightspot environment and a user account.
  • Content (images, text, videos, etc.) that is ready to be published.
  • A theme.
Note
A downloadable folder is available for this tutorial that contains all of the images, logos, and articles that you need to complete this tutorial. While you are free to use your own content, it is strongly encouraged that you use the materials being provided.

Click here to download the tutorial materials file.


Your first step is to gather the assets that you’ll need to populate your site. As mentioned above, we've provided a downloadable folder containing these assets for you. We recommend creating a folder on your desktop with them so they’re nearby.

Here’s a list of the assets you’ll need to get started. This list isn’t exhaustive, but if you gather these core assets, you’ll have the essential elements needed to create a simple but engaging site.

  • Company Logo: You’ll need a .PNG or .JPG of your company’s logo, ideally on a transparent background. This logo will be used within Brightspot, as well as on the front end of your site, usually in the header and footer.
    Tip
    If possible, gather both the general or default logo, as well as a version of the logo that is easily readable on an inversely colored background, as many sites will use the default logo in the site header and the inversely colored logo in the footer.
  • Company Brand Palette: Regardless of whether you’re working with an existing brand or creating a brand new site, you’ll want to locate the hex values of the colors in your site's primary palette.
    Tip
    If you’re not sure of the hex values, or where to find them, there are several browser extensions and desktop programs that allow a user to hover over an image or a website to extract the colors. We’ve provided the Brightspot color palette as an example artifact for this step.    
  • 15–20 Assets to Create: Any website is going to need content and a story to tell; before you get started on your site project, you’ll need content to publish. This doesn’t need to be extensive or “real” content (but if you have real content, all the better). For the sake of this tutorial, we’ve provided a set of short articles about what it’s like to work at Brightspot. We’ve also provided a set of images, as well as a set of sections and tags.
    Tip
    You can source free imagery from an agency like Pexels or Unsplash for this step. All of the image assets we have used in our tutorial were sourced from Pexels, and we have made them available for download here if you would like to follow this tutorial step by step. Note that the Pexels license covers only personal, non-commercial uses of the images.

Once you have gathered all the assets you’ll need to build a site, you’re ready to work directly in Brightspot. Before publishing any content, let’s configure the site’s theme so you’ll have a spiffy-looking preview ready and waiting once you begin.

Add a Theme

This step is required. Themes provide your site’s layout, color scheme, and behaviors. You can install your own themes, and versions of individual themes, into Brightspot.

To add a theme:

  1. Log in to the Brightspot environment you are using to create your site.
  2. Click menu > Admin > Themes.
  3. Click New Theme.

    Here, you will pair a front-end design bundle with the theme.

  4. Complete the fields on the New Theme form:
    1. Name—The name for your theme; this is internal facing and should be descriptive.
    2. Bundle—From the drop-down, select Existing and then select from the available options.
      Note
      The available options here will vary depending on your use case and license. For this tutorial, we have used the out of the box bundle, which is typically called frontend-bundle-default.jar.
    site tutorial assign font.jpg site tutorial assign font.jpg
    Add a theme

  5. Click Save.

    Once the save action has completed, you will see additional options, such as Color Palette and Overrides.

Create a Color Palette

This step is optional. These colors populate the color picker that appears within modules, providing a great shortcut that users will appreciate later.

To create a color palette:

  1. Click menu > Admin > Themes.
  2. Locate the theme you just created.
  3. Click Color Palette.
  4. Enter the hex values you collected earlier for the color palette to be used by your site. You can enter up to 10 values.

    The order you enter colors here will determine the order the colors appear in the color picker within Brightspot.

  5. Click OK after you enter the value for each color.
  6. Click Save after you have entered all of your colors.
    Color palette example.jpg Color palette example.jpg
    Color picker and Color palette

Set Your Text Fonts and Colors

This step is optional. Setting your text fonts and colors helps ensure consistency across your site.

To set your text fonts and colors:

  1. Click menu > Admin > Themes.
  2. Locate the theme you created.
  3. Click Overrides.
  4. In the Preset menu, select Custom.
  5. Set your Fonts.

    The Brightspot design system supports two font pairings. To set the font, you can pick anything from Google Fonts; just enter the name of the fonts in the Font 1 and Font 2 fields. For this tutorial, we have picked Noto Sans and Merriweather. You can then elect to apply those fonts to page titles, descriptions, and quotes.

    site tutorial assign font.jpg site tutorial assign font.jpg
    Font 1 and Font 2 assigned

  6. Set your Colors.

    You’ll now want to designate the “primary color” for your site. Because you’ve already set a color palette, you can easily select from those options, or diverge here. In addition to the primary color, you can also set your text colors, site background colors, header and footer colors, as well as button colors and shapes.

    There are a lot of fields for color; at this step, pick a single color or two from your palette to start with. You can always return to the Themes area to modify these selections later.  

    Tip
    You may need to assign your theme to a site before your color palette appears in the color picker. If you are not seeing your palette, skip down to Step 3: Build the scaffolding of your site and complete the Create a Site steps. Once you have built the site and associated it with your template, return to these steps to set your colors. You should now have your palette available for use.

  7. Click Save.
    Note
    If desired, you can click Main > Open Styleguide to take a look at the fonts and colors you’ve just set, or you can proceed to the next step and start creating content.

Now that you have gathered your assets and created a theme bundle to use with your project, you are ready to start building your site.

Create a Site

To create a site:

  1. Click menu > Admin > Sites & Settings.
  2. Click New Site.
  3. Complete the following fields:
    • Name—Give the site a name; for this tutorial we have named our site Tutorial Site.
    • URL—Give the site a URL; remember to enter both HTTP and HTTPS URLs, hitting return after each.
      Tip
      Creating the site URL is an important, and sometimes tricky, step. For example, let’s say your environment’s URL is https://tutorial.brightspot.com. To create the site URL, simply add the name of your site after the https://; the resulting URL should look like https://mysite.tutorial.brightspot.com.

      It is important that the URL you enter matches the domain you are working in. Using brightspot.com as in the example above won't work for you unless you are actually working in the brightspot.com domain.

      Using the image below, you can see that we can find our domain in the address bar of our browser. The domain is going to be something.com, something.org, something.edu, etc.
      Sites tutorial find domain.jpg Sites tutorial find domain.jpg
      Browser address bar with domain highlighted
    • Theme—Under the Theme field, click Shared Theme, then select the Default Theme you added in the previous step.
    Sites tutorial creating a site.jpg Sites tutorial creating a site.jpg
    Creating a new site

  4. Click Save.
    Note
    There are many other settings within Sites & Settings, but for now, we’re just focusing on creating the site itself.
    After the save has completed, take a look at the Sites widget. You should now be able to switch between the Global site and your newly created site.
    Site tutorial sites widget.jpg Site tutorial sites widget.jpg
    Sites widget showing Global site and the newly created site

Going forward, be sure to work in the correct site when creating content—not the Global site. You can see which site you are in by looking at the header at the top of your screen. If you notice you are not in the correct site, simply click on the site name to see a list of available sites. Click the correct site name from that list of sites, and you are switched to the selected site.

Sites tutorial active site.jpg Sites tutorial active site.jpg
Header showing the site in which you are working

Create a Homepage

Next, you'll want to create a homepage, which will act as the front door of your site, a main landing page that greets visitors. It will be blank to begin, and that’s OK—by creating it here, you can easily add it to a navigation object in a few steps.

To create a homepage:

  1. Make sure you are in the correct site (the one you just created) by looking at the site shown in the header (see image above). If you are not in the correct site, click the site name and select the correct site from the list of available sites.
  2. Click add next to the search field at the top of the page and click Homepage.
    Note
    When you open the add menu, you’ll see every content type that is available in your instance of Brightspot. This tutorial focuses on some of the most commonly used content types (like homepage, tag, and article), but don’t let that stop you from exploring. There are more than 100 different types that are available out of the box.
    Sites tutorial create homepage 1.jpg Sites tutorial create homepage 1.jpg
    Select Homepage from the list of available content types
  3. Enter an Internal Name for your homepage. This name is only used within Brightspot and is not visible to visitors to your site.

    Our site is going to be about working at Brightspot, so choose a name that reflects this topic.

  4. Click Publish.

    Your homepage is blank—for now—but we’re going to come back to build it out more later.

Create Sections and Tags

Up next in our preparations are sections and tags. These are also going to start blank, but eventually, these will act as landing pages—they are just more specific and more descriptive than your homepage.

For example, our sample site content is all about what it’s like to work at Brightspot; so the sections you will create are Culture, Benefits, and Hiring—those are three main topics or categories that will speak to what it’s like to work at Brightspot. You will use those sections in our navigation, as well as on the article content you publish later. Similarly, tags are landing page content, but they become even more specific in content than sections. Tags will also be added to the article content.

Note
The Starter Sections, Tags, and Articles document in the provided download folder includes content you can use to create your sections and tags. These sections and tags correlate to the provided articles you will create later in this tutorial.


To add the sections:

  1. Look in the header and confirm that you are still in the site you created earlier.
  2. Click add next to the search field at the top of the page and click Section.
  3. Enter Culture in the Display Name field. This name is visible to visitors to your site.
  4. Enter BSP_Culture in the Internal Name field. This name is only visible within Brightspot and is not seen by visitors to your site.
  5. Enter a short description regarding your Culture section in the Description field. This description is visible to your site visitors.
    Sites tutorial section creation.jpg Sites tutorial section creation.jpg
    Creating a section
  6. Click Save.

Repeat these steps to create two more sections: one for Benefits and one for Hiring.

To add the tags:

  1. Look in the header and confirm that you are still in the site you created earlier.
  2. Click add next to the search field at the top of the page and click Tags.
  3. Enter Collaboration in the Display Name field. This name is visible to visitors to your site.
  4. Enter BSP_Collaboration in the Internal Name field. This name is only visible within Brightspot and is not seen by visitors to your site.
  5. Enter a short description regarding your tag in the Description field. This description is visible to your site visitors.
    Sites tutorial creating tags.jpg Sites tutorial creating tags.jpg
    Creating a tag
  6. Click Save.

Repeat these steps to create five to seven more tags. Use the suggestions in the document Starter Sections, Tags, and Articles. Again, the sections and tags you create will be blank—but don’t worry. They’ll populate with content soon enough.

Create a Site Search Page

Once the sections and tags are complete, you’ll prepare a site search page. Site search is the landing page that allows visitors to your site to input keywords, search, and get results that can be sorted and filtered. Typically, a search page is visible in a site’s navigation, so you’ll add that in the next step as well.

To create a site search page:

  1. Look in the header and confirm that you are still in the site you created earlier.
  2. Click add next to the search field at the top of the page and click Site Search Page.
  3. Enter a Title for the site search page. This title is visible to the visitors of your site.
  4. Enter a Description for the site search page. This description is visible to the visitors of your site. By default, it appears near the top of the page, above the search results; however, a front-end designer can place the description in other locations on the page.
    Sites tutorial create a site search page.jpg Sites tutorial create a site search page.jpg
    Creating a site search page
  5. Click Save.
    Tip
    You can configure the results of the site search page using the Types field and the User-Display Filters fields. See Site search page for complete details on configuring your site search page.

Create a Navigation

Now that you’ve created your homepage, sections, tags, and site search page, you have everything you need to build a navigation. A navigation is essentially a group of links to the landing pages, and will be visible on the front end of your site (usually, but not always, in the header). In our case, you’ll be building a navigation that links to our homepage, the Culture, Benefits, and Hiring sections, and the site search page. This navigation will appear on every asset you create.

To create a navigation:

  1. Look in the header and confirm that you are still in the site you created earlier.
  2. Click add next to the search field at the top of the page and click Navigation.
  3. Enter the Internal Name. This is only visible within Brightspot and not seen by the visitors to your site.
  4. Expand Items, and select Simple Navigation Item.
  5. Click search in the Link field to open the content picker and locate the sections you created previously.

    This is your first time using the content picker. The content picker is the search panel that allows you to select assets in Brightspot. See Search filters for more information on filtering your search results.

    1. Set the Any Content Type filter to Section.
      Sites tutorial set content type in search.jpg Sites tutorial set content type in search.jpg
      Set results to only display sections
    2. Since you haven't published your sections yet, you need to set the results to only show us sections in the Draft status. To do that, expand the Status field and select Draft. If Published is also selected, click it to deselect it and only have assets that are in Draft status to be returned in the results.
      Sites tutorial set results to draft.jpg Sites tutorial set results to draft.jpg
      Set results to only show those with a Draft status
    3. Click anywhere in the search panel to close the Status list and display the results. Since you have only created three sections, those should be displayed in the results.
  6. Click the name of each of your sections to add them to the navigation.
    Sites tutorial add sections to navigation.jpg Sites tutorial add sections to navigation.jpg
    Add your sections to the navigation
  7. Close the content picker.
  8. Click Publish.

Now that the scaffolding of the site has been created, it’s time to return to Sites & Settings to configure a few defaults, in particular the logo, the navigation, and the behavior of landing pages.

To see the magic happen, you’ll need two tabs—open one tab with the CMS, and another tab open to your homepage. At the start, your homepage will be empty—but not for long.

Any easy way to open the second tab for your homepage is to simply click the link shown in the URLs widget. The default permalink for homepages is just /. Clicking / opens your homepage in a new tab. If your URLs widget doesn't show any URL (including the /), you can manually add one by clicking add_circle_outline Add URL and entering the desired URL for your homepage (such as Brightspot Homepage). Once you save or publish your homepage, the URL is active and you can click on it to open the homepage in another tab.

Sites tutorial URLs widget.jpg Sites tutorial URLs widget.jpg
URLs Widget

Add the Logo

To add the logo:

  1. Click menu > Admin > Sites & Settings.
  2. Select your newly created site, if you are not already on that site.
  3. Click Front End.
  4. Expand the Logos & Icons cluster.
  5. In the Logo field, click Select and then search.
  6. Scroll to the bottom of the content picker and click New Image Logo.
    Sites tutorial new image logo button.jpg Sites tutorial new image logo button.jpg
    New Image Logo button
  7. Enter Brightspot Logo in the Internal Name field.
  8. In the Image field, click searchto open the content picker.

    Since you haven't uploaded the actual logo image yet, you don't have an image available to select for the logo. You first need to upload the logo image in order to create the logo.

  9. Click New Image located near the bottom of the content picker.
    Sites tutorial new image for logo button.jpg Sites tutorial new image for logo button.jpg
    Upload new image
  10. Enter BSP_Logo in the Internal Name field.
  11. Make sure the File field is set to New Upload and click Choose.
    Sites tutorial new upload for logo.jpg Sites tutorial new upload for logo.jpg
    Choose file to upload
  12. Locate and select the Company-Logo.png file provided by the downloadable folder. This begins the upload.
  13. Click Save. Now the image asset has been created in Brightspot.
  14. Click Back in the upper left corner. This returns you to the content picker.
    Sites tutorial save image.jpg Sites tutorial save image.jpg
    Save the image and navigate back
  15. Click BSP_Logo in the content picker. This adds the image asset you just uploaded to the logo asset you are creating.
  16. Click Save. The logo asset now exists in Brightspot.
  17. Click Back in the upper left corner. This returns you to the content picker.
  18. Click Brightspot Logo. This sets the Logo field to the logo asset you just created.
    Sites tutorial set logo.jpg Sites tutorial set logo.jpg
    Set the logo for your site
  19. Click Save.
Note
In your second tab, refresh the homepage. You should now see your logo appear. If you are not seeing the preview of your homepage, click visibility to open the preview pane.

Sites tutorial logo on homepage.jpg Sites tutorial logo on homepage.jpg
Logo showing on homepage

Add the Navigation

To add the navigation:

  1. Click menu > Admin > Sites & Settings.
  2. Select your newly created site, if you are not already on that site.
  3. Click Front End.
  4. Expand the Layout cluster.
  5. In the Navigation field, click Select and then search.
    Sites tutorial select navigation.jpg Sites tutorial select navigation.jpg
    Search for your navigation
  6. Locate, and select, the navigation you created earlier.
  7. Click Save.
Note
In your second tab, refresh the homepage. You should now see your navigation appear.

Sites tutorial site search shown.jpg Sites tutorial site search shown.jpg
Navigation displayed on homepage

Add the Site Search Page

To add the site search page:

  1. Staying in the Layout cluster you used for the navigation, locate the Search Page field.
  2. Expand the drop-down and click search.
  3. From the content picker, locate site search page you created previously.
  4. Click Save.
Note
In your second tab, refresh the homepage. You should now see your site search appear.

Sites tutorials site search on homepage.jpg Sites tutorials site search on homepage.jpg
Site search shown on homepage

Add a Type-Specific Default Module for Sections

Here, you will set up a default module that will automatically display content belonging to a given section.

First, what is a module? Modules can be thought of as smaller, self-contained vessels of content. They can be specific to a certain asset, or shared across many assets within a site. Modules can be simple lists of links to other content, or galleries of images, etc. Basically, their only limit is your creativity. Brightspot comes with a number of pre-built modules that meet common publishing use cases, allowing you to create and curate content across your site. For example, the image below shows a promo module (highlighted in a red box) found on our own Brightspot Intranet page.

Sites tutorial promo module example.jpg Sites tutorial promo module example.jpg
Promo module highlighted on the Brightspot Intranet page
Note
This configuration places a module onto every section page in your site, and it appears before any other module that is placed on any section.


To add a type-specific default module for your sections:

  1. Click menu > Admin > Sites & Settings.
  2. Select your newly created site, if you are not already on that site.
  3. Click Front End.
  4. Open the Type Specific Overrides cluster.
  5. Click add_circle_outline Add Type Specific Landing Page Elements.
  6. Expand Types and select Section.
  7. Expand Content and select Add Before.
  8. Click add_circle_outline Add Module.
    Sites tutorials type specific overrides.jpg Sites tutorials type specific overrides.jpg
    Setting the type specific overrides
  9. Select List Module and then select any of the available list modules. (We recommend Standard List A, Standard List B, or Standard List C, as these have associated images.)
    Sites tutorial select list module.jpg Sites tutorial select list module.jpg
    Select the desired list module
  10. Configure the list module.
    1. Expand Items and select Dynamic. (We will go over the differences between these list modules in an upcoming step.)
    2. Expand Types and select Article.
    3. Expand Filtering Rules and select Sections.
    4. Expand Include Current Section, and select Yes.
  11. Click Save.

You're finished with the scaffolding and site setup—now it’s time to really zero in on the bread and butter work of Brightspot, which is asset creation itself.

Using the provided folder of assets, publish approximately 20 articles following the steps below.

Upload Images

Before publishing anything more, we recommend uploading all of the provided images. Brightspot supports bulk upload, meaning that you can drag and drop the provided images onto the dashboard, and upload them as a single batch. This will save you from repeated upload steps as you create your articles, because the images will already be waiting for you in Brightspot when you need them.

To upload the images:

  1. From your dashboard, locate the Upload widget.
    Sites tutorial upload widget.jpg Sites tutorial upload widget.jpg
    Upload widget on the dashboard
  2. You can either:
    • Drag and drop the images into the widget.
    • Click Select to locate the folder in which they are stored, and select the images for upload from there.
  3. Set the Type field to Image.
    Sites tutorial upload files.jpg Sites tutorial upload files.jpg
    Select Image to upload image files
  4. Click Upload.

Publish Articles

Once your images have uploaded, you’re ready to move on to publishing articles. Once again, the file Starter Sections, Tags, and Articles has all of the text to create your articles. It is suggested you use that text for this tutorial.

To publish the articles:

  1. Click add next to the search field at the top of the page and click Article.
  2. Using the Starter Sections, Tags, and Articles file you downloaded for this tutorial, complete the following fields by copy/pasting the text into the correct fields.
    1. Headline: Enter the provided headline for the article. This is the bold text next to the number for the article.
    2. Subheadline: Enter the provided subheadline.
      Sites tutorial create article 1.jpg