The OSM Editor allows you to create and edit templates for Mobile web. You can toggle between mobile and desktop on the editor, and create perfect On-site messages to maximize your engagement and enhance the user experience.
To create an on-site message for mobile web, select Mobile Web as the target platform on the first step of the campaign creation process.
Configure the rest of the fields and select a template on the second step of the campaign creation process.
Editing Templates in Mobile View
To edit a template in mobile view:
- Click on the desktop icon in the bottom left-hand corner of the editor.
- This will open a list with Desktop, Tablet, and Mobile, and you can toggle between the three to see how the template would look on different devices.
- To edit your templates for mobile web, click on Mobile to open mobile view.
- You can now edit your template.
info |
Information You can not add elements in mobile view. You can only style, or hide the elements that are already present on the screen. |
Adding Elements
To add an element for Mobile Web templates:
- Go to the Desktop View.
- Add an element to the desktop view by clicking on the + icon on the top left-hand side of the screen.
- After adding the element, click on it to open the edit bar. Click on the Settings icon here and click on Styling.
- Click on Advanced in Styling and disable the Show on Desktop toggle.
- This will hide the element in Desktop view, but it will still be added in Mobile view.
Styling Elements in Mobile View
- Click on the element you want to edit in mobile view to open the styling options for it.
- The edit bar contains four quick customization options.
- Hide: Clicking on the hide button will hide the element in Mobile view.
- Text: The text button opens up text editing options such as size, typography, weight, and more.
- Align: The align button will align the element to the right, left, or middle of the template.
- Settings: The settings button opens up a menu that allows you to add some gap above or below the new element. You can also change the HTML tag for the element.
- Hide: Clicking on the hide button will hide the element in Mobile view.
- The Styling and Effects tab opens up on the right-hand side of the editor.
- Styling: You can use Padding and Margin here to modify the position of the element on the template.
- Effects: You can apply short animation effects to the element. These effects can be modified further for their time length and delay.
- Styling: You can use Padding and Margin here to modify the position of the element on the template.