Want to build a dynamic experience? Don't know how to write HTML?
Event Cloud has you covered with our What You See Is What You Get (WYSIWYG) HTML editor.
When making edits, you can use a WYSIWYG HTML editor for custom messaging areas:
- The page or message you are currently editing will be visible above the WYSIWYG editor
- All options showing a
include a drop-down menu for multiple options
Event Cloud's WYSIWYG HTML editor is broken up into a two-section toolbar, and a work area:
HTML builder section: (Full Instructions provided in glossary section below)
Fonts & text styling section: (Full Instructions provided in glossary section below)
Work area : (the image below is provided as an example, your screen will look different)
Glossary:
HTML builder toolbar section icons
![]() |
|
![]() |
Clear your work area of any text or formatting, and open a new document. |
![]() |
Print a black and white preview of your work area |
![]() |
|
![]() |
Click on the "Undo" button to undo changes you have done one by one. |
![]() |
Click on the "Redo" button to redo changes you have undone and want back in place. |
![]() |
To cut a portion of the document, highlight the desired portion and click on the "Cut" button (keyboard shortcut – CTRL + X for PC and CMD + X for Mac). |
![]() |
To copy a portion of the document, highlight the desired portion and click on the "Copy" button (keyboard shortcut – CTRL + C for PC and CMD + X for Mac). |
![]() |
To paste a portion of code or text into your document, click on the area of the document you would like to paste to (a blinking cursor will appear in the active area) click on the "paste" button (keyboard shortcut – CTRL + V for PC and CMD + V for Mac). |
![]() |
To paste as plain text (removes any text formatting), click on the "Paste as Plain Text" button. This will open a new window where you can paste and then insert your text without any formatting (keyboard shortcut – CTRL + Shift + V for PC and CMD + Shift + V for Mac). |
![]() |
Select all text or formatting for any currently active row, column, or text area |
![]() |
Find and replace any front-facing (what the visitor sees) with another string of text. |
![]() |
|
![]() |
Insert or Edit an image into your chosen active work area (a blinking cursor will appear in the active area) |
![]() |
To create a hyperlink, select the text or image for the link, and then click on the "Insert/edit link" button. The full URL of the page to be linked can be typed in the URL text box. A target window information (optional) can also be supplied. When finished, click on the "Ok" button to insert the hyperlink you just created |
![]() |
To insert a special character, click on the "Insert Special Character" button. A pop-up window will appear with a list of special characters. Click on the character to insert it into your web page. |
![]() |
Adds a blank line over a Horizontal line under your text. |
![]() |
To create an anchor, select the text or image for the anchor, then click on the "Insert/edit anchor" button. A pop-up window will contain existing anchor information. Enter the name of the anchor and click on the "Ok" button. |
![]() |
Used mostly in formatting a page for printing Page breaks won't show up front-facing (what the visitor sees) on the page, but will break up the page into multiple pages when printing. |
![]() |
Several different formatting options for inputting time and dates |
![]() |
Non-breaking space is a character entity that can: Create white space between words or web page elements stop the browser from breaking a line in the wrong place. |
![]() |
|
![]() |
Adds/removes the outlines of tables and other elements, for visual purposes only. |
![]() |
Show any blocks of HTML visually in your work area: paragraph, div, blockquote, pre. |
![]() |
Adds a dotted line around cells, tables, and rows to make them easier to see in your layout |
![]() |
Shows a preview of what your page will look like to your front-facing visitor (what the visitor sees when they visit) |
![]() |
Opens your current work area and HTML builder bars in the full window of your browser. |
![]() |
|
![]() |
Turns selected text into bold text. |
![]() |
Turns selected text into italicized text. |
![]() |
Turns selected text into underlined text. Please note: on most websites, the underlined text usually means that a word or phrase is a link to another web page. In this case, however, the underline formatting does not create a link (to create a link, see the "Insert/Edit Link" Button ). |
![]() |
Turns selected text into |
![]() |
Turns selected text into superscript text. |
![]() |
Turns selected text into subscript text. |
![]() |
Contains multiple options for HTML text formatting, Headings, Inline fonts, Blocks, and Alignment |
![]() |
Removes any text or HTML formatting from the selected part of the work area (a blinking cursor will appear in the active area) |
![]() |
|
![]() |
To insert a table, select the desired location, then click on the "Insert Table" button. A new window will pop up showing a 10X10 grid of squares. Dragging your mouse over the grid will fill squares in a Column X Row order. After finding the correct size for your table click the corresponding square in the grid to add the table to your work area. |
![]() |
Width - the width of the table; Height - the height of the table Advanced options include |
![]() |
Delete the highlighted table in your work area |
![]() |
Here you can edit the alignment, background color, and several other properties of the cells of the table. |
![]() |
Here you can edit the alignment, background color, and several other properties of the rows of the table. |
![]() |
Here you can edit the alignment, background color, and several other properties of the columns of the table. |
![]() |
|
![]() |
Takes you to the HTML Source Editor so that you can directly edit the HTML source code. |
Fonts & text styling section:
![]() |
Click on the "Undo" button to undo changes you have done one by one. |
![]() |
Click on the "Redo" button to redo changes you have undone and want back in place. |
![]() |
Used to add HTML formatting to highlighted text |
![]() |
Turns selected text into bold text. |
![]() |
Turns selected text into italicized text. |
![]() |
Moves all selected text to the left. |
![]() |
Centers all selected text. |
![]() |
Moves all selected text to the right. |
![]() |
Moves all selected text to the left and the right. |
![]() |
![]() |
![]() |
![]() |
![]() |
To decrease the indent of a paragraph, click on the "Decrease indent" button. Each consecutive click will move text further to the left |
![]() |
To increase the indent of a paragraph, click on the "Increase indent" button. Each consecutive click will move text further to the right. |
![]() |
To create a hyperlink, select the text or image for the link, and then click on the "Insert/edit link" button. The full URL of the page to be linked can be typed in the URL text box. A target window information (optional) can also be supplied. When finished, click on the "Ok" button to insert the hyperlink you just created |
![]() |
Insert or Edit an image into your chosen active work area (a blinking cursor will appear in the active area) |
![]() |
Print a black and white preview of your work area |
![]() |
Shows a preview of what your page will look like to your front-facing visitor (what the visitor sees when they visit) |
![]() |
Choose the font family i.e. Arial, Arial Black, etc... for your currently active work area/table, cell, row, or highlighted text |
![]() |
Choose the font size for your currently active work area/ table, cell, row, or highlighted text |
![]() |
Choose the text color for your currently active work area/ table, cell, row, or highlighted text |
![]() |
Choose the background color for your currently active work area/ table, cell, row, or highlighted text |
Tips for success:
HTML can be daunting! Not sure what the definition of an Html tag is? Please see this: HTML reference
Comments
Please sign in to leave a comment.