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.
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.
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.
The first icons in the tool bar allow you to select text and make the text Bold, Italic, Underline or Strikethrough, much as you would in a Microsoft Word© document.
The next four icons allow you to select text and align it left, center, right or justified.
You can also select from the “Format” dropdown list to make the selected text a paragraph — that’s a <p> tag in HTML — or a heading, such as <h1>, <h2>, etc. You can also format the text as an address or preformatted, — the <pre> tag in HTML — which means you can type spacing exactly as you want it to appear, which usually isn’t true in HTML.
In the next two dropdowns you can select a font family and font size. If you want fonts or sizes not shown in the dropdown, you will need to edit the appropriate HTML tag in the HTML view
The next icons have to do with familiar cut-copy-paste operations. Two extra paste icons allow you to “paste as text” to avoid carrying formatting from another document, and “paste from Word” which allows you to paste text while retaining the formatting in a Word© document.
The “Find/Replace” icons allow you to Find and Replace text, similar to word processing software.
The next icons of the toolbar let you create bulleted lists called “unordered lists” <ul> in HTML — or numbered “ordered” <ol> lists. Just highlight your text and click the icon, much like you would do in a word processor.
The next three icons allow you to vary the indentation of those lists and paragraphs. The first one sets “Outdent” which is the amount of indention of lines AFTER the first line. Secondly is the “Indent” icon. The icon that looks like quotation marks is for “blockquote” which is an HTML formatting tag that creates a paragraph that is indented on both right and left sides.
The arrow icons allow you to “undo” and “redo” any recent action.
The next three icons deal with text and image links, or “hyperlinks” to other locations on your website or anywhere on the web. The first will create a link on any selected text or image. The second link removes an existing link. The third link allows you to edit an “anchor” <a> tag which generally indicates a link.
To create a link, select the text or an image and click the “link” icon, a dialog box will appear. In the “URL” blank put the location you are linking to. If you are linking to another website, you must put the entire address of the website, including http://. If you are linking to your own website, the format of the link will depend on where the page is located. The format for links in the member site (the area of wholesale sites after login) is different from the format in the public site. In the public area of the site, your link should look like this…
/Scripts/PublicSite/?template=templateName
…where “templateName” is the name of the template you want to link to.
The format for links on Page Builder pages in the member area is:
{$link}templateName
You must format secure links like this because they pass along the customer’s ID and session cookie, plus any other info that may be included in the page setup.
Adding, Editing and Deleting Images
The “Image” icon allows you to insert an image wherever you put your cursor.
However, the insert image icon doesn’t allow you to “browse” your computer to find the image. You must first upload an image using FTP, or the Image Uploader at the bottom of the Page Builder window. To use the Image Uploader in the Page Builder, browse and select the image to upload, then click “Save Template” to upload the image. DO NOT use the Batch Uploader under “Image Manager” unless you want to upload to the http://[USERNAME].cameoez.com/images/import folder, since that is for product images for the ecommerce system and that’s the only folder the Batch Uploader can send images to. Once the image is uploaded, then type the image location in the URL blank. If you uploaded with the Image Uploader at the bottom of the pagebuilder then your URL should look like this:
http://[USERNAME].cameoez.com/images/[IMAGENAME].jpg
Clicking on the “Appearance” tab allows you to set Alignment of the picture to Baseline, Top, Middle, Bottom, Text Top, Text Bottom (all pertaining to vertical alignment), Right and Left (horizontal alignment). Also on the Appearance tab you can set width and height, vertical and horizontal padding (HTML hspace and vspace), border width, and inline style (CSS).
Clicking on the “Advanced” tab lets you assign an alternate Swap image for Mouseover and other settings involving image id and language.
The next icons have to do with the HTML code and getting more information about the Page Builder. The first allows you to Clean Up your Code, so that it won’t produce errors. The question mark icon is a link to the website for the underlying software the Page Builder is built on. The HTML link allows you to see and edit the code that is being created by the Page Builder. Finally the magnifying glass icon lets you Preview your page.
The next icons allow you to select text color and text background color (highlighting) from a palette.
If you get serious about managing the layout of your content on Page Builder Pages you will need to use Tables. On the bottom row of the tool bar are icons giving you a lot of control over tables. They are:
- Insert a New Table
- Table Row Properties
- Table Cell Properties
- Insert Row Before
- Insert Row After
- Delete Row
- Insert Column Before
- Insert Column After
- Delete Column
- Split Merged Table Cells
- Merge Cells
Tables will allow you to be more precise about where your content appears on the page. Experiment with the table icons to see what they do. The final icons on the tool bar are:
- Insert a Horizontal Rule
- Remove Formatting
- Toggle guidelines/invisible elements (only effects the editor view)
- Subscript
- Superscript
- Insert Symbol
- Insert Media (like Flash or Video files)
- Toggle Fullscreen mode
Design a New Template
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, 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 “header” and the bottom window is designated as the “footer”. Keep in mind that your pages will already be nested in your existing site headers and footers, so we typically build your entire page in the header section of the Page Builder. However, if you are creating a long page, you should split it between the “header” and “footer” because while the database fields for each the header and footer are large, they are not unlimited.
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, but some Word© formatting is confusing to the Page Builder, so be sure to use the “Paste As Word” option if you are starting in Microsoft Word. Otherwise your page will NOT look like you want it to.
You can also create and edit on the HTML code level. Click “HTML” in the toolbar to see and edit the code for the page. Refer to the HTML Primer for more information about HTML.
Since you have created a new page, you will also need to create a link to your new page somewhere on your website. You can either link from an existing Page Builder page or from the navigation in the header.php or footer.php files, located in the public_site and member_site folders. To add a link in the header or footer, you will need to access your site’s FTP, then go into the public_site folder, and copy the header.php and/or footer.php file out of the FTP, onto your computer. Then you can modify the file using any HTML editor including Notepad. Look for the list of links in which you want to add the link to, copy the entire pattern of code, and then change only the “href” in the anchor tag and the text within the <a> and </a> tags. The actual anchor tag should look like this:
<a href=”<?=$link?>TEMPLATENAME“>TEMPLATENAME</a>.
Then you can simply save and reupload the modified file(s). If you are not compfortable with any of these steps, please Contact Us to make the changes for you!.
When you have finished creating or editing your page in the Page Builder, click “Save Template” or “Quick Save” 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 stylesheets 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.