This article covers the details of how to adjust the viewing size, change the user agent, view source code, adjust message text and layout, and insert elements.
You can use the Visual Editor to build “responsive” campaigns, or campaigns designed for different screens sizes. If you have Campaign Editor or higher permissions, you can set the size of the Visual Editor to mirror the viewing size of desktops, tablets, and mobile devices. There is a standard group of breakpoints available by default, but you can also set your own, which will be available to anyone with Campaign Editor or higher permissions in your dataset.
Click to delete an existing breakpoint size
|Deleting a breakpoint deletes it across the dataset so anyone with Campaign Editor or higher permissions in your dataset will no longer see the breakpoint|
In addition to previewing viewport sizes, you can also preview sites while spoofing your user agent. This will trick your site into displaying what would be shown on an actual mobile device or tablet, which can be very helpful for sites that are both adaptive and responsive.
You can access message source code in an expandable area in the bottom of the page. After you click Apply, code changes are immediately reflected in the campaign so you don't need to close the window to preview the changes.
In this section, you can adjust font styling (weight, size, color, and alignment) and add numbers or bullets. You can also add dynamic content to your message.
Click once to select Message text. Highlighting a portion of the text creates a second, smaller element container which makes it possible to adjust the styling word by word, or quickly add a hyperlink. The original, larger element container controls all of the text at once (shown at right)
|There are several types of containers you will see in Evergage (see sample images at right, and note mouse location):|
(a) Orange-dashed–element that can be selected
(b) Orange-solid–element is currently selected and editable, and the mouse is hovering over the element
(c) Green-solid–element is selected and editable, but the mouse is not hovering over the element
(not shown) Green-dashed–tracked link or click, but the mouse is not hovering over the element. This is only seen in when the Visual Editor is open, but you are not editing a campaign
Before inserting any message elements, ensure that you select the message so the line is solid (orange, changing to green when you move your mouse away). If you select an added element, Insert Element will change to Edit [element name]. Click Edit [element name] to make changes to the element as needed.
|Any added text boxes, form elements, and cloned items will appear in the top left of the message. Any added images or links will appear in the middle of the message.|
Any images you use must be hosted on a content delivery network (CDN) before you can use them in an Evergage message.
A default close icon is added to new messages, which you can edit by selecting the element and clicking , but you can add an additional close icon that you can configure differently as needed.
If you add any form elements, you must add a Submit Form Element to send the data back to Evergage.