New CMS Instructions

Image Uploading
Entering an Item
Menu Maintenance
Category Maintenance

Catalog Headers
Edit Non-Catalog Pages
For older sites only

Store Configuration
Image Management
Order Management

Mailing List
Running a Sale
Order Tracking

Making your site live
Order Guidelines


Print Friendly Version or 800 x 600 Resolution

Editing Your Builder Pages
(For older sites only)

HTML builder pages are pages that you can edit 24/7 via your browser. Most of our clients use them for pages that are updated often, for example... a newsletter, a photo gallery and so on.

1) From your main maintenance menu, click on "Edit Non-Catalog Pages", or click on "Edit Non-Catalog Pages" on the left of any maintenance page.

2) Click on "Begin HTML Editing". Your file list may be different, depending on what builder pages you have installed.

Edit Non-Catalog Pages

3) Select the file you wish to edit then click on "Begin HTML Editing".

Select file for editing

4) If we have done your site design, the first two sections will already be set up for you. Page Title is what shows up in the left hand corner of the browser when that page is opened. The Body options are the basic color or background of your site, along with the text and link colors.

Title and Body Tag Sections

5) The next section, again, should be set up for you with your logo. Once you are comfortable with the process of how this page works if you want or need to change it, you are free to. Simply click on "edit this entry".

Logo Image

6) First, we need to give the page a header under the logo. So click on "edit this entry"

Logo Image

7) Upon entering this page scroll to the section that says "Insert the following". In the first drop down list select "insert below", then in the second drop down list, select "text". Then click on "Update the File"
Builder Image 7

8) After updating the file it will take you back to the main page of the process. Scroll past your logo entry and you will notice a text entry as been added :Contents of the Text Area". Click on "edit this entry".
Text Area

9) You will find a screen that looks like this. As you can see there are several options. Let's start at the top, delete this entry. This is pretty self explanatory, if you wish to get rid of this text field click on the box and then click on "update the file" and it will be gone.

Builder Image 9

10) Next are the ways to format your text. Center, certainly is center the text on the page. Bold is of course, a bolder version of the font. Italics is a slanted version of the font :). Underline is an underline under the text that you input. Blockquote is a "tab". It indents about 5 spaces.

Builder 10 Image

11) Style are sizes of the font. You can choose normal or H1 - H6, H1 being the largest sized font and H6 being the smallest sized font. If you want a colored font then skip this step and define the size of your font in the next step.

Builder Image 11

12) After styles you will find ways to manipulate your font if you want color. If you would like to choose the color of your font, click on the little circle next to the word font. Then choose the color you want from the drop down list. Next is the size of the font you wish your header to be.

Builder Image 12

13) Next is the text box. Here is where you enter the words of your header or text.

Builder Image 13

14) After entering your text you can then choose the spacing needed after the text. Line break is a single space between lines. Paragraph break is 2 spaces between lines. Break with clear will clear the line of all other images or text. Insert horizontal rule with add a thin line. After you have made your selections click on "update file".

Builder Image 14

15) As you can see my header is large and purple. Now let's enter the text of my newsletter. Click on "edit this entry"

Builder Image 15

16) I made my choices as to how I wanted to make my text appear. Bold, blockquoted, green and normal sized. I then entered my text. After doing that I chose to have a paragraph break after my text. Now let's add a picture.

Builder Image 16

17) From the page that you entered your text scroll to the section that says "Insert the Following" Select from the drop down list, if you want to insert the image above or below your text. Then select from the next drop down list "image". Then press "update file".

Builder Image 17

18) If you have not uploaded your image to the database yet, go back to the screen where you select which file you are editing, there you will find a place where you can upload your image.

Builder Image 18

19) After you have uploaded your image, go to the section "Contents of this Image Area". Click on "edit this entry"

Image Area

20) Here is where I define my image. As you can see I didn't choose to have a line break before the image, and I wanted it centered. I found my image from the drop down list (if it is not there, make sure you uploaded it) and then gave the image alternate wording (words that appear when the cursor is moved over the image). I chose no alignment, and finally a paragraph break after the image. Now let's add a link so they can go home after they have read our newsletter.

Builder Image 20

21) After you have edited your image scroll to the section "insert following". Again choose if you want it above or below the entry you just completed. Then select "page link" from the drop down list. Then click "update file".

Builder Image 21

22) Then scroll to the selection which you just created "Contents of this Link Area" and click on "edit this entry". This is the same as editing your link page which we learned about earlier. I have chosen to center my link and make it bold. I put in the address of the page where I want the link to go (all home pages are called index.html) and then enter the name of my link "Home". Press "update file".

Builder Image 22

23) Now take a look at your page. Mine looks like this.

Finished Newsletter

24) Our HTML builder pages can do many more things like make tables, inserts lists and make email links. If you're interested in any of these features, you can go to the section on Advanced Builder Info

Back to Top