The WYSIWYG Editor
The best thing about ShoutCMS is its HTML editor. This "What you see is what you get" (WYSIWYG) editor allows users to create stylized HTML content without any knowledge of HTML markup script. The WYSIWYG editor allows you to create text., set styles, and insert a number of items including tables, pictures, and hyperlinks.
A note about browsers: The WYSIWYG editor uses many advanced HTML features as it creates HMTL text for you. Some browsers do not support all the features of the editor, specifically formatting options when creating/editing tables have been optimized for Firefox. While editing functionality is supported differently by browsers, the content created for you page will display correctly regardless of browser. (We regularly test browser compatibility as new browsers are released to the market).
HTML Editors in general work a little differently than Microsoft Office and other word processors because of the nature of HTML and how the editor works with the site's cascading style sheets (CSS). To build a consistent look and feel across the many pages of your site, there are some important do's and don't to follow when creating content with the editor.
- Define formatting standards for your site by defining default fonts, how bold, italics, and underline will be used.
- Use Styles (Heading1, Heading2, etc.) instead of manually changing the font and font size within the text of your page.
- Use a tables when presenting content in columns.
- Use the editor to embed pictures within your text to bring the content to life.
- Use images that reinforce the content. Picture properties can be modified to float left/right and create padding that separates the picture from the text. It is easy to insert a hyperlink on a picture.
- Develop content that supports responsive design (avoid defining tables and other content that have fixed width). Define widths in terms of "percent" instead of "pixels".
- Define Content Templates that can used as a basis when creating pages/products/articles with similar formats (e.g. tables, embedded content). Using templates saves time and increases the consistency of your site's style.
- Avoid pasting formatted content copied directly from a word processor. Word processors use a different method for formatting text which overrides the site's CSS which may result in inconsistently styled pages within the site, and eliminates the ability to change global styles through the site's CSS.
- Don't use repeated spaces to create "columned" content. Different browsers will display these spaces. Place the content in a table. Tabs can also be inconsistent when your page is displayed.
Migrating Existing Content
Importing existing content from other sources, for example when migrating a page from an existing website, involves importing text, images, attachments, and external links from the external source. While the WYSIYWG editor is used to combine this content, the content must be copied in the site before it can be referenced (existing links to external content is an exception).
The first step is to upload images and other resources that will be used by the page to the File & Image Manager (or Page Gallery). Consider the aspect ratio and size of the images when doing this. Note that images and resources can be uploaded on an as needed basis at any time while using the editor.
Importing Unformatted Text
Although your source content is formatted, it may be easier to strip off this formatting, import the raw text, and apply new formatting based on site’s CSS. This is the recommended approach with the exception of importing content that is temporary or when source formatting needs to be preserved.
The easiest way to remove formatting from existing documents is to use a text editor (e.g. Windows Notepad). You can either open the formatted document in Notepad, or copy/paste sections of the document into Notepad and then copy/paste the content from Notepad to the ShoutCMS Editor. This process is simple to do when Notepad and ShoutCMS are both opened on your workstation.
Importing Formatted Text
Importing formatted text should be done through the editor’s “Paste from External Source” button located in the Editor’s menu (Icon - Clipboard with ‘W’). Place the cursor where the text is to be placed and click on the Paste from External Source button. A pop-up box will open that can be used to paste the existing content. (This utility converts MS Office formatting to HTML format. Formatting is not removed. Formatting specifications from the destination may override the site’s CSS definitions.)
Using Content Templates
Using Content Templates can save time when creating pages that have a similar format - for example a product template that consists of a table, image, description, and pricing information). Content Templates are created in the Site Settings area. Once created, they can be used when creating a new page on your site. The page template selector is located above the editor window.
Selecting a Content Template will replace any existing content on the page so use this feature before creating/importing your content. The ShoutCMS "Clone Product" feature is similar to using Content Templates except the clone product copies the entire page and product attributes as default when a new product is to be created.
If you are having a difficult time making your text appear the way
you want, you may want to try using tables. They are an alternate way to
align your content in columns. To insert at a table, place the cursor
where you want the table (generally on a new line), and click on the
'Table' option of the editor. Once created and editing content in the
table, the floating Table-menu is available to change the table's
properties (width, rows, columns, borders, etc.).
It can take some time to get used to using the tables, but they help to create professional looking web pages.
Adding a Hyperlink
A hyperlink can be added by entering the display text, highlighting it, and clicking on the hyperlink icon.A pop-u menu will display your options and prompt you to select the destination, modify the link text, enter hover-over text, and select whether to open the link in a new browser window. When linking to content within your site, you should click on the 'Browse Files' or 'Browse Website'. These two options insert smart-links that automatically will adjust when you modify the destination page. Right-clicking on an existing hyperlink will open the pop-up menu so you can make modifications. Documents and images not already uploaded to your site's file manager can be uploaded while adding a hyperlink.
Linking to a Site Document
Links to documents (e.g. PDF or other) held in the File/Image Manger are inserted as a hyperlink using the above process and selecting the 'Browse Files' option. Note that some documents cannot be uploaded because they are virus threats.
Adding an Image
Images can be added to the editor section of your web page by moving the cursor to the location where the image is to be inserted (this may be inside an existing table) and clicking on the Image icon on the Editor menu. A pop-up menu will open and guide you through the process of selecting an image and modifying how the image will be displayed on the page. Right-clicking on an existing image will open the pop-up menu so you can make modifications. Once added, a hyperlink can be associated to the image.
Other Embedded Content
YouTube and other embedded content can be imported using a content template or the buttons on the editor menu. In some cases, embedded content consists of a second of HTML code - for instance a Google calendar link. Placing this type of content into your page must be done from the editor's Source View. (Google Analytics tags should not be imported using this method - the Analytic code is entered from the Site Settings Area)
The Source View shows your page as the HTML source view. A base knowledge of HTML is valuable when looking at or modifying the page's HTML source. You may want to contact the ShoutCMS support desk for assistance if you are unfamiliar with editing HTML.