The Visual Editor is used to compose visual content in the workflows for Activities and Messages in Salsa Engage. This article documents the Visual Editor as if it were a stand-alone part of Salsa Engage. However, in practice, the Visual Editor can be found only in the context of specific activities or emails. This help section covers the common options and standard workflows of the Visual Editor.

Many components of the visual editor are featured in all of Salsa Engage's forms. However, each form has unique elements, and each element has different editing tools. For example, Sign-Up Forms do not have payment configuration options since those elements don't apply to Sign-Up forms. Descriptions for creating various activities and emails can be found in their own articles.

In Salsa Scholars for Engage, you'll find tutorials for the Visual editor embedded in the Email course and courses for specific activities.

Navigating the Visual Editor

"When starting with any email or form, when you arrive in the Edit screen (after clicking "Edit Email Content" or "Edit Form Content,") go to the Settings section under the Editor Menu before beginning any design work. Check to make sure that the defaults for things like font type, link color, button color, and style all match your organization's branding. This will save you time as you're editing, so you can avoid having to tweak each content section and each button's design independently because you'll have those defaults in place."

Ilona Globa, Salsa Product Adoption Specialist and Head of the Smart Start Fundraising Program

Most of the work will be done from the Compose section of your activity or the Create the Email section of your messages. This is where you add, edit, or remove your activity metadata, page content, form elements, payment gateways, or third-party tracking codes. Click on the Edit Content button to get started or continue editing your page. All available elements are defined below.

The page edit screen displays a realistic view of your email or web page as you continue to add to and edit your content.

Elements must be embedded in rows. This makes it easier and quicker for you to build good-looking pages and emails. Salsa Engage supports nested rows up to two deep.

Moving your mouse over a page element will display an orange dashed line around the element that shows the extent of that element. A blue dotted line shows the extent of rows within the page putting your mouse over the row button.

The options available by clicking any of these icons will depend on the type of design element you're working on. For instance, selecting the pencil icon on an Image element will bring up your image library. Clicking the same icon on a Text element gives you an in-line text editor. It's important to not confuse Row controls with Element controls.

Replace Elements in Older Activities and Emails

If you have older Activities that you want to copy, after the form has been cloned, you'll want to...

1. Delete any deprecated Form Elements.
2. Replace it with the new Form Element.

For instance, any forms older than 2018 with a Social Follow element (white social media buttons) should replace the Social Follow element with a new version of the element (colored social media buttons) by deleting the element and choosing it again from the Elements tab (described below).

Old 'Follow' Element	New 'Follow' Element

In another example, if you clone any older activities with Form elements, Salsa Engage will alert you to remove the existing form element and replace it with a new element.

Navigating Page Contents

At the top of the page, the grey toolbar contains information about which email or activity you're viewing, which page within the activity you're currently viewing, the live preview button, and save options. Along the right side is an Editor Menu that contains page settings, an outline mode, row items, and elements to add to the page.

Page Identity (A)

This section displays the activity or message type and name. If you are displaying an activity that has multiple page templates, like a peer-to-peer event that has a main page, a fundraiser page, and a team page to design, that page template type also displays here.

Page Navigation (B)

These links at the top of the page are called 'breadcrumbs' which represent a trail to follow through your site you are building. These links show you the current page that is displayed of all the pages in your activity as a little blue line below the page name. Clicking on that breadcrumb takes you to that page for editing that form. In the example above, this event form has 4 pages:

• The activity's Landing Page where visitors start their experience. That is the currently displayed page, indicated by the blue line below the link.
• The Registration form where tickets are selected and personal information filled out.
• The Checkout screen where supporters pay for their tickets.
• The Confirmation screen that confirms their registration was successful and directs supporters on what to do next.

Page Preview (C)

This button displays the message or activity in a new window with all the editing functionality removed. The Preview view enables you to save your work and see what your message or form HTML will look like in your browser, simulating the view in a browser, tablet, or mobile device.

• Click the Preview button to the top right of the editor to open a new browser tab.
• To the right of the new screen, use the Preview controls to toggle between computer screen, tablet, and a cell phone view of your content.

"When moving from Desktop to Mobile, please note that elements from left to right will be stacked on each other. So it's important to check Preview as you're building your design, to ensure the most important information in your email/form isn't too low on the page, since mobile views are increasing as people use their mobile devices more and more often. We must ensure that a design that looks great on your desktop is still logical on a smaller screen. Tablets are the least commonly used of the three device types, ranging around 15% of opens on average."

Ilona Globa, Product Adoption Specialist and Head of the Smart Start Fundraising Program

Pro Tip: It can be challenging to create emails that render well in all email clients, because email clients, unfortunately, have little standardization in the way they display HTML. Here is a helpful resource that other clients of ours have used to mitigate these kinds of problems: http://www.email-standards.org. Consider using a third-party program like litmus.com to test how your HTML email will perform in the myriad of different email programs. In addition, keep an eye on the breakdown of email clients accessing your content and start tailoring the design to the majority of those email clients your Supporters use.
NOTE: Be sure to send yourself actual test emails before publishing. Emails render differently in various email clients from this web preview.

Save Options (D)

The teal-colored Save button in the top right saves your progress when editing your activity or message. The Exit menu to the right of the Save button will allow you to...

• Save your work and exit the Edit screen.
• Cancel all changes since your last save and exit the Edit screen.

Editor Menu (E)

The Editor Menu by default can be found on the right side of the screen, but if you click on the yellow title area and drag it around the screen, you can reposition the Editor Menu wherever you wish. Just below that yellow area, the Hide Options area minimizes the Editor Menu's footprint temporarily as you work within your message or form.

Within the editor menu, you will find some buttons that will make large-scale changes to your message or form:

Settings

When you set up your Salsa account, you defined a set of default styles that are used for Activities. You can modify the overall look and feel of this particular form by changing the default design settings. The global changes you can set here pertain to...

Global Setting	Description
Page Settings	Page color or background image Content area color Maximum content area width
Text Element Settings	Font Font color Font size Link color Divider color
Button Element Settings	Background color Text color Border Corner style Button size Button style
Callout Element Settings	Background color Text color Border Corner style Padding
Form Element Settings	Field border Field corner style Field padding
Custom CSS	If you wish, you can write your own custom CSS for your form. The styles you define here will be included in the final output. These styles will not be applied in Edit mode, but you will see them in the Preview and Published versions. NOTE: Keep in mind that support for certain CSS declarations can vary widely between browsers and devices and may even not be supported by different browsers and devices. Only those with advanced CSS skills should use this feature.

Restore Default Look & Feel

Disable Theme Styles

Add A Row

This button item displays a menu of drag-and-drop columns that include Header and Footer, but also multi-columns and sidebars. The Rows menu also include pre-formatted configurations into which you can easily place your Elements. This makes it easier and quicker for you to build good-looking pages and emails. Salsa Engage supports nested rows up to two rows deep.

Click the Add a Row button, and then drag the row option into the cell that you want to break into rows.

Add An Element

Elements enable you to add various content to Activity forms. Elements must always exist within Rows. Click the Add an Element button, and then click and drag any Element into the Row container to which you want it added. An Options dialog box will open for the Element that you've placed. See Font and Element Options for a detailed list of available Elements and what you can do with them.

The best way to learn what options are available for Elements that are already on a form is to hover over any Element you are interested in, click the pencil icon, and experiment with the various options. For example, if you are in a Fundraising form on a donation amount button, click the pencil icon. A dialog box will open in which you can change...

• The button type (Traditional or Radio Style).
• Whether a donor should have options for a One Time Gift, Recurring Gift or Both.
• Suggested donation amounts.
• How often the donation will be collected (Once a Month or Once a Year).
• Button design.

If you've made changes that you do not want to keep, click Cancel to close the dialog box without saving changes.

NOTE: Some elements can be used only once. If one of these Elements is already included in your form, it will be grayed out in the Elements tab.

Outline Mode

Working with embedded rows in your form or email can be tricky. Outline view is particularly useful for managing embedded rows. The Outline view enables you to shift Rows or Elements in your form. Click the Outline switch button to toggle the screen into outline mode. The Outline Mode ON button replaces the Outline Mode OFF button.

• When Outline Mode is OFF, to the upper-left corner of each Element and each object within an element is a small, orange rectangle with white dots.
  
  Click this rectangle to open a menu that enables you to move the Element.
  
• When Outline Mode is OFF, Click on the teal Row button (above) to switch to Row control. Click the teal dots icon, hold, and drag the icon to move entire row.
  
• When Outline Mode is ON, click the grey icon dots, hold, and drag the icon to move entire element.
  

"Be sure to use the Outline mode to get a wire-frame view of your design, and to more easily move around elements and rows."

Ilona Globa, Product Adoption Specialist and Head of the Smart Start Fundraising Program

Element Warnings

Some elements need information that is important to the proper functioning of the element. When that information is not available, Salsa Engage will warn you that more information is needed.

For instance, you have a map element on your home page, but you have not added an address to your event. Salsa Engage will produce a warning on the Editor Menu and a warning icon on the element as a visual reminder that the information needs to be included. Clicking on the red Editor Menu warning displays the items that require your attention.

You can also put your mouse over the red element warning symbol to see the warning for that particular element.

Editing Page Contents

Row Controls

• Row Settings—Use the icon that looks like small, interlocking gears is where to select a background color or image, border, padding, corner style, and mobile adjustments for the given cell.
  
• Duplicate Row—Use the icon that looks like loosely stacked sheets of paper to duplicate the row and place the new copy in certain locations, as in the example below:
  • Copy to top.
  • Copy to Registration.
  • Copy to Checkout.
  • Copy to Confirmation.
    
    

"Use the [Duplicate Row] ability in the Row settings if you're building a longer email (such as a newsletter or a longer form) to help save time on the replication of a row you created. For example, if you have an event and there are multiple speaker profiles you need to list in the lower half of page, you can create an L-sidebar row, where the image is on the left, and the headline and content is in a wider section to the right of the image, as well as a "Full Bio" button underneath. You only need to create this row one time, then clone it several times to save time on the structure build."

Ilona Globa, Product Adoption Specialist and Head of the Smart Start Fundraising Program

• Delete Row—Use the 'trashcan' icon to delete the given row. You'll be prompted before the row is deleted forever. There is no Undo function with this step.

Element Controls

• Element Container Settings—Here is a brief description of the types of features that are available via the 'gear' icon for each type of Element (with further explanation below):
  • Design—Control the element padding, width, height, vertical scrolling within the element, border, corner style, and background.
  • Mobile—All Salsa Engage forms are responsive by default. However, you may want to make further adjustments to any element based on the size of the display you expect your supporters will be using to view your forms or emails.
  • Advanced CSS—In conjunction with Custom CSS added to Engage, you can list any custom CSS classes you want to apply to this element's container. You may define style declarations for these classes in the Custom CSS tab of your overall Design settings. Use the element ID in your Custom CSS to specify certain elements.
    
    Pro Tip: Keep in mind that support for certain CSS declarations can vary widely by different browsers and devices and may even not be supported by different browsers and devices. Only those with advanced CSS skills should use this feature.
    
    
• Edit Element—Use the 'pencil' icon to edit each type of Element (with further explanation below):
  • Button—You can add a button anywhere on your form that links to another page. Once you've selected the Pencil, you can refine the button's attributes: Adjust the link, the positioning, and the size.
  • Callout—When selecting the Pencil for this field, the Edit Featured Content window will open. It's a lot like the edit text window for the Text element. The important choice for this field, however, is made using the Design tab, in the upper right-hand corner of the visual editor. That's where you can adjust the color of the Callout field itself.
  • HTML—Be careful when using this field. Use the Pencil if you want to tweak HTML directly. Keep in mind that you can break your form if your HTML is invalid or incorrect in any way.
  • Image—For the Image element, the Pencil icon opens the Salsa Engage image library. Using the image library window, you can add to your form and images to Salsa Engage. Click here for an overview about adding images to and editing images in Salsa Engage. Click here to see images best practices.
  • Merge Fields—Use the head and shoulders icon to open the Insert a merge field dialog box. Merge Fields enable you to insert dynamic text elements into your forms and messages. For example, the message could include a link to the supporter's fundraising page, so when your supporter sends a message to a donor, the donor will receive a link to the supporters fundraising page. Insert available merge fields and use the radio buttons to format capitalization. Also, enter the message that you want if the merge field for a supporter is blank.
  • Share (Social)—You can add the option of sharing your form to social media, such as Facebook and Twitter, to your forms. Select the Pencil to change the arrangement of these options vertically or horizontally and to decide which social media options you'd like to include or exclude. By default, all are chosen. You can also add a message which outlines why it is important that your supporters share this page. You can edit this verbiage with a slightly truncated version of the 'Edit Featured Content' window, explained in the Text section above.
  • Text—Selecting the Pencil on the Text element will bring up the Edit Text window. The window features many of the editing tools that you are familiar with from popular desktop publishing tools, such as Microsoft Word and Google Docs. Hover over any icon in the window to see a description of what it is or just experiment.
    

"There is the option to do text wrapping of an image in Engage, meaning an image can be inserted directly into a Text element. However, this should only be used in the case that text actually needs to wrap around an image, typically one that is tall and narrow, such as a person's profile photo. In other instances, it's recommended that you insert an image element for a visual, since the image and content will behave more predictably when they render in different inboxes/devices/screen sizes. This is because the visual editor's native functionality is made to be mobile-optimized."

Ilona Globa, Product Adoption Specialist and Head of the Smart Start Fundraising Program

• Everything Else—You will see additional Elements depending on the type of form you're building. If you're building a fundraising form, you won't see the 'Signatures' icon, but you will see it if you're building a petition. These are all editable with the Pencil, but you'll notice that some are grayed out. A grey icon indicates that the field is already included in the form and another cannot be added.

• Delete Element—Use the 'trashcan' icon to delete the given row. You'll be prompted before the row is deleted forever. There is no Undo function with this step.

Hyperlinks

Add hyperlinks to Activity and Messaging actions so that supporters can click to find more information. You can add hyperlinks to both Your Pages created in Engage or An External Page that exists entirely outside of Engage. Add hyperlinks to Text, Buttons, and Images Elements.

The process looks the same whenever you click to add a hyperlink to your elements:

1. the Choose a Link section, on the Your Pages tab, Link to any Salsa Engage Activities page that you have created.

   • Use Search to find the Activities page or look for it in the table below.

   • Click the Select button on the corresponding row to use that internal page as your hyperlink.

2. If you want to use an external URL, click the An External Page tab.
   

3. Enter or paste the URL that you want to link to into the Link field. Be sure the right Protocol is selected (if you paste in HTTP or HTTPS in your URL it should select the right protocol automatically) and enter only the URL in the Link field.
   
   NOTE: If you want to link to a Salsa Engage Activities page that you have created, use the Your Pages tab (above) instead of this one 
   

4. If the destination form is an Engage form and you have 'Form Prefill' enabled in your Settings, we will always pre-populate the supporter's data if known. However, using the tabs below, you can also append parameters to your link that will pre-populate custom fields with specified values on the destination page when someone clicks on this link from their email.

5. You can optionally set a Salsa Tracking Code for this email on this screen.
   
6. Click Save to add your link to your text.

Text element 

Add a hyperlink within your content by first editing your text in the text editor.

1. Highlight the text you wish to turn into the anchor for your hyperlink.
2. Click the "chain link" button in the text editor.
   

Button element

Add a button to your page that links out to either another Engage form or to an external web site. Buttons in emails are rendered in HTML. Even if a recipient doesn't display images for their emails, they'll likely see your button. 

1. Double-click your button to start editing.
2. Click the Link tab.
3. Click Add a Link.

Later, you will be able to edit this link or clear it on the same Link tab.

Image Element

Add a link to make your images clickable. Supporters can click on an image that directs them to internal Engage forms or external pages.

1. Add your Image Element as normal to your page by dragging the Image Element from the Editor Menu onto your page where you'd like to position it.
2. Double-click the element to select the image.
3. While you are selecting your image you can also Add a Link on the right side of the Select Image screen.

Custom HTML Hyperlinks

If you choose to code your own HTML in an email, you can add hyperlinks referencing any of 'Your Pages' created in Engage or 'An External Page' that exists entirely outside of Engage using the Link button at the top of the screen.

Manually Add a Tracking Code to a URL

Add tracking codes to your email hyperlinks. For instance, your email marketing specialist generates an email for you, along with a call to action hyperlink within the email to visit your petition. The URL they send in the email may contain a tracking code to identify this exact campaign, providing a mechanism to quantify how many responded to that source by clicking the link to participate.

NOTE: When you add a tracking code to a URL, that code overrides any default code set on the activity to which the URL directs. 

To add a Tracking Code manually to a URL, simply add the following field-value pair to your URL query string:

sl_tc=[value]

A URL with a tracking code would look like this:

https://sample.salsalabs.org/index.html?&sl_tc=2018_01_30_SLCR

Form Prefill in Hyperlinks to Engage Pages

If the destination form is an Engage form and you have Form Prefill enabled in your Settings, we will always pre-populate the supporter's data i(f known). However, you can also append parameters to your link that will pre-populate donation amounts or custom fields with specified values on the destination page when someone clicks on this link from their email.

Mail-to Links

If you want to direct a supporter to email someone, add a Mailto: link. Adding this link to your form generates a new email message in the supporter's default mail program with one or more fields like To: and Subject: already pre-populated. To add a mailto link:

1. Add a hyperlink via one of the elements listed above.
2. Select An External Page tab.
   
3. In the Protocol field, select Mailto:.
4. In the Link field, enter the email address. 
   
   You may enter more than just the email address in the Link field. For example, add the following to the link, which will create a new email in the supporter's default email program, with a To: address (highlighted in red—you do not need to color yours), subject line (highlighted in blue), and email body (highlighted in green):
   

   example@domain.com?subject=Subject%20Example&body=Email%20Body

   NOTE: %20 is the HTML equivalent of a space between characters. Use this instead of the space key on your keyboard.
   
   
5. Click the Save button to save your changes.
6. Save your form changes in the top right corner.

Append Donation Preset Fields

You can set parameters for outgoing links from Engage emails, once you have selected the link source. One example is a link whose content says, 'Your donation of $20 will fill a backpack for a child. Donate $20 today!' The $20 donation amount will be passed to the destination form and preselected based on conditions set on the link.

In the case of fundraising forms, when someone clicks on this link from their email, donation amounts or custom fields with specified values on the destination page will automatically populate one-time or recurring donation amounts on the fundraising form.

NOTE: The Gift Designation field can be used in conjunction with this functionality.

A Default one-time or recurring donation amount may be set with the following parameters:

• A distinct Dollar Amount (in whole numbers)
• Most Recent One-Time Donation Amount
  • Increment By a specific percentage over the most recent amount.
  • With a Minimum Amount of a specific value or leave blank for none.
  • Default Amount to be used if none occurred previously, or leave blank for none.
    
• Average One-Time Donation Amount (rounded to nearest dollar)
  • Increment By a specific percentage over the most recent amount.
  • With a Minimum Amount of a specific value or leave blank for none.
  • Default Amount to be used if none occurred previously, or leave blank for none.
• Largest One-Time Donation Amount
  • Increment By a specific percentage over the most recent amount.
  • With a Minimum Amount of a specific value or leave blank for none.
  • Default Amount to be used if none occurred previously, or leave blank for none.
• Use A Custom Field-Any supporter custom fields that are Number-type fields.

If you choose to link from an external page or form, it is possible to specify the parameter that represents the amount field of that external form. Since there could be millions of combinations of what someone else called the amount field, it's not possible for us to prepopulate what that field would be on an external page. It can, however, be typed in.

Append Field Presets

Populate supporter custom fields based on answers previously submitted via sign-up form; for example, how many days of the week someone can volunteer. For example, if someone answered a question previously on a sign-up form, they have a value stored in their Engage record already. If they fill out another form that contains the same field, then the existing value is populated automatically when they use the form. If they are new, then your default values would be used, as seen below.

Element Container Settings

Features available via the Gear button for each element (also called Container Settings)...

• Design—Control the element padding, width, height, vertical scrolling within the element, border, corner style, and background.
  
• Mobile—All Salsa Engage forms are responsive by default. However, you may want to make further adjustments to this element based on the size of the display you expect your supporters will be using.
• Advanced CSS—In conjunction with Custom CSS added to Engage, you can list any custom CSS classes you want to apply to this element's container. You may define style declarations for these classes in the Custom CSS tab of your overall Design settings. Use the element ID in your Custom CSS to specify certain elements.
  
  Pro Tip: Keep in mind that support for certain CSS declarations can vary widely by different browsers and devices and may even not be supported by different browsers and devices. Only those with advanced CSS skills should use this feature.

Element Edit Settings

Here is a brief description of the types of features that are available via the Pencil for each type of Element:

• Button—You can add a button anywhere on your form that links to another page. Once you've selected the Pencil, you can refine the button's attributes: Adjust the link, the positioning, and the size.
• Callout—When selecting the Pencil for this field, the Edit Featured Content window will open. It's a lot like the edit text window for the Text element. The important choice for this field, however, is made using the Design tab, in the upper right-hand corner of the visual editor. That's where you can adjust the color of the Callout field itself.
• HTML—Be careful when using this field. Use the Pencil if you want to tweak HTML directly. Keep in mind that you can break your form if your HTML is invalid or incorrect in any way.
• Image—For the Image element, the Pencil icon opens the Salsa Engage image library. Using the image library window, you can add images to your Salsa Engage form. Click here for an overview about adding images to and editing images in Salsa Engage. Click here to see images best practices.
• Merge Fields—Use the head and shoulders icon to open the Insert a merge field dialog box. Insert available merge fields and use the radio buttons to format capitalization. Also, enter the message that you want if the merge field for a supporter is blank.
  
  
• Share (Social)—You can add the option of sharing your form to social media, such as Facebook, Twitter, and Google+, to your forms. Select the Pencil to change the arrangement of these options vertically or horizontally and to decide which social media options you'd like to include or exclude. By default, all are chosen. You can also add a message which outlines why it is important that your supporters share this page. You can edit this verbiage with a slightly truncated version of the 'Edit Featured Content' window, explained in the Text section above.
• Text—Selecting the Pencil on the Text element will bring up the Edit Text window. The window features many of the editing tools that you are familiar with from popular desktop publishing tools, such as Microsoft Word and Google Docs. Hover over any icon in the window to see a description of what it is or just experiment.
  
• Everything Else—You will see additional Elements depending on the type of form you're building. If you're building a fundraising form, you won't see the 'Signatures' icon, but you will see it if you're building a petition. These are all editable with the Pencil, but you'll notice that some are grayed out. A grey icon indicates that the field is already included in the form and another cannot be added.

Text Element Merge Fields

Merge Fields enable you to insert dynamic text elements into your forms and messages. For example, the message could include a link to the supporter's fundraising page, so when your supporter sends a message to a donor, the donor will receive a link to the supporters fundraising page.

Supporter Type

• Address, line 1
• Address, line 2
• Cell Phone
• City
• Country
• Date of Birth
• Email Address
• First Name
• First Petition Signature Date
• Home Phone
• Last Name
• Last Petition Signature Date
• Middle Name
• State
• Subscription Change Date
• Subscription Date
• Suffix
• Supporter Since
• Title
• Total Petition Signatures
• Work Phone
• Zip Code
• [custom fields]

Fundraise Type

NOTE: Engage will automatically add a $ to the front of a merged fundraising field value. Cents will not be displayed nor will a decimal point if the decimal value is zero. A ten-dollar average donation amount will display as $10 and not $10.00.

• Amount Of Most Recent Donation
• Average Donation Amount
• Average One-Time Giving Amount
• Average Recurring Giving Amount
• Date Of Most Recent Donation
• Largest Donation Amount
• Largest One-Time Giving Amount
• Largest Recurring Giving Amount
• Last One-Time Giving Amount
• Last Recurring Giving Amount
• Lifetime Giving Amount
• Lifetime Number of Donations
• Type Of Most Recent Donation
• [custom fields]

Organization Type

• Organization Name
• Org Address Line 1
• Org Address Line 2
• Org City
• Org State
• Org Zip
• Org Phone
• Org Email

Separate types exist for custom supporter, activity, and general custom fields and are unique to every organization.