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:
- In the Frosmo Control Panel, select Modifications > Placements.
- Click Create placement.
- 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.
- Define optional advanced options, such as triggers and custom CSS code to override page defaults.
- 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:
Setting | Description |
---|---|
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:
|
Description | Optionally, you can enter a description for the placement to further remind you where the modification is shown. |
Target element | To 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:
|
URL matcher | To define the pages on which the modification is shown, create URL rules. To create a URL rule:
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:
Option | Description |
---|---|
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:
To change the trigger:
To remove the 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 text | Define 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:
- In the Frosmo Control Panel, select Modifications > Placements.
- Click Create placement.
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.
Click Save.
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:
- In the Frosmo Control Panel, select Modifications > Placements.
- In the placements list, find the placement you want to modify, and click Edit.
- Edit the placement settings.
- When you're done, click Save.
Removing a placement
To remove a placement:
- In the Frosmo Control Panel, select Modifications > Placements.
- In the placements list, find the placement you want to remove, and click Remove.
- Click Remove.