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.
3) Select the file you wish to edit then click on "Begin HTML 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.
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".
6) First, we need to give the page a header under the logo. So click on "edit this entry"
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"
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".
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.
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.
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.
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.
13) Next is the text box. Here is where you enter the words of your header or text.
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".
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"
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.
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".
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.
19) After you have uploaded your image, go to the section "Contents of this Image Area". Click on "edit this entry"
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.
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".
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".
23) Now take a look at your page. Mine looks like this.
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