1. Click the "Add Panel" button in the toolbar at the top. This will open a list of panel options on the right-hand side of your screen.
2. With your mouse hovered over the newly displayed "Panel Options" menu, scroll down until you find the "Custom Panel" option, then click it. A custom panel will be added at the bottom of your page. If your mouse is not hovered over the "Panel Options" menu, the page will scroll instead of the menu options.
Note: Because custom panels are empty initially, it may not be obvious that a panel has been added. Hover your mouse near the bottom of your page's content area. The empty panel will be highlighted with a yellow border when the mouse is over it. Once you see this, right-click your mouse to bring up a list of options (if you're using a laptop without a right mouse button, hold the "control" key on your keyboard as you click).
If you want to change the appearance of the panel, or give the panel a heading, you can do so by adjusting the "Panel Settings".
1. Right-click on your custom panel and select "Panel Settings". This will bring up all of the panel options so you can control how everything appears.
2. When you're done making adjustments, click "save" to apply your changes to the panel. These changes will not be made public until you publish the entire page by clicking "save" in the top toolbar.
At some stage it's likely you're going to want to change the order of some of the panels you've created. Doing so is very easy.
1. Hover over the panel you wish to move (this process is the same for every type of panel, not just "Custom" panels).
2. On the far left side of the panel you will see a thicker area with a faint, striped pattern. Hover over this area until your mouse's cursor changes to the "move" icon (looks like arrows in all directions). When it does, click and drag your mouse upwards or downwards around the page to position the panel. A gray striped area will indicate where the panel will be positioned when released. When positioned correctly, release your mouse button.
Note: Sometimes you'll want to drag the panel beyond the area that's visible on the screen. In this case, simply hover your mouse near the top or bottom of the screen and twitch the mouse back and forth a bit to keep the screen scrolling.
To edit text in the text editor, simply click on the text and start typing as you would in any word processing software, like Microsoft Word®.
You can set the style of text and images using the "Formatting Styles" dropdown menu. Using this section as an example, just above we've set the text "Using The Text Editor" to the style "Heading 2". To do this, we simply highlighted the text "Using The Text Editor", clicked the "Formatting Styles" dropdown menu, and selected "Heading 2".
The "Formatting Styles" dropdown also allows you to give images a border, or to float them left or right of text. To do this, simply click on the image, then select "Image Right (with border)" to add a border and float the image to the right of text. Please note that these "Border" and "Left/Right" options are exclusive to images; therefore, you will not see them listed in the dropdown unless you have an image selected.
To make text bold, italic or stikethrough, click and drag your mouse to highlight the words you'd like to apply the style to, then click on the appropriate button in the text editor toolbar.
To change the color of text, highlight the text you wish to color and click on the "Text Color" icon in the text editor toolbar. You can choose a color from the existing options, or click "More Colors..." to choose something more specific.
To link to a file or web page, highlight the text you wish to make a link and click the "Link" icon.
If you are linking to a web page or a file on another website, cut/paste the web address you'd like to link to in the "URL" field (eg. "google.com").
If you want to link to a file on the server, or if you'd like to upload a new file to the server, click the "Browse Server" button.
The "Display Text" is the text that will make up the link. In the example image above, the text "Link To Google" will link to "http://google.com".
When you're finished, click "OK".
To add an image to the text editor, place the mouse cursor at the beginning of a paragraph (90% of the time you'll want the image to be positioned at the start of a paragraph, but you can place the cursor anywhere you like), then click the "Image" button. A dialog will open. If you are using an image on another website, enter the website address into the "URL" field. If not, click "Browse Server" to choose an existing image, or upload a new image.
You can adjust the width of your images by setting the "width" field. We recommend using percentages (eg. "100%", or "50%") rather than full numbers (eg. "444" or "3600"), because they will adjust better when the website is viewed on mobile devices.
Images are processed and thumbnails created automatically behind the scenes. If you are uploading lots of files (or several large files) at once, there is a chance that some thumbnail images may appear broken initially. This is almost always because the back end is still working on processing your images. If you've uploaded hundreds of files, please wait several minutes, then close and re-open the file browser. All of the thumbnails will now appear. If not, and you have given the system a reasonable amount of time to process the images, try re-uploading the broken files.
The "Formatting Styles" dropdown has some image-specific styles that will allow you to float the image to the left or right of text, with or without a border. Simply click on the image, then click the "Formatting Styles" button to display the new styling options.
To add an icon, click the "Insert Font Awesome" button ("Font Awesome" is a large collection of popular, open source web icons).
To add a table, click the "Table" button.
To add a horizontal divider line (sometimes useful to visually break up content), click the "Insert Horizontal Line" button.
To style a paragraph (or several paragraphs) as a quote, highlight the text you want and click the "Block Quote" button.
To remove styles from text (bold, italic, colors, etc.), highlight the text you'd like to make "normal", then click the "Remove Format" button.
To view (and/or edit) the HTML source code, click the "Source" button.
