Login    Register


GRSites Tutorials: Page Design
1) Go to the page design layout form
Don't worry, all the choices you make here can be changed later easily.
2) Choose the page's background

First, choose the background type: white, color, pattern or texture.

Second, choose the design: none, dark top, or fade to color. For instance, the GRSites web site itself uses a background type of "texture" and a background design of "dark top", but you can create your own combinations.

Depending on the choices you make, some fields may appear on the right such as color selection, pattern type selection, background texture selection or fade height.

Clicking on the color selector or the texture selector will bring up a popup window where you can make your choice. Check the tutorials for help with the color selector or the texture selector.

3) Select the page's header layout

You may select one or two headers for the page's layout. Header 1 is the top most, header 2 (if any) is below it. For each header, fields will appear at the right. Each header can either be set to a fixed height, or flexible (automatic) height that grows or shrinks with the content.

If you want two headers, the second header may be subdivided further with a left column and/or a right column. In that case, the width of each column must be specified in pixels.

Each of the headers (and columns of the second header, if any) must have its background color chosen. If in doubt, choose white. Avoid choosing too many different colors.

4) Select the page's main content layout

You may select up to 2 columns on the left or right. Each column must have its width specified. Each column (and the main content area in the center) must have a background color specified.

5) Select the page's footer layout

Select one or two footers. Each footer may be of fixed height, or flexible (automatic) height. Each footer must have a background color specified.

5) Select the page design

This will determine the appearance of the box with all your content areas.

6) Click Generate!
7) Start entering the content on the page

All the headers, columns and footers and chose are now visible and editable.

Every time you click inside a content area, a toolbar will popup immediately above it. For help using all the features of the toolbar, see the content editing tutorial.

8) Use the buttons at the top of the page
  • To modify the layout of the page, click on the buttons: Background, Header, Main Content, Footer, Design. These correspond for the form fields you filled previously. Clicking on any these brings up a popup window. Make your selection and click "Generate!"

  • To see what the final appearance of your page will be, click on View.

  • To return the page to its editable form, click on Edit.

  • Click on Save to save the page, so that you can bookmark your current location and come back to it later.

  • To download a zip file containing all needed HTML files, CSS, javascript and image files, click on Download. Downloading this file automatically saves the page.

  • If you need help, press the ? button and describe your problem. We will be contacted by email, and will automatically be notified of the page you were trying to edit.

© 2016 GRSites.com. All Rights Reserved, Whatever That Means.