Click here for help located on the CKEditor documents site.
To edit the content of a specific page on your site you first have to go to click on (1) Content, then click on Edit Content then finally on an available page. An example of a page list is seen below. You may also select any of the available editor options on the right. (2) Open in Source View causes the editor to start up in source view. This option will remain persistent in your session unless you decide to change your selection.
(3) The three options in Editor Options allow you to see how your css will act for that page on that type of device. See special note about using this feature. Warning, this feature does not provide an accurate representation of what it will look like (at this time). Using Mobile will only allow you to open the page with mobile style sheets. The same is true for the touchscreen. To simulate a smartphone it is recommended to use Google Chrome. By pressing the <Ctrl>, <Shift> and < i > you get something like below. (1)This drop down allows you to select the type of mobile device in the simulation. Press <F5> to refresh the style sheets. (2)This button toggles between desktop and mobile views.
(4) By default, User Page Default is slected. This means that whether or not the style sheet are loaded is determined by the page attributes. To find out more about Managing Page Attributes click here.
Typically, pages open with the site styles to provide a WYSIWYG view of your page as you edit. Pages created with the HTML return message pages will open up without site styles by default because the site styles won't be available in an HTML message unless you add the styles in the content of the message. (4) You may click on Use Site Styles or Disable Site Styles to override the default page settings.
(5) By default, a page is active when it is created. You may deactivate a page if you no longer want that page to be visible to the public. When you deactivate a page, attempting to go to that page redirects to the home page. Furthermore, if it is in the menu, it will be automatically omitted. To re-active the page, simply re-check the active checkbox. Note that the sitemap.xml file is re-written every time you activate or deactivate a page to add or remove it from the site map. Other events that rewrite the site map are creating or deleting pages, and saving menu items.
Once you select the page you wish to edit, you will be taken to that specific page; there will be icons at the top of the page with additional options at the bottom; the icons and options you should see are shown below:
(above edit window)
(below editor window)
Pasting from other sources
To paste text from an existing document, click on the “Paste as Plain Text” icon as highlighted below:
A box will appear when you click the “Paste as Plain Text” icon as shown below. Paste your text in the box; once finished, click on “OK” to return to editing your page. (Note: This process removes special formatting (Microsoft or Apple) that is not compatible with the web. Pasting text from a Word document directly onto the page can have unpredictable results.)
Adding links
To insert a link in your page, select the text or image that you want to be the link and click on the “Insert Link” Icon shown below:
The following box should appear:
Type a web address in the “URL” Box, or if you wish to insert a link to an existing page or document from your site, click on the “Browse Server” option. In the directory tree, select "file", and the directory will open a window as shown below:
Each box represents a different page or document from your respective website. Double-click on the box for the specific webpage you wish to link to the page you are currently working on.
Adding images
To add a picture to your page, click on the “picture/image” icon shown below:
When you click on the “picture/image icon, the following box should appear:
You can choose to add images already used on your website, or upload new pictures from your computer. To add an image currently used on another page of your site, click on the “Browse Server” option, as shown below:
In the directory tree, select "Image", and, the following box should appear:
Select the picture you wish to use by double-clicking on the picture. The picture will then appear on your page-in-progress.
There are two ways to upload a picture to your website. The first is to
select it from a file on your computer, and the second is to copy the
picture from another website. If you
choose the second way to upload a picture, MAKE SURE you have
permission from the Website Owner to use that picture!
UPLOADING A PICTURE FROM YOUR COMPUTER FILES
To upload a picture from your computer, select the upload drop-down button (outlined in red), as shown below:
Click on the “browse button” (outlined in blue), as shown below:
Browse to your picture (as shown below )and select the picture, then click
on the "open" button in the dialogue box.
When you click on the upload button, the path to the picture appears next
to the "Browse" button. Once the path appears, click on the upload button
(outlined in red), as shown below:
Once the upload button has been selected, the picture will appear in your
image directory to uploaded to your webpage. This may take a little time.
The Breeze Website Builder™ allows you to upload pictures up to 1024 x 768
pixels.
UPLOADING A PICTURE FROM ANOTHER WEBSITE
To upload a picture from a websitr, select the Copy from URL drop-down
button (outlined in red), as shown below:
Open a second browser tab and go to the website page your picture is
located on. Right click on the picture, and a dialogue box will appear
overlapping that picture. Highlight and select "Copy Image Location" from
the menu, storing it in your browser, as shown below:
Go back to your Breeze Website Builder ™ tab, and place the cursor inside
the "copy from URL" pathway box. On your kepboard, prexx the "Ctrl" and
"V" keys to insert the picture path into the box. and click on the "Copy
from URL" button, as shown below:
A "prompt" dialogue box will appear over your window, as shown below. If
you choose, you can rename the picture by typing the new name into this
box, or you can leave the name already in the box and just click on the
"Ok" button.
Once you click the "Ok" button, the dialogue box will disappear, and your
picture will appear in your image directory, highlighted.
Once your desired picture has been uploaded to your image directory,
double click on that picture and when you return to your website browser,
the picture will appear on your webpage.
You can apply some styles to your image while in the image dialogue for floating your image to the left or right of text, and/or adding some space around the image. Note: If you do float your image to the left or right of text, typically the browser will show your text as right against your image unless you do put some horizontal space around it. The style selections are highlighted below:
Applying styles
You may apply styles to text and images on your page. Some styles are already built into the system. Most likely you will want to create your own styles. See working with classes and editing CSS to do this. The style dropdown is shown below:
To create different heading styles, (for titling purposes, or to separate one section of your blog from another) after typing your text, highlight the text you wish to use as a header by holding the left mouse button down and dragging it over the text. Then, while the text is highlighted, click on the “Format” tab as shown below:
Once you click on the “Format” tab, different heading styles will appear in the drop-down box; select the heading style you wish to use by clicking on the name of the style. This should change the style of the text you had previously highlighted.
Button Summary
The following buttons will be located at the bottom of the page at all times while editing any page on your site:
 |
To preview what your “work in progress” would look like after it is published without committing your changes. For more information on previewing a page, see Preview a Page |
 |
Saves your page as a draft. Your changes will not take affect on the site by clicking this bottun. You will need to click the Publish button to make your changes go live. |
 |
To save your page with a different name, click on the Save As button. A popup will appear requesting for a new page name. The old page will still exist. You can also use copy/rename page from the main menu to copy or rename pages. |
 |
Publishes your changes to the website. The saved draft of your page will also be updated if any new changes have occured since the last time you clicked the Save button. |
 |
Clicking the Revert button deletes any draft of your page reverting it back to the last published page since the last time you clicked Publish. |
 |
To see the page you are currently working on as it is now without any unsaved changes you have currently made. Note: This is an actual live view of your page. Clicking this button opens a new tab or window which you may leave open for testing your changes. You will want to click the refresh button or hit the F5 key after every publish to update this view. |
 |
Will clear the content of the page you are editing You must click Save or Publish to commit this action. |
 |
Will optimize or un-optimize your images. See description below. |
 |
Clicking Edit Styles button will pop open the CSS styles editor in a new browser-window tab with the site styles sheet selected by default. This is extremely handy for applying and adjusting custom styles to your pages. |
Clicking the Optimize Images button will reduce images from their actual size to the size that you have them displayed on the page. This has two benefits: First, the resized image that is being displayed as its actual size renders better in your browser window as compared to a larger image that has been shrunk down using your mouse or by setting the height and width in image dialog. Second, optimizing images reduces their file sizes, which allows the page to load faster in your browser improving user experience.
When Optimize Images is clicked, a backup of all of the images at their full size is stored. If at a later time you want to resize your image to a larger size than it has been optimized to, simply click Reset Images first. This will copy the full-sized images back into your images folder. Note: You will not see any difference at this point as the width and height attributes on your page will not be affected. You will want to do this however, as upsizing a smaller image will cause pixilation. Note: If you upload a small image and then try to increase the size it is being displayed as, the image will appear distorted.
For more information about the advanced features of the editor, click here to go to the CKEditor website.
Special Note About Device Emulation
The image above show you the steps needed to copy a page.
(1) To open up the website page used to copy pages, you have to go to Page Management and click on Copy or Rename Pages.
(2) The second step is to click the copy button.
(3) The you use the combo box to select the page you want to copy.
(4) You will then need to check the check box to remove the old page template so a new one can be created.
(5) The part will fill in on its own when you have selected the page you want to copy from the combo box.
(6) The finale step is to click the Copy/Rename button to finish the process.