> ## Documentation Index
> Fetch the complete documentation index at: https://moengage-user-guide.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Editing OSM Templates in Mobile Web

The On-site Message (OSM) Editor helps you create and customize messages for your mobile and desktop web campaigns. This ensures your On-site messages display correctly and perform optimally across various devices, leading to a better user experience and increased engagement. This guide is for digital marketers and product managers who want to deliver tailored web experiences to their audience.

To create an On-site message for mobile web, select **Mobile Web** as the target platform during the [campaign creation](/user-guide/campaigns-and-channels/on-site-message/create/create-osm-campaign) process.

<img src="https://mintcdn.com/moengage-user-guide/OEZzGRSFwifpX5UP/images/moengage_2c1723.png?fit=max&auto=format&n=OEZzGRSFwifpX5UP&q=85&s=de82846ec8cd5cc1cc2bf0d7503acef9" width="2692" height="1380" data-path="images/moengage_2c1723.png" />

Complete the remaining fields and select a template in the next step of the campaign creation process.

## Edit Templates in Mobile View

To edit a template in Mobile view:

1. On the editor, click the **Desktop** icon.

   <img src="https://mintcdn.com/moengage-user-guide/LNSaIrgVyFV18WvY/images/moengage_e70bcc.png?fit=max&auto=format&n=LNSaIrgVyFV18WvY&q=85&s=62ef53014cb005652690ad8e979661ca" width="2670" height="1294" data-path="images/moengage_e70bcc.png" />
2. A list of device views appears: **Desktop**, **Tablet**, and **Mobile**. You can switch between these views to see how the template will look on different devices.
3. To edit your template for mobile, click **Mobile** to open the Mobile view.
4. You can now begin styling your template for mobile devices.

   <img src="https://mintcdn.com/moengage-user-guide/cMNZB_E5H__uunJL/images/moengage_bead18.png?fit=max&auto=format&n=cMNZB_E5H__uunJL&q=85&s=2357e78c7a8eec7d1b916171661acc22" width="2700" height="1374" data-path="images/moengage_bead18.png" />

<Info>
  **Information**

  While elements cannot be added directly from the mobile view, you can configure elements to appear specifically on mobile by adding them in Desktop View and adjusting their visibility settings.
</Info>

## Add Elements to Mobile Web Templates

To add new elements to your Mobile web templates:

1. Switch to the **Desktop** view.
2. In the top-left corner of the editor, click the **+ icon** to add a new element.

   <img src="https://mintcdn.com/moengage-user-guide/mD6Zisl79KVUTNL4/images/moengage_cc775c.png?fit=max&auto=format&n=mD6Zisl79KVUTNL4&q=85&s=0c3176d4bf212fcf2fe86caee1a0a052" width="2702" height="1374" data-path="images/moengage_cc775c.png" />
3. Click the newly added element to open its edit bar. On the edit bar, click the **Settings** icon, and then click **Styling**.

   <img src="https://mintcdn.com/moengage-user-guide/Nc7DGgqNAva2wV7W/images/moengage_6b592c.png?fit=max&auto=format&n=Nc7DGgqNAva2wV7W&q=85&s=d9507e38bd91471538103767f8611eb8" width="2294" height="1220" data-path="images/moengage_6b592c.png" />
4. In the **Styling** menu, click **Advanced**, and then turn off the **Show on Desktop** toggle.

   <img src="https://mintcdn.com/moengage-user-guide/s2jfZa6amEeJ4PNc/images/moengage_a5a470.png?fit=max&auto=format&n=s2jfZa6amEeJ4PNc&q=85&s=833617c2b5c6fe0e5dd3febd95a7c797" width="1434" height="1344" data-path="images/moengage_a5a470.png" />
5. This action hides the element in Desktop view, but it remains visible in Mobile view.

   <img src="https://mintcdn.com/moengage-user-guide/V7vjAvRldhpYJVGL/images/moengage_da7c0f.png?fit=max&auto=format&n=V7vjAvRldhpYJVGL&q=85&s=be8bd61d2674983b0783be9cd41df811" width="1182" height="1100" data-path="images/moengage_da7c0f.png" />

## Style Elements in Mobile View

1. In Mobile view, click the element you want to style. This opens the styling options.

   <img src="https://mintcdn.com/moengage-user-guide/ziRUAeeja7fRRL-D/images/moengage_dfe157.png?fit=max&auto=format&n=ziRUAeeja7fRRL-D&q=85&s=1d9628db42a0306f64c1b17ef51753f0" width="2096" height="1358" data-path="images/moengage_dfe157.png" />
2. The edit bar provides these four quick customization options:
   * **Hide**: Hides the element in Mobile view.
   * **Text**: Opens text editing options, such as size, typography, and weight.

     <img src="https://mintcdn.com/moengage-user-guide/rOPyBrA8V3tr391y/images/moengage_4a24be.png?fit=max&auto=format&n=rOPyBrA8V3tr391y&q=85&s=59fd57ca81696609a5675d37392b558f" width="820" height="668" data-path="images/moengage_4a24be.png" />
   * **Align**: Aligns the element to the right, left, or center of the template.
   * **Settings**: Allows you to add spacing above or below the element or change its HTML tag.

     <img src="https://mintcdn.com/moengage-user-guide/UOu66ZvIudsFME7I/images/moengage_3c231f.png?fit=max&auto=format&n=UOu66ZvIudsFME7I&q=85&s=da92ee68f4fd4576790e7ec2b4b8b5d3" width="826" height="710" data-path="images/moengage_3c231f.png" />
3. The **Styling** and **Effects** tabs appear on the right side of the editor. Use Padding and Margin to ensure elements don't appear cramped on smaller mobile screens, improving readability.
   * **Styling**: Use the **Padding** and **Margin** options to modify the element's position on the template.

     <img src="https://mintcdn.com/moengage-user-guide/vbW0L13jO4xtQMap/images/moengage_77e23e.png?fit=max&auto=format&n=vbW0L13jO4xtQMap&q=85&s=e33879b966d2c1adc0634f4ad4e375ce" width="600" height="1370" data-path="images/moengage_77e23e.png" />
   * **Effects**: Apply short animation effects to the element. You can also modify the duration and delay of these effects.

     <img src="https://mintcdn.com/moengage-user-guide/nlxP2l2_fL5aQXAE/images/moengage_ba740e.png?fit=max&auto=format&n=nlxP2l2_fL5aQXAE&q=85&s=d11d86ed1778c564411247d4fc0412b6" width="598" height="1308" data-path="images/moengage_ba740e.png" />

# Next Steps

* [Analyze OSM campaigns](/user-guide/campaigns-and-channels/on-site-message/analyze/analyze-on-site-messaging-campaigns)