Recent software enhancements are in red.

Introduction

The visual editor is used to compose Activities and Messages in Salsa Engage. This help section 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 a specific form. 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 amount configuration options since those elements don't apply to Sign-Up forms.

Replace Elements in Older Activities and Emails

If you have older Activities that you want to copy, you'll want to (1) delete the deprecated Form Element, and (2) replace it with the new Form Element.

Content Tab

All Activities include a Compose Content and Confirmation step as well as a step for creating Autoresponders. Events and Peer to Peer Events include additional tabs for the creation of Registration and Checkout Pages.

Salsa Engage automatically lands on the Content tab after a layout has been chosen. You can choose from the following views: Edit, Outline, Preview.

Copy and Paste

If you are copying and pasting content from elsewhere, check out our copy and pasting best practices article.

Edit View

This is the view that you will first see when you open the Visual Editor. Most of the work will be done from here, as this is where elements and content are added, edited, or removed. All available elements are defined below.

Outline View

The Outline view enables you to shift Rows or Elements in your form. The Outline view is the only place where you can make structural changes.

Click  to toggle the screen into outline mode. The Outline Mode ON button replaces the Outline Mode OFF button.

Once in the Outline view, click, hold and drag elements into different sections of the form. Click, hold, and drag the  icon to move entire sections.

Save & Preview

The Preview view enables you to save your work and see what your form HTML will look like in your browser, simulating the view in a browser, tablet, or mobile device.

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

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 clients your Supporters are using.

Rows Tab, Elements Tab, and Design Tab

On the right-hand side of the menu bar that features the View Buttons (Outline, Edit, and Preview), you'll see tabs that you can use to add Elements: Rows, Elements, and Design.

Rows Tab

Elements must be embedded in rows. This tab brings up 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 own content. This makes it easier and quicker for you to build good-looking pages and emails. Salsa Engage supports nested rows up to two deep.

Click the Rows tab, and then drag the row option into the cell that you want to break into rows.

Elements Tab

See Font and Element Options for Activities and Messages for a detailed list of available Elements and what you can do with them.

Elements enable you to add content to Activity forms. They always exist within Rows.

Click the Elements tab, 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.

Pro Tip: 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, click the pencil icon for donation amount buttons. A dialog box will open in which you can change the type of button (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); and the button design. If you've made changes that you do not want to keep and you don't want to go to the trouble of reversing your changes, 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.

Add and Edit Rows and Elements

When you are on the Content tab and hover over an Element or object within an Element, the Element and/or object will be outlined in orange, and editing tools will appear for that Element and/or object. When you want to change an Element, you'll want to make sure that you have selected the Element and not merely the row.

Pro Tip: Because you are working in a browser, it's a good idea to save your work frequently, whenever you get to a point where you wouldn't want to have to redo your work if your browser were to crash.

 Row Movement Options

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.

 Row Settings (gears), Duplicate Row (pages), and Delete Row (trash) Controls

It's important to not confuse Row controls with Element controls. The gears icon controls Rows (aka, containers). The pencil icon for an Element controls its parameters and values. 

• Row Settings - The icon that looks like small, interlocking gears is where you can select a background color, border, padding, and corner style for the given cell.
• Duplicate Row - The icon that looks like loosely stacked sheets of paper, will replicate the cell and place the new copy directly below the original.
• Delete Row - The trash icon deletes the given element. You'll be prompted before the element is deleted forever.

 Element Settings (gears), Edit (pencil), Delete (trash) Controls

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 a text editor. It's important to not confuse Row controls with Element controls.

Following 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 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, 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 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.

Design Tab

The tab enables you to define design and page preferences.

To open Design controls, click the Design tab at the top-right of the screen. Design controls contains two tabs:

1. Design Preferences - This tab enables you to make changes to a specific form that may deviate from the default choices made at the account level. Changes can be made to general settings (background colors and dividers), text, buttons, callouts and even form level changes to field styles.
   • If you don't like how the URL hotlink reads, you can change the part after the slash to whatever you'd like. From the Compose page of your form, click the Design button in the Editor Controls menu to the top right of the form. The Update Design Basics window will open.
   • Click the Page Preferences tab, and then scroll down to the Page Settings frame.
   • The Page Settings frame contains the Page Title and URL fields. In the editing text box to the right of the URL, enter what you want the URL to contain. Whatever you enter here will appear at the end of the hot-linked URL that Salsa Engage creates.
   • Click Save Settings.
2. Page Preferences - This tab enables you to choose to set a background image and link, apply keywords and a Facebook title, description, and images.
   
   
   • Change Your URL
     If you don't like how the URL hotlink reads, you can change the part after the slash (/) to whatever you'd like:
     • Click the Design button in the Editor Controls menu to the top right of the form. The Update Design Basics window will open.
       
     • Click the Page Preferences tab, and then scroll down to the Page Settings frame.
     • The Page Settings frame contains the Page Title and URL fields. In the editing text box to the right of the URL, enter what you want the URL to contain. Whatever you enter here will appear at the end of the hot-linked URL that Salsa Engage creates.
     • Click Save Settings.
   • Page Description for Search Engines - Add a short description that will help users know what this page is all about -- and why they should click to take action -- when they find your page in a search engine. Search engines show the description in search results mostly when the searched-for phrase is within the description, so optimizing the description is crucial for on-page search engine optimization.
     
   • Keywords - It's critical for people to find your site via search engines. Your keywords help connect searches to your site.
   • Social Network Title - Enter the title Social Network should display when this page is shared. Once the share reaches 50 or more likes or shares of its own, the Title cannot be altered.
   • Social Network Description - Add a short description that will be included in the post when this page is shared.
     
   • Social Network Image - This is the image that will be shared along with your description of your Social Network. Make the image at least 200 pixels high and 200 pixels wide, but no more than 5 MB in size. The image can be larger than 200 x 200 pixels but not smaller, in order to maintain a clear image.
     
     NOTE: Twitter only refreshes its technology weekly, so changing your Social Network description and republishing will not take effect for one week, unless after you publish your page you check your live form at https://cards-dev.twitter.com/validator.

The Confirmation View Tab

The Confirmation tab is where you can craft a "Thank you" message page (#1) or choose to redirect to another URL (#2). These are optional, but many organizations like to display a follow-up page as confirmation of form submission. This tab also enables you to publish out to social channels.

This tab features many of the controls documented above. For example, click the Pencil icon to add and edit text. You can see the outline view (although there's not much to move around). You can also define some of the design elements.

Social Sharing

A unique element of this tab is the Social Sharing option. Open the Social Sharing Configuration window, where you can choose which social media channels you wish to include in your follow-up page.

Once you have your message the way you like it, you can save the content using the appropriate button in the lower right-hand corner of the window.  In most cases, your form will be completed and ready to publish.

Autoresponders

Autoresponders are email messages that trigger once a form has been submitted. Strictly speaking, they are not part of the visual designer. Default autoresponders are built in for each type of Activity and can be used as-is or customized. A Visual Editor that is very similar to the one documented here is used for editing Autoresponder messages. See the Autoresponders page for additional information.