Example: Developing a site banner in a workspace

This example shows you how to develop and test a new site banner in a workspace in the Frosmo Control Panel. The example will not disrupt your live site content, meaning your visitors will not see the site banner you create.

Figure: Site banner

To create the site banner:

1. Create and enter the workspace for developing the site banner.

2. Create the site banner placement in the workspace.

3. Create the site banner modification in the workspace.

4. Preview the site banner using preview mode.

Creating and entering the site banner workspace

To create and enter the workspace for the site banner:

1. In the Frosmo Control Panel, in the sidebar, select More > Workspaces.

2. Click Create workspace.

3. Enter "Site Banner" as the workspace name, and click Create.

   

4. In the workspaces list, click Site Banner to enter the workspace.

You have created and entered the workspace. You can now create the site banner in the workspace, starting with creating the site banner placement.

Creating the site banner placement in the workspace

To create the site banner placement in the workspace:

1. In the Control Panel, in the workspace, click the quick menu button for Placements, and select Create placement.

   

2. Define the following settings:

   • Name: Enter "Site Banner".

   • Page type: Select Other.

   • Target element: Select CSS selector, and enter "body" as the selector name.

   • Display method: Select Before content.

   The target element and display method together place the modification as the first piece of content within the body element.

   

   For more information about the settings, see Creating and editing a placement.

3. Click Save.

You have created the site banner placement in the workspace. You can now use the placement in the site banner modification, which you create next.

Creating the site banner modification in the workspace

To create the site banner modification in the workspace:

1. In the Control Panel, in the workspace, click the quick menu button for Modifications, and select Create modification.

   

2. Enter "Site Banner" as the modification name, select Personalization as the modification case, select In-page as the content type of the modification, and click Create.

   

   You could also select another case, but since this modification needs only the one variation, Personalization is the natural choice here.

   For more information about the settings, see Creating and editing a modification.

3. Select the placement for the modification:

   1. In the Basic settings view, in the Placement section, click Select placement.

      

   2. Select the placement you created for the hero banner.

      

   3. Click Save.

   For more information about the settings, see Defining the placement for a modification.

4. Define the content for the modification:

   1. In the Basic settings view, in the Content section, click Create variation.

      

   2. In the variation settings, for Content source, select Custom.

   3. In the Content field, enter the following code:

      <div class="frosmo">
          <p>My Banner</p>
      </div>
      
      <style>
          div.frosmo {
              background: #ffa415;
              text-align: center;
          }
      
          div.frosmo > p {
              color: #ffffff;
              display: inline-block;
              font-family: "Source Sans Pro", sans-serif;
              font-size: 20px;
              line-height: normal;
              margin: 20px;
              text-transform: uppercase;
          }
      </style>

   4. At the bottom of the view, click Save.

   5. Back in the Basic settings view, in the Content section, click the quick menu button for the variation, and select Activate.

      

   6. If you want to disable the automatically created comparison group for the modification, click the quick menu button for the group, and select Deactivate.

   For more information about the settings, see Defining the content for a modification.

5. Activate the modification:

   1. At the bottom of the Basic settings view, click Activate.

   2. To confirm, click Activate.

6. At the bottom of the Basic settings view, click Close. The Control Panel returns to the workspace.

You have created and activated the site banner modification in the workspace. You can now preview the site banner.

Previewing the site banner

To preview the site banner:

1. In the Control Panel, in the workspace, in the Actions menu, select Preview workspace.

   

   The site opens in preview mode. If preview mode fails to activate, try one of the alternative solutions for activating it.

2. Preview the site banner modification. The following figure (click to enlarge) shows the workspace indicator with the workspace ID.

   

3. When you're done, deactivate preview mode by clicking ✕ on the workspace indicator, and reload the page. If preview mode fails to deactivate, try one of the alternative solutions for deactivating it.

You have previewed the site banner, and you're done with this example! If this was a modification intended for production, you would next publish the workspace.