Simply click on the component viewer button to launch the viewer. This launches a modal window that is about 900px wide, so it works best on a computer that has a large enough browser window.

Each component in the viewer is separated by a dark, thick horizontal line. When you hover your cursor over the component, the component will turn lighter in color. Click anywhere on the component and the modal window will close and the component will be inserted into the WYSIWYG editor after all the existing content that might be in there. If you want the component to appear someplace else in the document, you will need to manually edit the source code (see step 4).

To close the modal window without inserting anything, click anywhere on the webpage outside of the modal window, or click the "x" icon in the upper right corner of the modal window.

When you insert a component, the last line of the code has an invisible

tag attached. This is how you can tell the end of the component if you look at the source code (see step 4) and it keeps the proper spacing between components when you add more than one component.

While you are designing and creating your HTML webpage or e-mail, you want to frequently see how it will look. Use the "show preview" button that will launch a modal window and easily allow you to toggle back and fourth between your editor and the preview. There is no need to save the content before seeing a preview.

The preview button shows the content as it will appear on the finished webpage or the e-mail. Despite it's name, the WYSIWYG editor is not what the actual content looks like. It does not fully render all of the classes. Also, when you change colors using the color placeholders, these will not render in the preview until you save the content. This is why the preview is needed.

When you view the preview, your header will be added as well, but not the menu. If you are viewing an e-mail preview, the e-mail footer will also be added to the preview.

For the most part, you can simply select text in the editor and replace the text with your custom text, add in new elements, etc. You can generally click where you want and then start typing. However, at times you will find that the cursor will not go where you want it to go. In these times, use the "source code" button in the WYSIWYG editor to open up the HTML code editor.

You need to have a basic understanding of HTML to know where to put things, and to ensure you don't remove any tags that need to be there. But once your are in the source code, you can place your cursor where you want and start typing, then return to the standard view. This option is great for cleaning up code or tweaking your code to perfection.

Don't forget to spell check your content! Most browsers have a spell checker built in, but you will have to check this in the code. When in the code window, right-click anywhere and select Check Spelling.

The color key makes it simple to use your theme colors without having to know the hexadecimal colors, as well as being able to change color themes and not needing to go through all your code and change the colors paga by page!

The colors are represented by #colorXX, and then translated by the software. Use the color codes just as you would hexadecimal values. For example:

 <hr style="display: block; border-top: 3px solid #ffffaa;" />

will show up in your editor, because the server translated the code for you to view in your editor. If you want to change that color, replace the "#ffffaa" with "#colorXX" (where XX is the number and letter).

The buttons and panels will show as classes, and you could just change those to get new colors. For example,

 <div class="uk-panel uk-panel-box uk-panel-box-primary">

would show as the dark blue in this case, so if I wanted the panel to be light gray, I would change the "uk-panel-box-primary" to "uk-panel-box-secondary".

If you want to insert a button, simply put your cursor in the editor where you want the button to appear, then click the button you want to insert. The button will then appear in your editor. You will still want to edit the button—you will at least want to edit the button's text and the URL the button is linked to. Use your code viewer button in the editor and look for the button code:

<p><a class="uk-button uk-button-primary uk-button-large" href="#">Text of Your Button Here!</a></p>

You will want to put the URL of the page you are linking to in the "href" tag, replacing the "#", and replace "Text of Your Button Here!" with the text of your button.

Inserting a badge follows the same procedure as inserting a button.

As for the icons, clicking the dropdown button will show the collection of over 100 icons. When you select the icon, it will set the code to the left of the button for you to copy and replace the code. So for example, if you see

<i class="uk-icon-question-circle"> </i>

and you want to use the heart icon instead of the question circle, replace "question-circle" with "heart". Also note that this editor does not like tags with nothing between them, so that is why the " " (non-breaking space) is needed.

The component viewer, by default, consists of many standard components designed by the developers of DoWellWebTools. But the real magic of the components is your ability to create your own and save them to this viewer. This is a very easy process.

First, create your "component" in the WYSIWYG editor—a component is just any code that you want to use again without having to recreate.

Next, click the "Create Component From This Webpage / E-mail" button (the button text will be different if you are creating a webpage or HTML e-mail). This will check your code for any major errors and save the code as a component if there are no major errors in the code (e.g., unbalanced tags that are usually a result of errors with manually modifying code). You will see a confirmation message under the button:

Because the component viewer is already generated, you will not be able to see your component in the viewer until after you reopen any page that has the component viewer. Your components will always show up before the default ones in the viewer.

To delete your component, just click the red X icon near your component in the viewer.

There is no editing feature. To edit, simply insert your component, edit it, and save it. It will save as a new one, then just delete your old one.