Using the HTML Editor (WYSIWYG)

From Net-Results Support
Jump to: navigation, search

After you have completed the four required fields (Email Name, Email Subject, Email From Label, Email Reply-To Address), you are ready to create your email. Our HTML Editor Canvas tool will allow you to create professional-looking emails without having to write code.

Selecting a Template

The easiest way to get started with the HTML Editor is to select one of our email templates.

  • With the HTML Editor tab selected, click the 'Import from Template' drop-down box. You will see several genres of templates including general, holiday, music, real estate, and more. Click the genre you wish to use.
  • A modal with previews of various templates will appear. You may change the template genre to view more options by using the drop down box at the top of the modal. Once you have found a template you want to use, simply click on the preview and it will be placed in the canvas for you.
  • To change your template selection, simply select a genre from the drop down box to open the modal and then click on the template preview you want to use. This template will replace the one previously selected in the HTML Editor canvas. Note: If you made any changes to the template before choosing a new one, those changes will be lost. It is best to settle on a template before altering it.

HTML Editor WYSIWYG Tools

The Editor Tool Bar allows you to create HTML emails without an understanding of advanced HTML coding. Many of the tools you use in everyday word processing are used in this editor.

Basic Tools

  • Undo Button: Undoes the last change or addition you made to the HTML Editor canvas.
  • Redo Button: Redoes the last change or addition you used "Undo" to alter.
  • Find/Replace Button: Allows you to quickly and easily search for (and optionally replace) specific text you have used in your email.
  • Cut Button: Allows you to remove a selected image or portion of text and paste it in elsewhere. Note: This tool is not compatible with Mozilla Firefox.
  • Copy Button: Allows you to copy a selected image or portion of text and duplicate it elsewhere. Note: This tool is not compatible with Mozilla Firefox.
  • Paste Button: Clicking this button will allow you to paste text or images you have cut or copied to your clipboard. Note: This tool is not compatible with Mozilla Firefox.
  • Paste from Word Button: If you have prepared your email text in a Word document, you can copy it directly into the HTML Editor canvas. While in your document, highlight the text you wish to use and copy it (using Edit > Copy or Ctrl+C). On the email canvas, click on the location where you'd like to insert your copied text, then click the Paste from Word button. A modal will open up with blank space for text to be inserted. Press Ctrl+V on your keyboard and your copied text will be inserted into the modal. Click the Insert button and the text will be added to your Email. Your text, links, and formatting will be preserved, but images will not transfer. They must be uploaded and hosted within Net-Results. See the Insert Image support section for more information.

Images

  • Insert Image Button: Clicking this button will allow you to upload and insert images into your email. Click the button to pop the images modal.
    • Filter: Enter all or part of an image name (you have previously uploaded) to locate it quickly.
    • Create Folder: You may create folders and subfolders to store your images in for quick access and organization. Click the Create Folder button in the upper right corner to create folder modal. You will be asked to name your folder and hit Create. If you wish to create a subfolder from a folder you have already created, you must first select that folder from the left column menu on the images modal. Note that folder names cannot contain capital letters or special characters.
    • Refresh: Clicking the Refresh button will load new thumbnails for images you have just edited or uploaded.
    • Images Category: Contains an overall view of all of the images you have uploaded in one location.
    • Favorites: Images you have designated as 'Favorites' for easy viewing and access. This is best for images like your company logo that you will use in multiple email communications.
    • History: Contains images you have recently used for quick accessibility. This category will be populated automatically.
    • Upload a New Image: Click the Upload button in the upper right corner. Click Browse to open up your computer files. Select the image you'd like to use and click Open. The file location will appear in the 'File to Upload' field. Below this field, you may give your image another name by entering it in the 'As File Name' field. Click Upload and the image will begin uploading. While that image is uploading you may select other images to upload in the same way. You will get either a success or failed message next to your images once upload has been attempted or completed. Please do not close this modal while images are in the uploading process before completion. Upon success, close the modal by clicking the X in the upper right corner.
      • The image uploader accepts the following file types: gif, jpg, jpeg, and png. The maximum upload size is 10 MB. You may cancel the upload process at any time. Once images have been uploaded they will appear in the Images category. Click an image to dismiss the images modal and insert your image into the canvas. If you would like to edit, delete, view, insert, or add an image to 'Favorites', you must first click the arrow in the corner of the image to open the options menu.

Viewing/Editing Images

  • Viewing an Image: Selecting the View option will allow you to view the image at full size within the modal. From here you can also select to edit or delete the image. The arrows at the top of the page will allow you to switch back and forth between uploaded images in view mode. Click the icon between the arrows at the top of the page to return to the Images category.
  • Editing an Image: Editing and image can be done directly in the images modal. However, if you have high-quality image editing software, we recommend you edit your image before uploading it.
    • Rotate: You may rotate your image 90, 180, or 270 degrees by clicking the Rotate button.
    • Flip: You may flip your image horizontally or vertically by clicking the Flip button.
    • Resize: Click the Resize button to increase or decrease the size of your image. Be aware that resizing your image may adversely affect the quality (particularly if you increase the size). Enter in the pixel width and height of the size you want your image to be. If you leave the Constrain Proportions box checked, changing one size will automatically adjust the other to match the increase or decrease. If you'd like to stretch or skew your image, you may uncheck this box and change the pixel sizes independently. You may hit the tab button on your keyboard to preview your resize (instead of the Apply button) before fully applying your changes. Click Cancel to undo your change, or Apply to accept it.
    • Crop: Drag over the cropped area to create the size you want, or specify a specific pixel amount by entering values in the TOP, LEFT, HEIGHT, and WIDTH fields. The bright area will indicate what the image will become when cropped. Select Apply when you are satisfied.
    • Revert: The Revert button allows you to return to the last saved version of the image you are editing. If you don't like the way you cropped an image, click the Revert button and agree to go back to the original. Note that if you have made multiple changes, they will be lost when using this function.
    • Save: Once you have edited your image to your liking, you will need to save it or your changes will be lost if you dismiss the modal. By default, the current name of the image will appear in the name field. If you wish to save your edited image and not keep the original, leave the name in the field and click Save. If you would like to save your image as an additional image, type in a new name and the valid image extension (image.jpg or image.png) and hit Save. You may now close the editing modal. When you return to the main images modal, click the Refresh button in the upper right corner and your new image should be visible as a thumbnail.
  • Inserting an Image: Selecting Insert from the menu will automatically insert that image into the HTML Editor canvas and dismiss the Images modal. You may also insert an image simply by clicking on its thumbnail.
  • Add to Favorites: When you select the 'Add Favorite' option on the menu, that image will be added to your Favorites category, which is easily accessible by clicking on the Favorites folder in the left column of the images modal.

Links

  • Insert/Edit Link: This button allows you to highlight text or images within the email canvas and then hyperlink them to a specific webpage. Upon highlighting your text or image, click the Insert/Edit Link button to open the modal.
    • In the Link URL field, enter the complete URL (including http://) of the page you want to link to.
    • In the Title box, you may want to enter a name that indicates what the link refers to. This usually includes the name of the page or site being linked to. This title will be visible when email recipients roll over your linked text or image.
    • All other fields in this modal are advanced options for experienced users and are not required for email creation.
    • To edit an exiting link you've created, simply click on the text or image and then click on the Insert/Edit Link button.
  • Unlink: Use this button to remove links completely. Highlight the text or click on the image you wish to unlink. Click the Unlink button and the hyperlink will be removed.
  • Anchor Link: Use this button to Anchor links from one part of your email to another part. Anchors are particularly helpful when adding a menu, table of contents, or FAQ section to your email. We recommend adding anchors to your email after you have finished composing and formatting it.
    • Select the place within your email that you'd like to link to by clicking that area.
    • Then click the Anchor button to open the Anchor modal. You will be asked to name your anchor. Click OK.
    • You will see a small anchor image appear in your selected area on the canvas.
    • Next, select where you'd like to place a link to that anchor by highlighting the text or image you want to link back. Click the Insert/Edit Link button to open the modal.
    • You will see a drop down box from Anchors, where you will find the names of the anchors you have currently laid out. Select the one you'd like to use and click Update. You may also enter a pound sign (#) followed by your anchor name, or a pound sign followed by your anchor ID instead of choosing from the list. The "Protocol" will automatically change to "Other". Clicking save will establish the anchor relationship.
    • You have successfully added your link. You can test your anchor and link by clicking the Preview button.

Miscellaneous

  • Insert Custom Character: Use this button to insert special characters and symbols not found on your keyboard, such as registered trademark symbols, ampersands, Greek letters and more. Click the place on the canvas where you'd like to use a special character, then click the Insert Custom Character button. Inside the modal, click on the character you'd like to use. The will dismiss the modal and insert the character into the canvas.

Tables

  • Insert a New Table: Use this button to insert a table in your email with the number of columns and rows of your choosing. If you wish to edit a table, click on the table within the canvas and then click the Insert a Table button again.
    • Cols: Select the number of columns.
    • Rows: Select the number of rows.
    • Cellpadding: Sets the amount of space between the contents of the cell and the cell wall. The default is 1. CELLPADDING is usually more effective than CELLSPACING for spreading out the contents of the table.
    • Cellspacing: Controls the space between table cells. Although there is no official default, browsers usually use a default of 2.
    • Alignment: Select how you want your table to be horizontally aligned in your email: Left, Right, or Centered.
    • Border: Select the size of the border you want to include around your table. Keeping the default of 0 will not put any visible border around your table. You may select a color other than black by using the Border Color selector in the Advanced options.
    • Width: Select the width of your table in pixels. This can be changed later within the email canvas by dragging the edges of the table.
    • Height: Select the height of your table in pixels. This can be changed later within the email canvas by dragging the edges of the table.
    • Table Caption: By checking this box, the top of your table will include a header row for a title or caption text. If you select a border, this row will not include it.
  • Table Row Properties: This button allows you to define characteristics of a specific row of cells within a table. Highlight or click within the row you want to edit and then click the Table Row Properties button to open the modal.
    • Row in Table Part: You may select whether this row is the table header, body, or footer.
    • Alignment: You may select whether the horizontal alignment of the text within the cells of the row should be left, right, or centered.
    • Vertical Alignment: You may select whether the vertical alignment of the text within the cells of the row should be at the top, bottom, or centered.
    • Height: You may select the height of the row in pixels.
      • Using the drop-down box at the bottom of the modal, you can decide whether to apply your above edits to the entire row, only the odds rows in the table, only the even rows in the table, or to all the rows in the table.

Using the advanced options tab, you may also define the ID, style, language direction, language code, background image, and background color of the row. Be sure to click the Update button when you have finished making your edits.

  • Table Cell Properties: This button allows you to define characteristics of a specific cell within a table. Highlight or click within the cell you want to edit and then click the Table Cell Properties button to pop the modal.
    • All functions within this modal are similar to those in the Table Row Properties modal as listed above.
  • Insert Row Before: Highlight or click within a row of cells in a table you'd like to add a row above. Then click the Insert Row Before button and a row will be added to the table above the one you highlighted. For both Insert Row actions, you may click on the entire table if you wish to add a row to the top/bottom of it using this tool.
  • Insert Row After: Highlight or click within a row of cells in a table you'd like to add a row under. Then click the Insert Row After button and a row will be added to the table below the one you highlighted.
  • Delete Row: Highlight or click within a row you wish to delete, and then click the Delete Row button.
  • Insert Column Before: Highlight or click within a column of cells in the table you'd like to add a column before. Then click the Insert Column Before button and a column will be added to the table before the one you highlighted. For both Insert Column actions, you may click on the entire table if you wish to add a column to the left/right side of it using this tool.
  • Insert Column After: Highlight or click within a column of cells in a table you'd like to add a column after. Then click the Insert Column After button and a column will be added to the table after the one you highlighted.
  • Delete Column: Highlight or click within a column you wish to delete, and then click the Delete Column button.
  • Split Merged Table Cells: If you have previously merged table cells in a row or column, you may 'unmerge' them using this button. Simply click in the cell you previously merged and then click this button.
  • Merge Table Cells: If you have a row or column with multiple cells you'd like to merge into one, simply highlight the cells you wish to merge and then click the Merge Table Cells button. Or you may click within a specific cell and then click the Merge button; a modal will pop up asking how many cells in the row and column you'd like to merge. You must enter at least one in each field. Make your selection and click Update. This action can be edited upon merging by keeping the cell selected and clicking the Merge button again.

Text Formatting

  • Select Text Color: Use this button to select the color of the text you want to use. You may either highlight the text and then change the color, or select a color before typing with this tool to be used throughout. Use the color picker to create a custom color, the palate to select a specific shade, or the named section to select a classic color. Notice that the HTML code for each color will appear in the lower right corner if needed.
  • Select Background Color: Use this tool to highlight certain text with a specific color or to select the background color or tables and cells. Simply highlight the text or click within the cells you want to insert a background color for. Then click the Select Background Color button and choose a color. Click the Apply button to see the color on the canvas. Please keep readability in mind as you choose text/background colors.
    • Note: While you are not able to make the entire canvas a different background color, you can still create emails that use a background color other than white. Create a table with one row and one column and resize it accordingly. Select a background color for the cell as mentioned above and compose your email, changing the text color as necessary.
  • Font Family: Select the style of the font you would like to use. Selecting a font from the drop down list will allow you to type in text in the selected font style moving forward. You may change the font style of existing text by highlighting it first and then selecting from the font family drop down list.
  • Font Size: Allows you to change the size of your text. Selecting a size from the drop down list will allow you to type in text in the selected font size moving forward. You may change the font size of existing text by highlighting it first and then selecting from the font size drop down list.
  • Bold: Allows you to make fonts bold. You can click this button to type text in bold font moving forward. You can make existing text bold by highlighting it first and then clicking this button or by simultaneously hitting CTRL + B.
  • Italic: Allows you to make fonts italicized. You can click this button to type text in italic font moving forward. You can make existing text italic by highlighting it first and then clicking this button or by simultaneously hitting CTRL + I.
  • Underline: Allows you to underline text. You can click this button to underline text moving forward. You can make existing text underlined by highlighting it first and then clicking this button or by simultaneously hitting CTRL + U.
  • Align Left: Aligns your text to the left side of the canvas or the left side of a table cell if you have entered text within it.
  • Align Center: Aligns your text in the center of the canvas or center of a table cell if you have entered text within it.
  • Align Right: Aligns your text to the right side of the canvas or the right side of a table cell if you have entered text within it.
  • Unordered List: Allows you to use bullet points to create a list. Clicking this button will insert a bullet point. Type in text next to it and then hit Return/Enter. Another bullet point will be inserted below. If you do not wish to keep this bullet point, simply click the Unordered List button again and it will be removed.
  • Ordered List: Allows you to use numbers to create a list. Clicking this button will insert a number '1'. Type in text next to it and then hit Return/Enter. The number '2' will be inserted below. If you do not wish to keep this number, simply click the Ordered List button again and it will be removed.
  • Outdent: Moves your highlighted text or image in line closer to the left side of the canvas.
  • Indent: Indents or moves your highlighted text or image in toward the right.
  • Remove Formatting: Removes all formatting from selected text, including font family, size, bold, italic, underline, etc. Highlight the text from which you wish to remove the formatting. Click the Remove Formatting button and it will return to the standard font and size. Font and size tags will be removed in the Source Code Editor as well.

Return to Emails