Editing OSM Templates in Mobile Web

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: 

1. Click on the desktop icon in the bottom left-hand corner of the editor.
   
   
   
   
2. 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.
   
   
3. To edit your templates for mobile web, click on Mobile to open mobile view. 
   
   
4. You can now edit your template.
   
   

Adding Elements

To add an element for Mobile Web templates:

1. Go to the Desktop View.
   
   
2. Add an element to the desktop view by clicking on the + icon on the top left-hand side of the screen.
   
   
   
   
3. After adding the element, click on it to open the edit bar. Click on the Settings icon here and click on Styling.
   
   
   
   
   
4. Click on Advanced in Styling and disable the Show on Desktop toggle. 
   
   
   
   
   
5. This will hide the element in Desktop view, but it will still be added in Mobile view. 
   
   

Styling Elements in Mobile View

1. Click on the element you want to edit in mobile view to open the styling options for it. 
   
   
2. 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. 
     
     
     
     
3. 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.