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.

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. Make sure the name identifies the placement's location on the page.

Tip

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

<Page identifier> - <Placement position on 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 placed in the page code.

To define the element:

  1. Select the type of selector you want to use for identifying the element. You can use either a CSS selector or, if your site has the jQuery support module enabled, a jQuery selector.
  2. Enter the selector for the element. Limit the selector to 512 or fewer characters.

Here are a few example CSS selectors:

  • body (HTML document body)
  • div.input (any <div> element with the class input)
  • #content (element with the ID content)
  • .section (any element with the class section)
  • .section > p (any <p> element that is the direct child of an element with the class section)
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 on 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 attach a trigger to the placement that only fires on specific URLs). Any modification that uses the placement is therefore also potentially rendered 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. You provide the name of the query parameter and the value you want that parameter to have.

    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. By comparison, 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

You can attach a trigger to the placement to control when the placement and thereby the modification content are added to a page. With a trigger, the placement is added to the page only when the trigger fires.

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 rendered on any page.

To attach 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.

To change the attached 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.

To remove the attached 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.

Limit the function name to 64 or fewer 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.

Limit the string of class names to 256 or fewer 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.

Limit the code to 255 or fewer 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

  • No labels