Pages

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.

Site banner

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, select Workspaces > Overview.
  2. Click Create workspace.
  3. Enter "Site Banner" as the workspace name, and click Create.

    Creating the site banner workspace

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

Creating the site banner placement in the workspace

To create the site banner placement in the workspace:

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

    Creating the site banner placement in the workspace

  2. Define the following settings:

    • Name: Enter "Site Banner".
    • 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.

  3. Click Save.

Creating the site banner modification in the workspace

To create the site banner modification in the workspace:

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

    Creating the site banner modification in the workspace

  2. Enter "Site Banner" as the modification name, select Basic as the modification type, deselect Enable comparison group, and click Create.

    Creating the site banner modification in the workspace

    The comparison group is a useful feature for production modifications, so do not disable it by default. Here, the comparison group is disabled to keep the example as simple as possible.

  3. In the modifications list, click Site Banner to open the modification settings.
  4. Create the modification content:

    1. Select Content.
    2. Enter the following modification content for variation 1.

      <div class="frosmo">
          <p>My Banner</p>
      </div>
      
      <style>
          div.frosmo {
              background: #ffa4a15;
              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>
    3. Click Activate for variation 1.
    4. Click Save all.

    Creating the site banner modification in the workspace

  5. Define the display options for the modification:

    1. Select Display Options.
    2. Click Select placement.
    3. Select the placement you created above, and click Select.
    4. Click Save.

  6. Click Activate for the modification.

    Creating the site banner modification in the workspace

  7. To return to the workspace, click the workspace ID.

    Creating the site banner modification in the workspace

You have created the site banner modification. For more information about modification settings and how to manage modifications, see Creating modifications.

Previewing the site banner

To preview the site banner:

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

    Previewing the site banner

    The workspace preview mode page opens. Preview mode is now active.

  2. On the preview mode page, click the site link.

    Previewing the site banner

    If preview mode fails to activate for your site, see the alternative activation solutions in Previewing a workspace.

  3. Preview the site banner modification.

    Previewing the site banner

  4. When you're done, deactivate preview mode by opening the preview mode page and clicking Deactivate. If preview mode fails to deactivate for your site, see the alternative deactivation solutions in Previewing a workspace.

You have finished the site banner modification, and you've completed this example. If this was a modification intended for production, you would next publish the workspace.

  • No labels