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.

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.

   

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.
   

   

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.

   

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.

     

   • Theme—Under the Theme field, click Shared Theme, then select the Default Theme you added in the previous step.

   

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.
   

   

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.

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.

   

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.

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.
   

   

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.
   

   

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.
   

   

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.
      

      

   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.
      

      

   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.
   

   

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.

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.
   

   

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.
   

   

10. Enter BSP_Logo in the Internal Name field.
11. Make sure the File field is set to New Upload and click Choose.
    

    

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.
    

    

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.
    

    

19. Click Save.

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.
   

   

6. Locate, and select, the navigation you created earlier.
7. Click Save.

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.

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.

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.
   

   

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.)
   

   

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.
   

   

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.
   

   

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.
      

      

   3. Lead: Select Image from the dropdown, then select any of the previously uploaded images.
      

      

   4. Body: Enter the provided body copy.
      

      

   5. Section: Click search to open the content picker and select the recommended section for the article.
   6. Tag: Click search to open the content picker and select the recommended tag for the article.
      

      

      Note

      As you add text and images into your articles, you’ll see preview update. Preview will also include the site header, with a logo, navigation, and a search page—because you built the navigation in a previous step.
3. Click Publish.
4. Repeat these steps for the remaining assets provided until you have added at least a handful.

At this point, you’ve become a professional at publishing images and articles in Brightspot, so let’s move on to working with landing pages and modules.

Sections and Type-Specific Defaults

Let’s start with our section pages. Using Brightspot search, locate the Culture section page and take a look at its preview. Assuming you have published the provided assets with the suggested sections and tags, this section is already populated with content.

The reason why this section already displays content is because of the Type-Specific defaults we set on sections in Step 4. That setting tells all sections to display any content that is associated with it (the Current Section toggle). Another way to know that this section's content is coming from a Type-Specific setting is by examining the Content area (located near the bottom of the page), which will indicate to an editor that it is inheriting content from the site—with a link that will allow you to refine that setting if you need to.

The beauty of the Type-Specific setting is that you could finish here—if you are happy with the default set of results on your section pages (which are appearing dynamically because of the Section setting on the articles you created), you don’t have to do anything else. Even better, the sections will continue to update with new content that belongs to it.

That’s not the point of this tutorial, though, so let’s move on to the Homepage.

Homepage: Add a Promo Module

Now let's add a promo module to your homepage. See Promo module to learn more about using Promo modules in Brightspot.

To add a promo module:

1. From search, locate your homepage.
   
   Tip

   If you set the Any Type filter to Homepage, the search results only show the existing homepages in the site.
2. In the Content area, click add_circle_outline Add Module.
   This opens the module picker, which displays all of the available modules and styles.
3. Select Promo Module, and then select the Promo Module B option.
   

   

4. Complete the following fields for your promo module:
   
   1. Item: Select Internal.
   2. Item (nested): Click search to locate one of your articles that you would like to promote.
   3. Title: This field will autopopulate with the headline of the article you’ve selected; if you like, you can modify it within this field. It will not affect the headline of the article itself.
      

      

   4. Description: Same as above; this field will autopopulate with the Subheadline from the article asset itself, but you can write alternative copy here if you would like.
   5. Image Override: You will see the default image, which populates from the article itself. Click search to locate and select a different image.
   6. Call to Action Button Text: Enter the text that will act as your action button. This text is seen by your visitors.
      

      

5. Click the Styles tab at the top of the Promo Module section, and expand the Page Promo Module cluster.
   

   

6. Toggle off the Hide Category field.
   
   Tip

   You can also experiment with additional style settings here, such as exposing a byline, animating the module on scroll, or adjusting text size and alignment.
7. Click Publish.

Awesome! You've published a promo module to your homepage!

Add a List Module

Now that you’ve mastered the promo module, let’s move on to the list module—if you have a grasp of using these two modules, you’re well on your way to being an expert module publisher.

To add a list module:

1. Remaining on your homepage, in the Content area, click add_circle_outline Add Module.

   This opens the module picker, which displays all of the available modules and styles in this environment.
   

2. Select a List Module style.
3. Complete the following fields for your promo module:
   
   1. Title: Enter a title that will display above the list module, such as Latest Benefits News. You can also leave this field blank.
   2. Description: Enter a description that will display above the list module. You can also leave this field blank.

4. Now let's set the items for the list. Expand Items.

   This list module supports multiple modes—these are Basic, Advanced, and Dynamic. Let’s experiment with all three.
   

   1. First, let's try Basic. When using Basic, the items included in the list are displayed just as they are in their original asset. For example, this means that the headline, body, image, etc. display in the list the same way they do in the article. You cannot modify the display when using Basic.
      
      1. Click add_circle_outline Add Item.

      2. Click search and use the content picker to locate three articles you created earlier that relate to the Title you gave this module. For instance, if you used Latest Benefits News for your Title, locate three articles you created and associated to the BSP_Benefits section.

         Note that preview will update to display the default title and description from the article assets themselves.

         

   2. Next, let’s try Advanced. Using Advanced pulls in all of the information just as it is on the original asset, however you can modify it if needed.
      

      1. Switch the drop-down from Basic to Advanced, and you’ll see the three articles you added in Basic are still here, but they’ve been converted to promo modules.

         Notice that the Title, Description, and Image fields are autopopulated within those assets' default promos; however, the Advanced list gives you the ability to modify these defaults as much as you’d like.
         

      2. Choose one of the article promos and modify the image by clicking search in the Image Override field and selecting another one of your images.
         

         

   3. Finally, let’s use Dynamic mode. Dynamic mode uses a query to populate the list with assets that match this query.
      
      1. Switch the drop-down from Advanced to Dynamic, and you’ll see a query builder.
      2. Use the query builder to refine the set of rules to populate the list.
         
         1. Set Types to Article.
         2. In the Filtering Rules dropdown, select Sections.
         3. Click add_circle_outline Add Item.
         4. Click search to open the content picker and select your Benefits section.
            

            

5. Click Styles and then expand the Page List Styles cluster.
   

   

   1. Locate the Background Category field, and select a dark color. Remember to click OK after you select your color.

   2. Toggle on Change Primary Text Color to Primary Inverse Text Color to change the primary text color to the inverse color.

      Again, you can also experiment with additional style settings here as much as you’d like.

      

6. Click Publish.

Congratulations! You've built a list module! Once again, your list module may look different than the image below based on the style you chose and the assets that are featured.

Convert an Embedded Module to a Shared Module

Your homepage now includes two modules. What you’ve created so far are embedded modules; this means they are only available in the context of this particular page. Because Brightspot was built to work in a modular way—enabling content reuse—you can turn any embedded module into a shared module, which allows you to share these modules to various pages and assets, saving you time.

To convert an embedded module into a shared module:

1. Under Content, locate your promo module.
2. Click the more_horiz on the same row as your promo module.
3. Click Convert to Shared and your module will convert into a shared module.
   

   

4. Repeat those steps to convert your list module into a shared list module.
5. Click Publish.

You now have all the basics that you need to further flesh out your homepage, as well as your remaining sections and tags. This is where you get to freestyle—play around with different promos and lists, as well as making them shared or embedded.

Feel free to get creative, and branch out into other modules, as well as to experiment with the various available styles.