How can we help?

The Content module allows you to compose and create whatever content you like and add it to a page on your website. You can add images, text, sectional layouts, even embedded code for things like YouTube videos or other special content.

 

How to Create Your Website Content

Start by logging into the system and going to Website > Website Editor. Go to the page on your website where you want to add your new content. If you are creating a new page or working with an unpublished page, click the down-arrow for the drop-list that says Website Editor and click on Pages. Then either click to Create a New Page or click the Title of an existing page in the list to go there.

1. Click on the +Add Content link at the top and click Add Body Content if you're creating content for the main part of your page.

2. Find the Content module at the top of the list and click the Add button for it.

At this point, the Content Editor will load for you. A great browser to use when working with this module is Firefox. One reason why is indicated by the arrow below: In Firefox, you'll see a flashing cursor, and you'll be able to highlight images and work with content in the window more easily than with Chrome. This article will give an overview of major features of the editor, mainly for working with text and images. Please see the numbered sections below for detailed descriptions of each.

1) Insert/Edit Link

To create a link, first you need to choose the content that will become linked. You can highlight text, or you can click on an image and make your selection into a clickable link. So first, highlight what you want to become clickable, then you have two choices about how to open this tool: a) you can click the button numbered 1 in the image above, or b) you can right click after making your selection, a menu will pop up and you can click on Insert Link to create the link (see below about the pop-up menu).

The Insert Link window will pop up, as in the example above with the image being linked to Coleman's website. Paste the URL for the page you want them to go to when they click the link into the URL field. If you're doing a link to a page on your site that is in your Website > Pages list (all pages that are not products, classes, events, or other module-created pages), you can click on the Search Server button on the right and it will bring up a list of your pages. Click on the one you want, and it will insert the URL for you. To finish your link, click the Ok button.

For on-site links, you want the Target set to None. For links to files or off-site links, you want the Target set to New Window, which will open the page in a new tab of the browser so the visitor is not taken away from your site. For more information about linking, please click here: How to Create Links to Pages, Files, and Email Addresses.

2) Insert/Edit Image

In the content editor, either right-click on an image you want to replace or left-click your mouse where you want the new image to go. If you are changing an existing image, your right-click will pop up a small menu: click on Insert Image to open the Insert / Edit Image window. If you are putting in a new image, either right-click and use the menu or you can click on the Insert/Edit Image button in the controls above the area in which you're working (it looks like a photo of a mountain, look in the top row of buttons below).

In the Insert / Edit Image window, if you are changing an image to a new one, you should write down the Width and Height so you can change the new image to the same size. If you are bringing in a new image, you may need to try several sizes, saving the image (see below) to see how it fits.

To load the new image, click on the Browse Server button (the button to the right side of the Source field).

You will see the Browse Server window open, with some of your site images visible. If your image is already on the server, click on it. If you are uploading a new one, click on the button for Upload File.

In the Upload File window, click on the green Add Files button and browse your computer for the image(s) you want. You can also just drag and drop images into the gray area below the buttons, if you like.

When you find your image(s), if there is only one you need, you can double-click on it (or click on it once and click the Open button at the bottom). If you want to load multiple images, you can click on each separately while holding down Ctrl (Command if you use a Mac) and then click Open. If you are selecting all of the files in a folder, you can do Ctrl + a (Windows) or Command + a (Mac) and then click Open.

You will see thumbnails of the images you are uploading in the Upload Files window. Click the blue Start Upload button and the image(s) will upload. When they are finished, the Upload Files window will disappear and you will again be looking at your Browse Server window.

You will see the image(s) you just uploaded at the top of the list. Click on the image you want.

You will see the Width and Height for the image, as well as its URL. You can adjust the Width or Height as desired and click the other dimension and it will adjust to fit. ADD ALTERNATIVE TEXT TO EVERY IMAGE: The Alternative Text area is where you can enter a descriptive phrase or sentence about the image so the search engines will know how to index it for web image searches. Doing this will increase your search relevancy for the whole website, so we strongly encourage you to do this for each image.

In the Advanced tab, you have other options for formatting your image. You can set Alignment (the way the image lines up to text) and the standoff of how far the image is separated from the text in pixels (using the Horizontal Space and Vertical Space fields, for horizontal and vertical standoff).

When you are finished, click OK, and then you can use the resizing 'handles' around the image to adjust further as necessary. When your work is done, remember to click the Save button at the bottom to bring the changes live to the web page.

3. Insert / Edit Table

If you need to do a small layout of rows and columns for content on a page, you can easily do it with a table. Tables can be extremely useful in lining up information and even images in nicely aligned rows and columns, and creating one is very easy. You can either click the Insert/Edit Table button, or you can right-click anywhere in the blank area of the editor and select Insert/Edit Table from the pop-up list.

In the drop-list click on Insert Table, and a grid window will pop out allowing you to choose how many columns and rows you want to start with. You can always add more later if needed. Just drag your mouse across the grid window until the proper column/row dimensions display (e.g. 3x3, as in the example above) then click, and the table will be inserted. At first, it will be extremely small, but you can use the sizing handles at the corners and sides to drag it to more appropriate dimensions.

You can then enter images and/or text in the cells of the table. The table will auto-size to accommodate whatever you put into it, so you may need to manually restrict the width of your content, especially with images (see below about Responsive content restrictions).

We recommend not making any table wider than three hundred pixels for your website. The reason for this is that in a mobile device, the table will require your visitor to scroll from side to side in order to view the content if it is much wider than 300px. If you need to work with columns and rows that are wider than that minimum, please consider using Divs instead (click here to read more about Divs vs. Tables: How to Add Columns to a Module: Divs vs. Tables). Having a table that is too large on one of your web pages will cause the search results for that page to suffer, so please be careful!

4. Insert Template - Adding Preset Div Columns of Content

The Insert Template tool allows you to add columns of content that are evenly distributed in proportions you choose. You can have two, three, or four even columns. You could have two narrow columns and a double-width middle column, or any number of other useful combinations. The columns are ' Divs', short for vertical content dividers, and you are able to choose the Divs you want from a list of ratios. So in the list pictured below, a 1-1 set of Divs would be two even columns. A 1-1-1 set of Divs would be three even columns. A 3-1 set would be a triple-wide column on the left, and a narrow one on the right.

To add your Divs, click on the Insert Template tool, click on the ratio of Divs you want, and you will see faint lines of empty boxes that will stretch vertically as you add content to them, and they'll stretch as far as you need vertically, but anything you add to a Div will not display any wider than the column.

Also, Divs will automatically give some padding on each side to whatever you put in them, about 20-pixels to a side. In the image above, you can see the cursor line just below the Text Color button on the far left, and that is a good example of the space Divs add on each side. To add content to a Div, just click inside the box and either type or paste text, or click to add an image in the normal way.

5. Source Code

The Source Code area of the Content module shows the HTML code that defines the content and how it appears on the page. If you're not familiar with HTML, that's okay: anything you need to do with this highly technical tool you can always either call or write to our Support team, and we'll be happy to take care of it for you.

This area is used for things like embedding YouTube and Vimeo videos, embedding Google Maps, and code for things like Constant Contact mailing list forms or other third-party code that does some kind of function on a page. If you have a third-party app or service that you need to work with our system, you need to acquire the embed code for that function and email it to us at support@rainpos.com. We can't promise the code will work with our system, but about 95% of the code we've come across works just fine, and we'll be happy to try for you!

6. Formats

Your Formats button allows you to format text in various ways. It is recommended that before you apply a Format to text, that you hit your Enter button a few times so that you have unformatted blank lines below to work with after you apply the Format. If you don't do this, anything you enter after will be in the same Format, and that can be frustrating.

 

Steps for Formatting Text:

1. Click your mouse at the end of the text you'll be formatting and hit your Enter button a couple of times to give yourself some blank lines below the text.
2. Highlight the text you want to Format.
3. Click the Formats button and in the drop-list, click the way you want to format it.

Here are the different ways you can format:

1. Headers - In the Headers menu, you are able to format text in a larger, and in some cases bold font (depending on your site design). Of all of the header formats, the one to be careful about is Header 1. On any single page of your website, you want only one of your headings to be Header 1 and the reason for this is because the search engines use that as the main theme for the page. If you have multiple Header 1 headings, the search engines will count this against you. Other headings on the page might be Header 2 or smaller, and you should experiment with these and plan to do them the same way on each of your pages for a consistent use of content. One of the beauties of this function is that this tool takes all of the busy work out of formatting your text, applying size, color, boldness, etc. in the same way each time with just this single click.
2. Inline - The title for this is a little vague, but basically this pop-out list gives you more options for formatting highlighted text than the main Content Editor offers. In the main menu, you can do only Bold and Italic, but in the Inline menu, you can do any of the formatting options listed below. The Code option allows you to display code without having it apply the code styling, so if you ever should need to display some code on a web page, format it in that way to do so. Here are your options:
   
   
   
   
   
   
3. Blocks - This area allows you to format text that is already in place in different ways. Setting text blocks as Paragraph will apply a little spacing below the text block, as seen in the image below, if you look at the space between the first and second paragraph of filler Latin text. You can format a block of text as a Blockquote for text that needs to stand out as a quote or just for emphasis, as visible below in the third paragraph. The Div format will separate the block of text as a single-column Div that can then have further formatting applied to it, but it won't visibly be different from the text above or below it until further formatting is applied. The final block type is Pre, short for Preformatted Text, and allows you to apply spacing and line breaks as needed. For example, W3.org (an awesome free educational website about web code), uses the verse from Shelley's To a Skylark as an example of when formatting like this is necessary. If you copy and paste the text with all of the line breaks and spaces, the web browsers take all of that out and display it just as line text. The Preformatting places the text in a box and preserves the special spacing.
4. Alignment - These are the standard Alignment options you would expect in any text / content editor, allowing you to Left Justify, Center, Right Justify, and Justify text. Any element such as an image or video frame can also be aligned with the first three choices in the manner you prefer. 
   
   

 

Please Note: If an image won't move to the proper alignment when this formatting is applied, you need to click here for steps on how to apply the formatting you want: Having Trouble Centering an Image? Here's How.

 

Once you have your content displaying in the editor the way you want, click Save so it will be saved to the web page. Be careful not to navigate away from the editor before you click Save, or you will lose your work!