A quick non-destructive way to preview changes on your live site without saving anything is to use Chrome DevTools. This will help you get a live preview of changes you are thinking about making. Users who are familiar with CSS and HTML may find this method very useful.

If you have never used Chrome DevTools before, take a look at the DevTools documentation. There are developer tools in other browsers like Firefox and Safari, but the methods of using them will vary slightly.

To preview style changes on your site with Chrome DevTools:

  1. Navigate to the page of your site that contains the content you want to edit
  2. Right-click on the element that you want to edit the style for, and click Inspect Element
    User-added image

  3. In the window that pops up, you will see the HTML with the element you selected highlighted.

  4. Look to the right and you should see something like: .style-###### (i.e. .style-12514) and a CSS selector. From there you can add CSS properties and see how it affects your style.
    User-added image

  5. When you are happy with your changes, you can copy the CSS properties between the curly braces { ... } 
    User-added image

  6. Navigate to onMessage > Website > Styles

  7. In the search box, type in the style number you saw in steps 4-5 (i.e. 12514) and click the magnifying glass or hit Return/Enter
    User-added image 

  8. Click Edit next to that style

  9. If you are unsure what type of content to edit, look at the HTML again from step 4 and look at the div directly above your content. In this example, you'll see:

  10. <div class="content text">
    User-added image

    From this, we can determine that this is a Text element under Content Types.
    User-added image

  11. In this case we are editing the Header, but if you are unsure, you can right-click and click Inspect Element to verify. You should see similar CSS selectors.
    User-added image

  12. With the correct element selected (in this case, Header), click Advanced CSS and paste in the CSS you copied in Step 5.
    User-added image