InstantPro Home » Online Tutorials » Website Design Editor

The website design editor within InstantPro allows you to customise every aspect of your web site. You are able to add background images, choose the navigation style, create and edit your site banner image and logo as well as other items too.

The design editor allows you to style your web site as if it were a blank canvas and provides an alternative to the built in web site themes from which you are also able to choose when styling your site.

You can also use the design editor to edit and style a site already in existence, to do this open InstantPro from your MyFreeola account and from the Site Overview screen select Web Site Design Editor under the Pages heading.

To illustrate the use of the Website Design Editor, a brand new site will be created and this tutorial will work through each feature of the design editor section by section.

1. When you first open the InstantPro Website Builder to begin designing a web site, you will see the web site set up wizard, as shown below:

Click image to view full-size

From this page, you will need to click the Start Building button to begin building your web site.

2. You will then be shown the theme selector page where you can choose from a number of our pre-defined themes.

Click image to view full-size

To use the web site design editor to create your own unique theme and style for your web site, you will need to select the Start from Scratch option shown in the top left of the screen.

After clicking this option the web site design editor will open, allowing you to begin customising your web site.

3. Now you will see the web site design editor and can now begin personalising your web site.

Click image to view full-size

The page you will now see is broken in to different sections, all of which you are able to customise. This tutorial will now work through each section of the web site design editor in turn explaining how to use each of the available features.

To jump to the tutorial covering the specific section of the web site design editor, please use one of the links below.

Web Site Background Site Logo and Banner Site Navigation Main Content Area

Web Site Footer Site Alignment and Favicons Skyscrapers

Having a good background colour, or image for your web site can really affect the overall look of the site.

Within the web design editor it is possible to set a background colour, or use an image which can be repeated across the page. You can even use a combination of both.

To set the site background you will need to click the correct area on the web site design editor page, which is shown below.

Click image to view full-size

Once you have selected this option you will be presented with a number of different options regarding the background.

You will be able to keep the default background by selecting the option shown below and clicking continue:

Click image to view full-size

You can also pick a background colour from the colour wheel, or use a hexidecimal colour reference.

Click image to view full-size

If you have an image which you wish to display as your site background instead of just a colour, you can upload your background image by selecting this option from the screen and clicking the Browse Computer button to select the image you wish to upload.

This is the option which will be used for the tutorial.

Click image to view full-size

Once you have uploaded your image, you will see the screen as shown below, where you are able to set some advanced features relating to your web site background.

Click image to view full-size

The first advanced option is whether you wish to repeat your image across the background of your site. The background image which has been uploaded is shown below:

As you can see, it is a very small image and were this the background image on a web site, the background would look very plain indeed. This is where the image repeat facility is very useful.

You will see there are options to not repeat the image, to repeat the image vertically, horizontally, or even both. For the example site, the image will be repeated both vertically, and horizontally.

It is then necessary to set the image alignment. This option allows you to set the first point the image appears on the page. The option set is left (horizontally), and top (vertically). This means that the background image will be placed in the top left corner of the page and will then be repeated from there.

If, for example, you have a background image you would like to only appear at the bottom of your page, you would select Bottom for the vertical alignment, along with the horizontal alignment of your choice.

If your background image will not take up all the page, you are also able to set a background colour in addition to your own background image, which is useful if you would like to merge your background image with a nice background colour.

Once you have set everything on this page, you can click Finish to return to the web site design editor to view your site background.

Below you can see the background image we have uploaded in this section of the tutorial, and also how it has been repeated across the page.

Click image to view full-size

InstantPro also has a selection of free to use background images which you are able to use for your website.

Click image to view full-size

You will need to click the Click here to pick a design link shown on this page, and you will then be able to pick from a selection of free background images. Some of which are shown below.

Click image to view full-size

Once you have made your selection you will be returned to the web site design editor to continue styling your site.

We are now ready to define the next element on our page, the site banner and logo.

Your web site banner will appear on every page above you web site content. This is the place where you would include a company, or organisation logo and perhaps a nice image too.

Click image to view full-size

To open the banner and logo tools, you will need to click the Edit button shown in the section highlighted in the image above.

You will now be shown a page where you can define the settings relating to your banner image.

You may not want your web site to have a banner image, if so select the option as highlighted in the example image.

Click image to view full-size

You will see that you are shown a preview of how your site will appear without a banner image.

If you wish to have a banner image, but do not feel that you are able to design one yourself, you are able to pick from a choice of our stock banner images on which you can then add your own logo to make it a little more personal.

Click image to view full-size

To choose your free banner image, just click the Pick a free stock banner image link, as shown on the image above.

Once you have chosen your banner image, you will then be able to progress on to define your logo using the InstantPro Logo creator tool.

If you have your own banner image which you have designed yourself, or had designed for you, it is possible to upload this to the InstantPro Website Builder and use the image as your site banner.

You will need to select the third option from the banner and logo settings box - Upload your own banner image.

Click image to view full-size

Click the browse computer button to find the image file on your computer so that it can be uploaded. Once the image has been uploaded you will be shown a preview of your banner image, and have a chance to crop the image if this is necessary.

Click image to view full-size

In our example image, you can see the banner image which will be used for this tutorial. The image does not require cropping, so it is now necessary to click the continue button to move on to the InstantPro Logo Creator.

Once a banner image has been uploaded or chosen from the selection of free banner images, the next step is add a logo to your banner image.

Click image to view full-size

Within the logo creator you will see that you have three choices regarding your logo.

1. Have no logo

This will mean that your banner image will remain as is shown in the preview, with no other text, or images added.

2. Use the InstantPro Logo Creator tool

The logo creator tool allows you to add your own text to the banner image, which you can then place in any location on the banner you wish as well as choosing from a large number of font styles. To move the logo around the banner image you can use the arrow icons shown just above the banner preview.

The text colour can also be defined using a colour wheel, or a hexidecimal colour specification too.

You will see in the example image, that the logo creator tool has been used to add the text InstantPro Website Builder on to the banner uploaded in the previous section. The font size has been set to "50" and the font style to "Misfittoys".

3. Upload your Own logo

If you have your own logo which you would like to add to the web site banner, then you are able to upload this in the same manner as with uploading the banner image.

Once uploaded you will be able to position your logo wherever you wish on the site banner. You can even have your web site logo appear above the banner image. This can be achieved by selecting the Move Logo Above Banner link shown just above the banner preview image.

Once you are happy with how your logo has been defined click the continue button to return to the main web site design editor page, and view how your banner sits on your page.

Click image to view full-size

Both the background of the web site, and the banner image have now been defined we will next move on to setting the web site navigation.

The navigation for your site provides visitors with clickable links to each of your pages, enabling them to find their way around your site as easily as possible.

InstantPro has a number of built in navigation styles which you are able to use on your web site, and you can choose to display these to the left, right, or on top of your web site.

To begin defining your site navigation you will need to click the edit button within the highlighted area shown on the image below.

Click image to view full-size

InstantPro gives a few options as to the position of your site navigation, which you will have to choose prior to selecting a navigation style.

Click image to view full-size

The example image above has the top and side navigation option selected. To the right you will see the different placement options for your site navigation.

For Top Navigation you will see you can elect to place the navigation above or below your banner image.

For Side Navigation you are able to choose whether you place the navigation menu on the left or the right of your site.

There is no right or wrong way to display your site navigation, so this may be something to experiment with. Remember you can come back and edit these settings at any time.

The navigation used for this tutorial will be Side Navigation only, which is aligned to the left. Once you have chosen the navigation positioning click continue to choose from our free site navigation styles.

Click image to view full-size

If you have chosen to display a top navigation, you will first be prompted to choose the style you would like. A selection of available top navigation styles is shown in the image above.

From here, if you have chosen to display a side navigation too, clicking continue will allow you to choose the side navigation you wish to have. If you have only selected top navigation then you will be returned to the web site design editor.

Click image to view full-size

You will notice that the top and side navigation styles are quite different which helps to add variation to your pages. There is more than just the one page of navigation styles available too, just click the numbers or click the Next Styles button at the bottom to scroll through more navigation options.

When your site navigation has been chosen click the continue button to confirm your choice and return to the design editor.

Click image to view full-size

Once returned to the main web design editor page, you can see how the navigation style you have chosen suits your page. If you would like to choose a different style, or change the positioning of the navigation, just click the edit button as described at the beginning of this guide and you will be able to make changes as you require.

As you will likely be aware, the content area of your site is where your main web site content will go. That is, where your unique content will be placed.

Using the web site design editor you are able to choose the default font, font style, and font size for your site, as well as a few further options too.

Click image to view full-size

To begin editing the content area click the edit button shown in the highlighted area on the image above.

When you begin editing the settings for the content area, you will have a number of options which you are able to define.

Click image to view full-size

Just above the Font Type and Font Size settings box you are shown a working example of how your changes will impact the content on your site. Each time you make a change to the colours on this page, the example will update to show you the effect the changes will have.

You are first able to set the font type. The default font type is Arial, but you are able to make your choice as required. You are also able to choose the default font size for the text on your page. Any changes you make here will be reflected in the example text above.

You are next able to define the colours for text on your site. The first option - Font Colour allows you to choose the default colour in which text will be presented on your web site.

The Link Colour allows you to define the colour in which Hyperlinks appear on your pages.

Link Hover Colour can be defined so that when links on your pages are hovered over by the mouse cursor, the link will change colour, which in some cases makes the link clearer to the site user.

You will have likely noticed that links on the tutorial pages change colour when you hover over them. This is achieved by using this kind of feature.

You are able to set Background Colour which will define the default background colour of your site's content area.

Finally you are able to define an Element Colour. This will set the default colour for elements such as borders, or horizontal rules which you might add to your pages.

You can continue to experiment with different colour settings until you find those that are right for your web site.

Once you have defined the settings you require, click continue to return to the design editor to see how your changes have altered the appearance of your page.

If you wish to change these options, just click the edit button as described in the first part of this section and you will be able to edit your existing settings.

The Footer is the part of your web site which, as the name suggests, is displayed at the bottom, or foot of the page.

There are many uses for a footer. If you look at Freeola.com and scroll to the bottom of the page you will notice a large black area which contains customer comments and such like. This area is a web site footer, which as you can see is used for much more than just contact details.

You could use the footer to add contact details, or extra site navigation, the choice is really all yours.

To edit, or create your site footer click the edit button shown in the image below.

Click image to view full-size

Once you have selected to edit the footer, you will see that the site footer is designed using the InstantPro Text Editor.

If you are unfamiliar with how the text editor functions, we have available a large number of tutorials explaining the majoity of the features available, you can view these in our Text Editor Tutorials.

Click image to view full-size

In the image above you will see that a simple footer has been designed which includes some text, and some hyperlinks to Freeola.com and the InstantPro Tutorials.

To save your web site footer and return to the web site design editor click the continue button.

Click image to view full-size

You will then be able to view how your site footer fits with your other page styling. As with the other elements, you can edit this section at any time by clicking the edit button within the web site design editor.

To choose your web site alignment, and upload a favicon for you web site you will need to select the Edit Miscellaneous option shown on the web site design editor page.

Click image to view full-size

In this section you will see the screen as shown in the example image below.

Click image to view full-size

The first choice you have is to set the alignment of your web site. Similarly to how you would align text, this option allows you to do the same with your web site. You would choose align left so that your web site is displayed to the left when viewed in an internet browser. For central alignment choose Align Center and for right alignment select Align Right.

Once you have selected the alignment, you will then be able to select the next option - Choose a Visitor Counter.

There are a number of free visitor counters (also known as Hit Counters), available in InstantPro from which you are able to choose for your web site.

Click image to view full-size

For the tutorial example the option selected is No Visitor Counter, but you add one of the available free counters simply by selecting them on this page.

A visitor counter will display at the bottom of your web site and will indicate the number of visits your site has received.

A Favicon is a small image which displays next to the web site address in the address bar of your web browser, if you look to the top of the page you will see the favicon that Freeola uses for the web site.

As you can see, the F within the red square is the Freeola.com favicon.

To add your own favicon to your InstantPro web site, you will need to select the third option on the miscellaneous settings page, where you will be able to upload your own favicon image.

Click image to view full-size

The image you upload for your favicon must be quite small so that it can fit in to the available space within the address bar of the internet browser.

Once you have uploaded your favicon, you will be given the option to crop the image if it is over the allowed size.

Click image to view full-size

As you can see from the image above the image uploaded for the tutorial example is a little too large to be used as a favicon, so it must be cropped.

The content within the squared area is that which will be used for the web site favicon. You will need to ensure that you are using the correct part of your image.

Once you have selected the part of the image you wish to use as your favicon click the continue button. This will show you a preview of how your favicon will appear in three of the most popular web browsers.

Click image to view full-size

If you are unhappy with the preview, you will see that you are able go back and crop the image again, or you can upload a new image to use as the favicon. If you are happy with the preview click the Use Image & Finish button shown in the bottom right which will take you back to the web design editor.

The web site design editor allows you to set up skyscrapers for your web site. Skyscrapers are extra areas which are shown as columns either to the left, right or both sides of your web site in which you can include extra content, or even Google AdSense.

To begin editing the Skyscrapers using the web site design editor click the edit button in the area highlighted in the image below.

Click image to view full-size

You will be able to design your skyscrapers using a version of the InstantPro Text Editor. There is quite a lot to consider when designing and creating Skyscrapers, and this subject is dealt with in greater detail in a dedicated tutorial.

The Skyscraper Tutorial explains the available features and uses of Skyscrapers, and we would suggest reading these guides for further information.

The tutorial has covered the different sections of the web design editor and below you can see a screenshot of the page that has been styled throughout this tutorial.

Click image to view full-size

Now that the page and site styling has been completed, we can now begin designing the first page for the website. Doing this is discussed in the Creating a Standard Page tutorial.