Content or WYSIWYG Editor

When editing a Page, Article or Product, the Content Editor can be found toward the bottom of the screen, below the settings section:

The "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, images and hyperlinks. You will have access to the WYSIWYG editor any time you create or edit a Page, Article or Product.

What's in this article

• Working with Text
• Embedding Images & Other Media
• Displaying Data with Tables
• Editing the HTML
• Undoing Changes

Working with Text

The HTML editor is similar to most word processors such as Microsoft Word. The size, style and alignment of text can be defined using the controls along the top of the editor:

1. Pre-defined heading styles.
2. Font size.
3. Bold, Italic & Colour.
4. Text Alignment.
5. Unordered/Ordered Lists.
6. Increase/Decrease Indent.
7. Insert/Edit Link.

Copying Text from Another Source

When copying text from a source such as Microsoft Word or another website, it is best to avoid copying the formatting and instead just copy the text. Once the text is copied, styles can be applied based on the site's CSS. This is because the source text's formatting may not be applied in the same way between different applications.

To paste text without formatting, click on the "Edit" menu and choose "Paste as Text". Formatting will not be carried over as long as that option is active.

Inserting a Hyperlink

Hyperlinks can be inserted by selecting some text or an image and clicking the "Insert/Edit Link" button at the top of the editor (#7 above):

The following options are available when adding links:

1. Enter a URL here to link to an external website.
2. Click "Browse Files" to link to a file in the File & Image Manager.
3. Click "Browse Website" to link to a Page, Article or Product on your site.
4. The text for the link.
5. The text that will be displayed when a user holds their mouse over the link.
6. Select a class to make the link appear as a button.
7. Select "Yes" if the link should open in a new window/tab. This is suggested for links to files or external websites.

Embedding Images & Other Media

Images and video can be added to the content area using the controls at the top of the editor:

1. Insert/Edit image.
2. Insert/Edit media (used for videos and other embedded content).

Adding Images

To add an image to the content area, it must first be uploaded via the File Manager. Once the image is uploaded it will be accessible to all Pages, Articles and Products. The following video demonstrates how to upload an image, insert it into a Page and change it's size:

1. Open a Page for editing.
2. Place the cursor in the content area and click the "Insert/edit image" button at the top of the editor (#1 above).
3. Click the folder icon next to "Source" to open the File Manager.
4. Upload your image(s) or select an existing image, then click "Insert".
5. Enter a description and change the dimensions if required. The "Constrain Proportions" checkbox will prevent the image from changing shape.
6. Click "Ok" to insert the image.
7. Select the image and click the "Insert/edit image" button again to make modifications.

Embedding Videos

Most online video hosting services provide "Embed Code" that can be used to play their videos on other websites. The following video will demonstrate how to embed a video from YouTube on your site:

1. On the YouTube website, right-click on your video and choose "Copy embed code".
2. Navigate to your own website, log into the administrative console and open a Page for editing.
3. In the editor, click "Insert/edit Media" (#2 above).
4. Click on the "Embed" tab and paste the code that you copied in step 1, then click "Ok".
5. Click "Save" to save the Page.

Changing the Background

To change the background, right-click anywhere in the content area and select "Background" from the context menu. The following options are available:

1. Change the background color.
2. Select a background image from the File Manager.
3. Select how the background image repeats:
   No Repeat: The image is only displayed once (default).
   Repeat: The image is repeated both horizontally and vertically.
   Repeat Horizontal: The image is repeated horizontally.
   Repeat Vertical: The image is repeated vertically.
4. Select whether a background image is fixed or scrolls with the rest of the page:
   Scrolls along with the element: The background scrolls when the viewer scrolls, as if the background is attached to the scroll bar. (default).
   Fixed with regard to the viewport: The background will remain fixed while the viewer scrolls past it.
   Scrolls along with the element's contents: The background scrolls when the viewer scrolls, as if the background is attached to the page contents.
5. Set the position of the background image (horizontal : vertical).
6. Set the size of the background image (horizontal : vertical).

Displaying Data with Tables

Tables allow you to arrange data into rows and columns of cells. To add a table:

1. Place the cursor in the content area, click the "Table" menu, then hover your mouse over the "Table" option.
2. Select the number of rows/columns and click to add the table.
3. Click on any cell to add content.
4. Rows, columns and cells can be added and removed by right-clicking on the table and selecting the appropriate option.

Table Properties

Right-click on any table and choose "Table properties" to customize the table:

1. The table's width, either in pixels (eg. 5px) or as a percentage of the available area (eg. 50%).
2. The table's height, in pixels or as a percentage of the available area.
3. The width between the cells, in pixels.
4. The width between the edge of a cell and it's content.
5. The width of the border, in pixels.
6. If checked, the top row of the table will be used as it's caption/title.
7. The table's alignment within it's container (has no effect if width is 100%).
8. Apply a CSS class to the table (see Responsive Tables below).
9. Edit advanced properties, including the table's "Style" attribute and it's background/border colors.

Cell Properties

Right click on any cell, select "Cell", then "Cell properties" to customize the cell:

1. The cell's width, either in pixels (eg. 5px) or as a percentage of the table's width (eg. 50%).
2. The cell's height, in pixels or as a percentage of the table's width.
3. Switch between a regular cell or a header cell.
4. For header cells, define whether the header applies to a row or a column.
5. The cell's horizontal alignment.
6. The cell's vertical alignment.
7. Apply a CSS class to the cell.
8. Edit advanced properties, including the cell's "Style" attribute and it's background/border colors.

Row Properties

Right click on any cell, select "Row", then "Row properties" to customize the row:

1. Switch between header, body and footer rows.
2. The row's horizontal alignment.
3. The row's height either in pixels (eg. 5px) or as a percentage of the table's height (eg. 50%).
4. Edit advanced properties, including the row's "Style" attribute and it's background/border colors.

Responsive Tables

Tables can be configured to resize themselves along with their container:

1. Right-click on any table and choose "Table properties".
2. Enter 100% for the width.
3. Select "Responsive" as the class, then click "Ok".

Editing the HTML

Users experienced with HTML may prefer to edit the underlying code directly instead of working through the editor. There are also situations where you may need to add HTML tags, such as iFrames, that are not directly supported by the editor. To edit the HTML code, click the "Source Code" button at the top of the editor:

Undoing Changes

ShoutCMS also retains a copy of each Page every time it is saved. To restore the previous version of a Page, click "History" under the "View" dropdown menu located at the top-right of the "Modify Page" screen:

For smaller mistakes, there are also undo/redo commands under the "Edit" menu, or you can use the CTRL+Z / CTRL+Y keyboard shortcuts (Command+Z or Command+Shift+Z on Mac).