Pages

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

A placement determines where on the web page a modification is placed. In the page code, the modification is always placed in relation to a specific target element. How and where the modification is actually displayed on a web page depends on the page layout.

Creating placements

To create a placement:

  1. In the Frosmo Control Panel, select Modifications > Placements.
  2. Click Create placement.
  3. Define the basic settings, such as pages and DOM elements to which the placement applies, and how the placement relates to the original page content.
  4. Define optional advanced options, such as triggers and custom CSS code to override page defaults.
  5. When you're done, click Save.

To try out the process with an example, create a simple banner placement. After creating the placement, you can manage it.

Basic settings

Define the following basic settings for a placement:

SettingDescription
Name

Enter a name for the placement. Make sure the name indicates the placement's location on the page.

Tip

To easily identify your placements later, use a consistent naming convention. Frosmo uses the following naming convention:

<Page identifier> - <Placement position on page> - <Extra identifier, if any>

The first part identifies the page on which the placement is active. If the placement is active on several pages, the Frosmo convention is to name the first part "Multipage".

For example:

  • Home page - topmost banner - slide switching
  • Multipage - after body content
DescriptionOptionally, you can enter a description for the placement to further remind you where the modification is shown.
Target elementTo define the target elements, select the selector type and enter the name of the selector. CSS selector is the default selector type. If your site has jQuery enabled, you can also use jQuery selectors.
Display method

Define how the modification content is placed in relation to the target element in the page code:

  • Replace content

    The modification content replaces the original content of the target element. This is the most simple option.

  • Replace element

    The modification content completely replaces the original element, not just its content.

    When using this option, the original element is deleted. Use this method with caution.

  • Hide & replace original

    The target element is hidden and the element content is then replaced by the modification content once it has been loaded. This option only works when the Frosmo script is placed in the page code before the target element to be hidden.

    The target element is initially hidden even if there are no modifications using this placement. This can cause a slight lag in displaying the content when the page is loaded.

  • Before element

    The modification content is placed right before the target element.

  • After element

    The modification content is placed right after the target element.

  • Before content

    The modification is placed inside the indicated element, and its content appears before the original content of the element (not replacing it).

  • After content

    The modification is placed inside the indicated element, and its content appears after the original content of the element (not replacing it).

URL matcher

To define the pages on which the modification is shown, create URL rules.

To create a URL rule:

  1. Select the portion of the URL to use for the match. You can select from the following options:

    • Complete URL

      The absolute URL of the current page. For example, http://www.example.com/index.html.

    • Protocol

      The protocol used in the URL. The possible values are http and https.

    • Domain

      The domain name part of the URL. For example, in http://www.example.com/index.html, the domain is www.example.com.

    • Path

      The URL path after the domain. For example, in http://www.example.com/index.html, the path is /index.html.

    • Anchor

      The anchor part of the URL. The anchor is always appended in the URL with a "#" character. For example, in http://www.example.com/index.html#about, the anchor is about.

    • Query parameter

      The query string part of the URL. The query string always starts with the "?" character, and consists of a key and value separated by the "=" character. For example, in http://www.example.com/index.html?search=word, the key is search and the value is word.

  2. Enter the string to match.
  3. Select the type of match. If you create multiple rules, select how you want to apply the rules:
    • Match all: Only match URLs that fulfill all the defined rules.
    • Match any: Match URLs that fulfill any of the defined rules.

To add further rules, click Add rule, and specify the rule settings. You can add as many rules as you need.

If no URL matchers are defined, the placement is valid for all URLs on your site.

Advanced options

You can define the following advanced options to further configure the placement:

OptionDescription
Trigger

You can user triggers to determine when modifications are displayed.

To create a trigger, in the Frosmo Control Panel, select Triggers > Create trigger.

Be extremely careful when using both triggers and URL matchers simultaneously in placement settings. Having conflicting URL rules in a trigger and a URL matcher can easily lead to a situation in which the modification is never shown.

To select a trigger:

  1. Click Select trigger.
  2. Click Select for the trigger you want to use. You can only select one trigger for a placement.

To change the trigger:

  1. Click the trigger name.
  2. Click Select for the trigger you want to use instead.

To remove the trigger:

  1. Click the trigger name.
  2. Click Remove for the selected trigger.
Custom renderer

You can use custom renderer functions to change the default placement functionality or add new functionality.

The Custom renderer option is only visible to Frosmo users. For more information about custom functions, contact your Frosmo representative.

CSS classes

Define one or more CSS classes for the parent element in the modification content or, if there is no single parent element, the element that contains the modification content.

If you specify an existing CSS class, the element inherits its properties. If you specify a new CSS class, you need to define its properties in the modification.

CSS textDefine inline CSS code for the parent element in the modification content or, if there is no single parent element, the element that contains the modification content.

Creating a banner placement

This example shows you how to create a simple banner placement for replacing an image on a website. The placement is for a small logo banner showing the Frosmo logo on all pages.

To create the placement:

  1. In the Frosmo Control Panel, select Modifications > Placements.
  2. Click Create placement.

  3. Define the following settings:

    • Name: Enter a descriptive name, such as "All pages - logo banner".
    • Target element: As the target element, select CSS selector, and enter the value "#header_logo". This means that the placement is used for all elements on the page with the ID "header_logo".
    • Display method: Select Replace element.

  4. Click Save.

    Creating a banner placement

You have now created a placement. For more information about how to use the placement for a modification, see Working with modifications.

Managing placements

The Frosmo Control Panel provides the following ways to manage placements:

Editing a placement

To edit an existing placement:

  1. In the Frosmo Control Panel, select Modifications > Placements.
  2. In the placements list, find the placement you want to modify, and click Edit.
  3. Edit the placement settings.
  4. When you're done, click Save.

Removing a placement

To remove a placement:

  1. In the Frosmo Control Panel, select Modifications > Placements.
  2. In the placements list, find the placement you want to remove, and click Remove.
  3. Click Remove.