Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 16.0

...

  1. In the Frosmo Control Panel, in the sidebar, select More > 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.

...

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.

    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.

    Creating the site banner placement in the workspace

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

  3. Click Save.

...

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.

    Creating the site banner modification in the workspace

  2. Enter "Site Banner" as the modification name, select Personalization as the modification case, and click Create.

    Creating the site banner modification in the workspace

    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.

      Creating the site banner modification in the workspace

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

      Creating the site banner modification in the workspace

    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 the variation name.

      Creating the site banner modification in the workspace

    2. In the Variation settings section, click Select type.
    3. Select Custom content, and click Select.

      Creating the site banner modification in the workspace

    4. In the Content section, enter the following code as the content of the variation.

      Code Block
      languagexml
      themeRDark
      <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>


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

      Creating the site banner modification in the workspace

    7. If you want to disable the 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.

...

To preview the site banner:

  1. In the Control Panel, 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. The following figure (click to enlarge) shows the preview indicator with the workspace ID.

    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.

...