Pages

Learn how to create and edit a placement, and define the settings for the placement.

Quick start

To get started, watch the following tutorial on how to create a simple placement for a modification.

For a hands-on example on how to create a simple banner placement, see Creating your first placement.

Creating a placement

You can also create a placement as part of the modification workflow. For more information, see the Defining the placement for a modification.

To create a placement:

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

  4. When you're done, click Save.

Editing a placement

To edit a placement:

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

You can also check in which modifications the placement is currently used.

Placement settings

The following table describes the settings you can define for a placement in the Control Panel.

Table: Placement settings

SettingDescriptionRole
Name

Enter a name for the placement.

Tip

To easily identify your placements, use a consistent naming syntax that produces descriptive names. For example, Frosmo uses the following syntax:

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

The first part identifies the page or pages for which the placement is valid. If the placement is valid for multiple pages, the Frosmo convention is to name the first part "Multipage".

For example:

  • Home Page - Topmost Banner - Slide Switching
  • Multipage - Before Body Content
Required
DescriptionEnter a description for the placement. You can use the description to, for example, explain how and where the placement is placed and why.Optional
Target element

Define the web page element or elements in relation to which the placement and thereby the modification content are to be placed in the page code.

To define the element:

  1. Select the type of selector you want to use for identifying the element(s). You can use either CSS selectors or, if your site has the jQuery support module enabled, jQuery selectors.
  2. Enter the selector(s) for the element(s). The maximum length of the selector string is 512 characters.

Here are a few example CSS selectors:

  • body (HTML document body)
  • div.input (all <div> elements with the class input)
  • #content (element with the ID content)
  • .section (all elements with the class section)
  • .section > p (any <p> element that is the direct child of an element with the class section)
  • em, strong (all <em> and <strong> elements)
Required
Display method

Select how the placement and thereby the modification content are placed in relation to the target element in the page code:

  • Replace content

    The modification content replaces the original content of the target element.

  • Replace element

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

    When using this display method, the target element is deleted. Use this method with caution.

  • Hide & replace original

    The target element is first hidden, its original content is then replaced by the modification content, and finally the target element is displayed again.

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

    Be careful when using this display method with a trigger, since the trigger is only evaluated after the target element is hidden. This may cause visitors to miss important content.

    This display method only works when the Frosmo scripts are placed before the target element in the page code.

    You cannot use this display method with a jQuery selector.

  • Before element

    The modification content is placed immediately before the target element.

  • After element

    The modification content is placed immediately after the target element.

  • Before content

    The modification content is placed inside the target element, before the content of the target element.

  • After content

    The modification content is placed inside the target element, after the content of the target element.

Required
URL matcher

If you do not want to add the placement and thereby the modification to every page of your site, create one or more URL rules that together resolve into the set of pages where you want to use the placement. A URL rule defines a comparison between a part of the URL and a string value that you expect that part to match. For example, you might check whether the protocol part of the URL matches "http" or "https".

If you define no URL rules, the placement is valid for all pages of your site (unless you select a trigger for the placement that only fires on specific URLs). Any modification that uses the placement is therefore potentially used on every page of the site.

To create a new rule:

  1. Click Add new rule.
  2. Select the part of the URL to use for the match. For more information about the options, see the descriptions below.
  3. Select the type of the match.
  4. Enter the string to match.

You have the following options for selecting the part of the URL:

  • URL

    Match the full, absolute URL of the page.

  • protocol

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

  • domain

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

  • path

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

  • anchor

    Match the anchor part of the URL. The anchor is always appended to the URL with a hash (#). For example, in http://www.example.com/index.html#about, the anchor is about.

  • query selector

    Match a query parameter value in the query string part of the URL. Enter the name of the parameter whose value you want to match, select the type of the match, and enter the parameter value to match.

    Matching a query parameter value

    In the URL, the query string is preceded by a question mark (?) and consists of one or more query parameters. A parameter consists of a name and a value, which are separated by an equals sign (=). Multiple parameters are separated by an ampersand (&) or a semicolon (;). For example, http://www.example.com/index.html?preview=enable contains a single parameter with the name preview and the value enable, while http://www.example.com/index.html?preview=enable&user=12345 contains two parameters, preview=enable and user=12345.

For more information about the URL syntax and its components, see Wikipedia.

If you create multiple rules, select how you want to combine the rules:

  • AND

    Only match URLs that fulfill all the defined rules.

  • OR

    Match URLs that fulfill any of the defined rules.

You can create as many rules as you need.

Optional
Trigger

If you want to control when the placement and thereby the modification content get added to a page, select a trigger for the placement. With a trigger, the placement is added to the page only when the trigger fires.

You can only select a single trigger, but you can freely change the selected trigger, and you can remove the trigger if you no longer need it.

Be careful when using a trigger with the Hide & replace original display method, since the trigger is only evaluated after the target element is hidden. This may cause visitors to miss important content.

If you define both a URL matcher and a trigger, the placement is added only to pages that match the URL rules and only when the trigger gets fired. For example, if you define a URL rule that matches the path contact and a trigger that fires once the DOM is ready, the placement is added to the page only if the page URL contains the path contact and only after the browser has finished building the DOM tree for the page.

If you define both a URL matcher and a trigger, make sure their URL rules do not conflict. Having conflicting URL rules can easily lead to a situation where the modification content is never added to a page.

Selecting a trigger

To select a trigger:

  1. Click Select trigger.
  2. Select an existing trigger, or create and select a new trigger by clicking Create trigger. For instructions on how to create a trigger, see Creating and editing a trigger.

    Attaching a trigger to a placement

  3. At the bottom of the view, click Select.

Changing the trigger

To change the selected trigger:

  1. Click the trigger name.

    Changing the attached trigger for a placement

  2. Select another existing trigger, or create and select a new trigger by clicking Create trigger. For instructions on how to create a trigger, see Creating and editing a trigger.

    Changing the attached trigger for a placement

  3. At the bottom of the view, click Select.

Removing the trigger

To remove the selected trigger:

  1. Click the trigger name.

    Removing the attached trigger from a placement

  2. In the Selected trigger section, click X for the trigger.

    Removing the attached trigger from a placement

  3. At the bottom of the view, click Select.
Optional
Custom renderer

Enter the name (without the namespace) of the custom renderer function that you want to use for this placement. You can use a custom renderer to change default placement functionality or add new functionality.

The maximum length of the function name is 64 characters.

Only Frosmo customer teams can create custom renderers. For more information, contact Frosmo support.

Optional
CSS classes

Enter the names of the CSS classes that you want to use to style the placement and thereby the modification content. If you use multiple classes, separate the names by spaces.

The classes must be defined in the site source code or in the modification content.

The maximum length of the string of class names is 256 characters.

Example: Single class
section
Example: Multiple classes
section alert frosmo

The class names are added to the class attribute of the placement <div> element.

Optional
CSS code

Enter the inline CSS code that you want to use to style the placement and thereby the modification content.

The maximum length of the code is 255 characters.

Example
color: orange; font-size: 2em; margin-left: 20px;

The code is added to the style attribute of the placement <div> element.

Optional
Preview URL

Enter the absolute URL of a page where you can preview modifications assigned to the placement.

If you've defined URL rules for the placement, the preview URL must match those rules, meaning the placement must be valid for the page designated by the preview URL.

The Control Panel uses the preview URL for launching variation previews from the modification UI.

If you want to use the variation preview function, you must define a preview URL for the placement used by the modification.

If the placement is valid only for a single page, use the URL of that page as the preview URL.

Optional

Defining the placement settings

Figure: Defining the placement settings (click to enlarge)

  • No labels