Pages

This document describes the basic process of creating a placement and defining the placement settings.

To get started, watch the following tutorial to learn how to create a 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.

After creating the placement, you have several options for managing it.

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

Placement settings

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 convention. Frosmo uses the following convention:

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

The first part identifies the page or pages where 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 - Before body content
Required
DescriptionEnter a description for the placement. You can use the description to provide further details on where and how the placement is placed and why.Optional
Target element

Define the web page element or elements in relation to which the modification content is 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 256 or fewer characters.

Here are a few example 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 right before the target element.

  • After element

    The modification content is placed right 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 used on all pages on your site (unless you attach a trigger to the placement that only fires on specific URLs).

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 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 in the URL with a # character. For example, in http://www.example.com/index.html#about, the anchor is about.

  • query selector

    Match 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.

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 shown.

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 triggers.

    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 triggers.

    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.

    Changing the attached trigger for 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've created for this placement. You can use custom renderers 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 your Frosmo representative.

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

Figure: Defining the placement settings

  • No labels