The Page Builder

We have provided a powerful tool for you to be able to create and modify your own pages called the Page Builder. The Page Builder is located in the Admin Console on all CAMEO EZ® Wholesale Vendor, Sales Rep and Information Only website areas. It has many familiar features similar to those on word-processing programs, desktop-publishing programs and HTML editors. Contact OmegaNet and we will update your website with a navigation button and link to this new page.

To make maintenance and modification of your website simple, we have designed the CAMEO EZ® system around modular plugins. The header, the footer, and the template design for your site will remain the same from page to page. When you want to add or modify pages on your site that are built using the Page Builder feature in your CAMEO EZ® admin console you can edit page content instead of replicating the entire page design if your page.

Login to your website’s admin console at http://admin.cameoez.com. Click on the blue Page Builder button in the Admin Console and then click Information Page Wizard. If you have never used the Page builder before, click on the appropriate link below to get started.

• Design a New Template (Page)
• Edit Existing Templates

Using the Page Builder

To anyone accustomed to using word processors, desktop publishing or web page creation software, the toolbar of the Page Builder will be familiar. Hover your cursor over any of the icons to see a description. One difference with the older version of the Page Builder is that many functions are in the drop down menus instead of icons in the toolbar.

At the very top, you will see the name of your page (ending in “.tpl” for “template”), a link to “MAIN MENU”, which will take you back to the previous page where you can create a new page or edit an existing page, then a direct link to “CREATE A NEW TEMPLATE”.

Below that is a blank for you to enter the Title for your page, which is different from the NAME of your page. In many cases the Title will be displayed at the top of the browser window. The Title can be very important for Search Engines like Google.

The next section is for the “Top Half of Page”, where you have an editing window below a styling toolbar. An identical area to edit the “Bottom Half of Page” is below. You do not have to put something in both “halves”. Most pages can use just the top half and ignore the bottom half, but because they are each stored in a database field, there is a character limitation, if you have a long, complicated page, you may need to use both “halves”.

You can begin a page by simply typing in the window and come back to edit the styling later. The toolbar gives you several tools to change the look of your page.

Dropdown Menus

Many of the menu items will be self explanatory, but notes have been included where the may be confusion:

1. File
   1. New Document: IMPORTANT NOTE: This does NOT create a new page; it rather clears your current page so you can start over. To create a new page, click “CREATE NEW TEMPLATE” at the top of the window.
   2. Print: Prints only what is in your current window (Top or Bottom Half of Page)
2. Edit: These options work much as you would expect.
   1. Undo
   2. Redo
   3. Cut
   4. Copy
   5. Paste
   6. Paste as text: IMPORTANT NOTE: Use this instead of “Paste” if you are copying from a word-processor or publishing program such as Word or Publisher because they have styling terms that will conflict with programming of the Page Builder.
   7. Select all
   8. Find and replace
3. Insert
   1. Insert video: Allows you to insert a video either with its source URL (“General” tab) or to include Embed code, such as that provided by YouTube, Vimeo, etc.
   2. Insert image: Allows you to enter the URL of an image to include on the page. Images must be uploaded separately. Using the Image Uploader at the bottom of the editing screen will upload to the “images” folder of your site, so the URL will be

      http://yourwebsite.com/images/imagename.jpg.

   3. Insert link: Allows you to create text or image links, or “hyperlinks” to other locations on your website or anywhere on the web. First select/highlight the text or image, then select “Insert Link”. A dialog will open where you can enter the Url of the link destination, text to display and the “Target”, which can either be “None” where the link opens in the same window, or “New Window” where the link will open in a new window and leave the current page open.
   4. Special character: Gives you a library of special characters to choose from.
   5. Horizontal line: Inserts a Horizontal line (“rule”) to separate sections.
   6. Anchor: Similar to a link but it simply identifies a place on the page, which can be linked to, i.e.

      http://yourwebsite.com/somepage.html#myanchor.

   7. Insert date/time: Inserts the current date on the page in selectable formats.
   8. Nonbreaking space: Can be important if you need to add several spaces, since hitting the spacebar multiple times will be ignored when the browser displays the page.
4. View
   1. Show invisible characters: Let’s you see spaces, paragraph breaks, etc., in the editing window.
   2. Show blocks: Displays dotted lines around block-level elements such as paragraphs, headings, divs, etc.
   3. Visual aids
   4. Preview: Gives you a preview of the half of the page you are working on. However, ultimately you will need to view the page on your website because external stylesheets may affect the way your page looks.
   5. Fullscreen: Opens your editing window to full screen height.
5. Format: The first items in the Format dropdown allow you to select text and make the text Bold, Italic, Underline or Strikethrough, Superscript and Subscript, much as you would in a Microsoft Word© document.
   1. Bold
   2. Italic
   3. Underline
   4. Strikethrough
   5. Superscript
   6. Subscript
   7. Formats
      • Headers: Various size “H” tags
      • Blocks Choose paragraph, div or “pre” block-level elements. The latter is “pre-formatted” which means however you type the text is the way it will appear including spaces, indents, etc.
      • Containers: These choices are mostly HTML5 elements and aid in making pages mobile- and print- friendly.
   8. Clear formatting: Clears all formatting on selected/highlighted text.
6. Table
   1. Insert table: Put your cursor where you want the table and select the number of columns and rows you need.
   2. Table properties: Set the width, height, cellspacing, cellpadding, border and alignment of the table.
   3. Delete table
   4. Cell
      • Cell properties
      • Merge cells: highlight two or more adjacent cells and merge them into one.
      • Split cells
   5. Row
      • Insert row before: Place your cursor in a cell and this will add a row above your cursor location.
      • Insert row after: Place your cursor and this will add a row below.
      • Delete row: This will delete the entire row, not just the cell your cursor is in.
      • Row properties: Select the “Row Type”, alignment and height.
      • Cut row
      • Copy row
      • Paste row before
      • Paste row after
   6. Column
      • Insert column before: Place your cursor and this will add a column to the left.
      • Insert column after: Adds a column to the right of the cell your cursor is in.
      • Delete column: This will delete the entire column, not just the cell your cursor is in.
7. Tools
   1. Spellcheck
   2. Source code: This is the HTML code view. Use it if you need to fine tune your page using HTML.

Toolbar

1. Undo
2. Redo
3. Bold
4. Italic
5. Align Right: These “align” controls work on images as well as text.
6. Align Center
7. Align Left
8. Justify
9. Bullet List (known as an “unordered list”)
10. Numbered List (“ordered list”)
11. Decrease Indent
12. Increase Indent
13. Text color: Gives you a pallete of “web-safe” colors to choose from.
14. Text background color: Affects the background of text, not the page.

1. Text type: allows you to select what type of text. If you select “Header 1” and your stylesheet has styling for the H1 tag, the style will be applied on the website but will not be visible in the editor.
   1. Paragraph
   2. Address: an HTML 5 tag intended for street addresses that automatically italicizes.
   3. Pre: “pre-formatted” which means however you type the text regarding spacing is the way it will appear.
   4. Header 1 through Header 6: Progressively smaller heading tags (H1, H2 … H6).
2. Font family: A choice of standard “web safe” fonts. To use other fonts may require installation of server-side fonts and editing the HTML through Tools > Source Code.
3. Font sizes: ranging from 8pt to 36pt.
4. Insert/edit Link
5. Insert/edit Image: First upload your image using the uploader at the bottom of the Page Builder editing page. Then enter the URL of the image, which will be

   http://yourusername.cameoez.com/images/yourimagename.jpg

6. You can also use the File Manager or an FTP client program to upload images.

7. Print: Prints the contents of the current editor (Top or Bottom Half of the Page).
8. Preview: Lets you see the current half of the page as it would look on the web, except for style applied by external stylesheets.
9. Insert/edit video: Allows you to insert a video either with its source URL (“General” tab) or to include Embed code, such as that provided by YouTube.
10. Fullscreen:Opens up the editing window to fill the height of your screen. You cannot save in Fullscreen mode. you must click it again to have access to the “Save” icons.

Design a New Template (Page)

To begin creating a page, called a “template” in the Page Builder, go to “Design a New Template” and enter the name of your new page without spaces. You can use any combination of capital and lowercase letters. The page name will be visible in the address bar of the user’s web browser but typically nowhere else. The extension (.tpl) will be added automatically so you should NOT add an extension, such as “.html”. Next, select the area in which you’d like to put the page: Public Site, Member Site, or Rep Communication Portal (the latter only applies to those OmegaNet Clients who purchased this feature). Click “Create Template” and you will be taken to the Page Builder’s “Information Template Builder” screen with a blank Page Builder Window.

For Search Engine Optimization (SEO), you should assign a Title to the page, which is different from the “name” you have given it. The Title can have spaces in it but shouldn’t be much more than 8 words long. Then type the information you want to include on the page. There are two windows in the Page Builder screen, each with its own toolbar. The top window is designated as the “Top Half of Page” (formerly “header”) and the bottom window is designated as the “Bottom Half of Page (formerly “footer”).

You can type directly into the windows and use the font style, size and weight tools to create your pages. Use the Fullscreen Mode to see the most of your page at one time.

You can create your page in a word processor like Microsoft Word© and then copy it into the window of the Page Builder. Formatting will be transferred along with the information. When using a Microsoft Word document to create your content so be sure to use the “Paste As Text” option under the “Edit” drop down.

You can also create and edit on the HTML code level. Click Tools in the toolbar then click <> Source Code to see and edit the code for the page. Refer to the HTML Primer for more information about HTML.

IMPORTANT NOTE: NEVER use curly braces ( { } ) in a Page Builder document. Those characters are reserved for Smarty templates, which is the template engine used by CAMEO EZ

Creating a link

To create a link to your catalog, for example, first upload the catalog to the images folder in the File Manager.  In the admin console click on File Manager, Manage Files and then click on the images folder.  Upload your new catalog as a .pdf file (all one word with no spaces).  To upload the file find the icon that looks like a disk drive with a blue up arrow over it.  Browse and select the catalog from your computer files and save it to the server.

In the Page Builder reference the catalog by highlighting the content in your Page Builder page such as “Spring 2016 Catalog.”  Go to the navigation bar and select the link icon and type in: http://domainname.cameoez.com/images/catalogname.pdf.  Click on Quick Save. Your catalog(s) will be visible on your web site because you created this link in your Page Builder page.

When you create a Contact Us page type in the address information and include the email address. To create a link to your email highlight the email address and click on the link icon. Type in mailto:your email address in the pop up box. The Text to display will have your email address and the Target defaults to None.

After you create the new links contact OmegaNet, Inc. and ask a designer to add a navigation button for this page.

Adding an Image to a Page Builder page.

To add an image to a Page Builder page first upload the image to the images folder in the File Manager. In the admin console click on File Manager, Manage Files and then click on the images folder.  Upload your new image as a .jpg file (no spaces).  To upload the image find the icon that looks like a disk drive with a blue up arrow over it.  Browse and select the image from your computer files and save it to the server.

In the Page Builder place the cursor where you want to insert the image.  Click on the picture icon and a box will show. In the Source field type in http://domainname.cameoez.com/images/imagename.jpg. It is not necessary to type in an Image description. In the Dimensions field you can size the image. The image will be inserted into the Page Builder Page.  Click on Quick Save to save the page with the image.

When you have finished creating or editing your page in the Page Builder, click the “Quick Save” button and your changes should appear immediately on your website.

Edit Existing Templates

If you want to modify a page that is already on the website, you will need to select the existing template. If you are not sure what your template is named, go back to the website, navigate to the page you want to modify, and then look at the address bar. The template name will appear immediately after the part of the address that reads ?template=

Most templates are in the Public Area dropdown, however if you have to log in to get to your page, it may be in the Secure Area dropdown. Select the template and click the Edit Template button.

Then you should make your modifications, and click the Quick Save button. Then go back to your website and refresh the page to see the updated changes.

NOTE: Because we use external style sheets for your website, the style that you see in the Page Builder preview window will likely NOT be the same as when the page is actually on the website. It is best to keep the actual website open in another browser window and refresh the page to view the style.

If you are not comfortable with any of these steps, please Contact Us to make the changes for you!.

Main Template

This is for Rep Sites. Here you can select the default template for pages displaying products from your Vendor Line’s Item spreadsheet. Thumbnail is the layout that shows a small image for each item; List View is a text price list without pictures. If you select Thumbnail, you will be asked to set the number of columns and the total number of items you would like on the page.

Communication Portal

This only applies to sites with the optional “Rep Comm” site. Use this feature to add new users and passwords.