Creating a Standard Skyscraper in InstantPro
A Skyscraper will appear as an element either to the left or right of your website content and can be used to display the same information across multiple pages.
This tutorial will take you through how to create a standard Skyscraper for your InstantPro Website.
You can also create Skyscrapers that display Google AdSense on your website, for help with this please view the Google AdSense Tutorial.
To follow the tutorial you will need to be logged in to your MyFreeola Account and open the InstantPro Website Builder from within your account.
Step 1: We'll start at the Site Overview screen.
In order to create a Skyscraper you will need to click the Skyscraper Manager button, shown under the Pages & Content heading.
You will be taken to the Skyscraper Manager.
Step 2: The Skyscraper Manager contains a list of all the pages you have on your site, and once you have created your first Skyscraper you will be able to use this list of pages to assign the Skyscraper to the left, right or both sides of your pages.
As this is the first Skyscraper for the tutorial site we cannot yet assign anything to our pages. To begin designing the first Skyscraper you will need to click the click here to create one link.
Click the link highlighted in the image above to begin designing your Skyscraper.
Step 3: There are two types of Skyscraper that you are able to design using InstantPro, a Regular Skyscraper, or a Google AdSense Skyscraper.
When you click to create a new Skyscraper, you will be able to choose the type of Skyscraper you wish to create by choosing either the Regular or Google AdSense option from the drop down menu at top of the page.
As this tutorial will explain how to create a Regular Skyscraper you will need to ensure that the Skyscraper type is set to Regular Skyscraper as is shown at the top of the image below.
The Skyscraper design page is quite similar to the text editor you would use to design standard pages, although there are a few small differences.
If you are unfamiliar with the InstantPro Text Editor, the Text Editor Tutorials explain the available features in more detail.
Step 4: The Skyscraper editor has a text editor on the right which allows you to complete design work on your Skyscraper as you would were you designing a Standard page. You can add images, media files or even just text in to this area.
To the left you are able to define a Name or Reference for the Skyscraper, set a Background Colour, and also a Border Colour.
It is also possible to set the Width in pixels of the Skyscraper, so you can specify exactly how much of the left or right margin space your Skyscraper will occupy.
Step 5: The image below shows the example Skyscraper used on the Tutorial Website.
In creating the example Skyscraper, you will firstly see that the Name/Reference has been specified, and a Width of 222 pixels has been specified.
The Border Colour has been left as the default, and the Background Colour has also been left white. You can see how this affects the appearance of the Skyscraper in the editor shown to the right.
Some bold orange type has also been added using the Skyscraper editor.
The image below gives a clear idea of how the Skyscraper will appear on the live site.
Once you are happy with the content of your Skyscraper, click the Save button, and then Finish, which are both shown at the bottom right of the Edit Skyscraper page.
Step 6: Once you have saved your Skyscraper you will be taken back to the Skyscraper Manager page, where you will see that in place of the Click to Create a New One link mentioned previously, you now have a new section where you can edit your existing Skyscrapers and an Add a New Skyscraper button for creating new skyscrapers.
Now that you've created your first skyscraper, you now have the option to assign it to the page or pages that you want it to appear on, you can do this by clicking the Step 2: Assign Skyscrapers to Pages tab as shown below.
Step 7: Once you've clicked through to this tab, you'll have a list of all of the pages you've created for your InstantPro Site, with two drop down menu's next to each.
In the next section we'll cover managing your skyscrapers and assigning them to pages.
Managing Skyscrapers and Assigning Skyscrapers to pages.
Now a Skyscraper has been designed you will have to assign it to the pages you want it to appear on.
In the Assign Skyscrapers to Pages section of the Skyscraper Manager, you will see there are two drop down menus next to each page you have created for your InstantPro site. They are under the headings Left Skyscraper and Right Skyscraper. In the picture below you can see the Example Skyscraper in one of these drop downs.
As the example image above shows, the Introduction page has the Example Skyscraper assigned to the left of the page.
Once you have assigned your Skyscrapers to your pages, click the Finish button shown at the bottom right of the page. This will apply the changes to your site, so when you preview your site you will now see your Skyscrapers on your pages as you have assigned them.
You will see below how the InstantPro Tutorials Web site appears with the Skyscrapers assigned.
To learn how to create a Google AdSense Skyscraper, check out the Google Adsense Skyscraper Tutorial.