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

# Editing OSM Templates in Mobile Web

> Customize On-site Messaging templates for mobile web in MoEngage. Ensure your messages display correctly across devices for better user engagement.

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/t9nft78wsoLTI2Nx/images/moengage_2c1723.png?fit=max&auto=format&n=t9nft78wsoLTI2Nx&q=85&s=da05ae70dd7eb8955353c09d7b3dce6d" 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/50ZszvUJB4M_6y_L/images/moengage_e70bcc.png?fit=max&auto=format&n=50ZszvUJB4M_6y_L&q=85&s=eb77f362739f854ca940502895831227" 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/cFTwc93vQdTanvKi/images/moengage_bead18.png?fit=max&auto=format&n=cFTwc93vQdTanvKi&q=85&s=1efb46de638d8fd01332129a37594e08" 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/xaH8HoR16_YVDek5/images/moengage_cc775c.png?fit=max&auto=format&n=xaH8HoR16_YVDek5&q=85&s=eab12dbdde34a9d765e3e283226fa9c3" 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/S2vOz7ciYYqlhjCf/images/moengage_6b592c.png?fit=max&auto=format&n=S2vOz7ciYYqlhjCf&q=85&s=588b52422849365e9f8de98e5bb13e28" 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/_eUNBDpGCEXI_sgZ/images/moengage_a5a470.png?fit=max&auto=format&n=_eUNBDpGCEXI_sgZ&q=85&s=eca3a8d5e4085e379e2d7fa7b8cf4a67" 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/cVruC-B7I1TnIZ0h/images/moengage_da7c0f.png?fit=max&auto=format&n=cVruC-B7I1TnIZ0h&q=85&s=ffb91ab725ebad3290ed73b737ef00b1" 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/wIFGWsQFEjsz2j4v/images/moengage_dfe157.png?fit=max&auto=format&n=wIFGWsQFEjsz2j4v&q=85&s=c43e2abefb526ce81a51fcaf73a46b46" 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/BlcsVkkZu61NB-XQ/images/moengage_4a24be.png?fit=max&auto=format&n=BlcsVkkZu61NB-XQ&q=85&s=984ae7c83c20131f8e02befaf5b6f21a" 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/_fazdN5K6hQMBuV9/images/moengage_3c231f.png?fit=max&auto=format&n=_fazdN5K6hQMBuV9&q=85&s=ce99c553cd663f8abb190527024ac08a" 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/M3SzEdkQVgGAjJCt/images/moengage_77e23e.png?fit=max&auto=format&n=M3SzEdkQVgGAjJCt&q=85&s=3c415e009884f17524b8c778603354c0" 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/rlD8iAX6JQFx0hql/images/moengage_ba740e.png?fit=max&auto=format&n=rlD8iAX6JQFx0hql&q=85&s=23f2659826129df1041adf506bcb5769" 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)