Page Editor Help

The foundation of your iHigh site are the various blocks, called elements, that contain all the articles, pictures, songs, and video clips that you've put on the site. You can easily edit, rearrange, and resize your elements using the Page Editor.

Starting Page Editor mode
In order to edit the elements on your site you first have to login. Then find the button on the right side of the toolbar at the top of the page labeled "Edit Page Layout." This button is available on every page created under your personal profile. Clicking this button will reload the page in editing mode.

The first editing options available to you, right at the top of the page are two buttons for Editing the Page Title and Page Style. Clicking on "Title" will prompt you to enter a new title for the whole web page, displayed at the top of the internet browser window. Editing the Page Style will bring up a window that presents the various style options. This basically edits the primary colors of your page, but the "Super Awesome Aqua" style will also change some of the page fonts. Coming soon is the option to create your own style, including your choice of colors, font faces, and font sizes.

 

 

You'll notice the powder blue administrative tools have appeared around your page elements. You'll also notice that blue lines have appeared on the page marking the various columns. There are five “columns” in which you can place elements. The “top banner,” “bottom banner,” and columns 1, 2, and 3 across the middle of the page from left to right.

 

 

When you first create a profile a number of elements have been pre-loaded onto your page. You can either remove these elements and add new blank elements or change the settings of each element to fit your needs.

 

 

These are the element editing tools. In order to remove one of the default elements simply click the “Remove” button at the right end of the toolbar. Click “Yes” when it asks if you are sure if you want to remove this element and watch it disappear.

Adding New Elements
Scroll down to the bottom of the column of your choice, there you'll find a button that says “Add a new element here.” Click that button and the page will reload with a Blank Element inserted into that column. To make these new elements do what you want them to you now have to change the element type.

 

 

Changing Element Type
Each element is just a Blank block if you don't give it a type. In the element editing toolbar find the “Type” button. Clicking this brings up a list of all the element types. Scroll through this list to find the type of element you want. [[Click here for a full list of element types with descriptions.]]

 

 

Changing the Title of an Element
Now that your element has an identity you can give it a name (such as 'Top Stories' or 'My Vacation'). Click on "Title" in the element editing toolbar and a prompt will pop up on the screen asking you for the new title. The page will then reload with the element newly labeled.

Sizing Your Elements
Perhaps the most important element editing option is size. Keeping all the elements in each column a consistent size will keep your page looking clean. In addition, the size of the element also defines its color and shape.

 

 

There are a number of sizes available, each is designed to give you a number of layout options for the three columns that make up your page. iHigh.com is designed to be optimally viewed at a screen resolution of 1024x768. To fit all three columns into that space the column sizes are designed to be used in various combinations to occupy 990 pixels of horizontal space. To illustrate what I mean here are the various element sizes and how they match up with other sizes to optimally fill the page:

 

 

Size 0 - This is a borderless size that reaches all the way across the three columns, this size is recommended for the top and bottom banners.

Size 1 - Like Size 0, this stretches across the page and is recommended for the top and bottom banners, the difference, however, is that this size does have a border.

Size 1_95 - Another borderless size, at 500 pixels wide this reaches half way across the page.

Size 105 - This bordered size is 400 pixels wide. This works well for center column article lists, video players, and photo galleries.

Size 2 - About 500 pixels, this element takes up half the screen and works well in a two column format or with two size 4 columns. For a two column format you can use this in conjunction with the 1_95 as well, making one column bordered and one non-bordered.

Size 3 - At about 330 pixels, this element size will take up an even third of the page width. Three columns of size 3 will be three evenly sized columns. You can also use it with a 4 and a 105 for a more center-dominant format. If you pair it with a single column of size 1_95 or 105 elements you'll have a good-looking off-center two-column format.

Size 4 - A smaller size (about 250 pixels wide) that works well for links, sidebars, and/or general navigation purposes.

Size 5 - At just around 200 pixels this is the thinnest column size available. It is unbordered.

If you want a single, all-encompassing column use sizes 0 or 1.

Rearranging Your Elements
There are three options available on the element editing toolbar that help you move your element around your page. The two arrows, up and down, allow you to move the element up and down within the current column. Use these to sort your elements within the column. You can use the “Column” button to move the element around between columns. You can even move elements into the top and bottom banners that stretch across the page.

Element Height
The default setting for the height of each element is 0, meaning that the element is only as tall as the content of that element requires. You can also set the element height to a fixed number (in pixels) by clicking on "Height" in the element editing toolbar. If the content of that element requires more vertical space than you've given it, a scrollbar will appear for that element.

Experiment a Little
This article lays out the basics but the best way to figure out the Page Editor is to play around with it. Pretty soon you'll have a good feel for what sizes work well together, what kind of elements you want and need, and how those elements can be best displayed. Go ahead, have some fun with it!

Posted by: askihigh

Email   |   Print

Avg. Rating: (0/10 | 0 Votes)