Home Page Popup

Adding a Popup on your Home Page:

Path, from the left navigation menu: ['Customization' section] > Home Page Popup

To load the Home Page Popup page, in order to add a popup to your homepage, you need to select the link entitled "Home Page Popup" under the Customization section of the left navigation menu, as shown here:

Fig. 2.5.9.1: The "Home Page Popup" link for adding a popup on your home page:

This will load the Home Page Popup screen, shown below:

Fig. 2.5.9.2: The "Home Page Popup" screen from which you can add a popup on your home page (or edit the existing popup from your home page):

You will need to enter several pieces of information in this page.

Heading

This is the Heading of the popup window. You may enter any desired text in this field.

Body

This is where you create and edit the actual body of the popup window that will appear on your home page. You have three options as regards inserting your desired HTML into this field, namely;

1) Edit the HTML code directly, by clicking the 'source' button in the edit area, and then entering your HTML code in the window that appears.

2) Use the in-built WYSIWYG Editor (more on which below)

3) Use a third party HTML authoring application, then copy & paste your finished HTML into the HTML edit box, again loaded by clicking the 'source' button.

This versatile feature enables you to get a really custom look and feel about the major editorial sections of your site - you can even incorporate graphics into your page (although you will have to use absolute http:// paths to your graphics as they will need to be located on your own, personal web space, off the Spoken Network System - not a problem so long as they are small enough not to slow the page-load).

WYSIWYG editor

To make editing your HTML as easy and intuitive as possible, this page includes a 'what you see is what you get' HTML page editor for you to use - right off the page! This gives you a really simple view of exactly how your popup text will appear, without having to get into the HTML coding side of things.

Fig. 2.5.9.3: The "WYSIWYG" editor, for creating and editing the text on your popup window:

This inbuilt HTML editor is designed to give you straightforward control over the layout of the main text in the Popup. The editor is designed to be intuitive to anyone who is familiar with standard word processing editing options, but for those who are not, you can access a special help page entirely on the features of the editor window, by visiting the section of this manual entitled: "WYSIWYG Editor".

Delay

This is the period of time (in seconds) after which the popup page will appear, (timed from the point at which the home page has fully loaded for your visitor).

Width

This is the width of your popup window (in pixels).

Height

This is the height of your popup window (in pixels).

Enabled (checkbox)

If you click the 'Enabled' checkbox, the popup will appear when someone visits the homepage. If you do not check this box, your pop-up will not appear. It follows that, if you already have a popup on your home page and want to remove it, you can disable the Homepage Pop-up simply by unchecking the 'Enable' box.

Position

This is the Pop-up window's screen position, on top of your home page, when it appears. Click on the drop-down menu and make your selection from the following options:

Moving onto the Styles options, there are a number of other fields that you need to fill out. As the name suggests, these elements determine the overall look and feel of  your popup window, the way it will present to your visitors.

Background

This where you specify the background color of the popup window. Click on the color picker button from the right side of the background option and a Color Picker window will appear. You just need to select the desired color and it will appear in the box situated on the left of the color picker button, along with the code of that specific color. Alternatively, if known, you can enter the hexadecimal value directly into the color text box - the color sample will update to reflect your selection, accordingly.

Background Image (Bg Image)

You also have the option to use a background image instead of a color. Just click on the "Browse" button next to the Background Image box and select the desired image from the folder on your computer in which the file is stored. The Pop-up window will tile this image in the background, if smaller than the window's overall dimensions.

Border Color

If you want the popup to have a border color, just click on the color picker button from the right side of the Border Color option and a Color Picker window will appear. You just need to select the desired color and it will appear in the box situated on the left of the color picker button, along with the code of that specific color. Again, if known, you can enter the hexadecimal value directly into the color text box - the color sample will update to reflect your selection, accordingly.

Fig. 2.5.9.4: The Color Picker window

Border Width

This is where you specify the width of the popup border (in pixels).

Border Style

To choose a style for the popup border, click on the drop-down menu and select one of these options: Solid, Dotted or Dashed.

Header Text

This is where you can choose the color of the header text. Just click on the color picker button from the right side of the Header Text option and a Color Picker window will appear. You just need to select the desired color and it will appear in the box situated on the left of the color picker button, along with the code of that specific color. If known, you can enter the hexadecimal value directly into the color text box - the color sample will update to reflect your selection, accordingly.

Body Text

This is where you can choose the color of the body text. Just click on the color picker button from the right side of the Body Text option and a Color Picker window will appear. You just need to select the desired color and it will appear in the box situated on the left of the color picker button, along with the code of that specific color. If known, you can enter the hexadecimal value directly into the color text box - the color sample will update to reflect your selection, accordingly.

Link Text

This is where you can choose the color of the link text. Just click on the color picker button from the right side of the Link Text option and a Color Picker window will appear. You just need to select the desired color and it will appear in the box situated on the left of the color picker button, along with the code of that specific color. If known, you can enter the hexadecimal value directly into the color text box - the color sample will update to reflect your selection, accordingly.

Link Hover

This is where you can choose the color of the link hover text (that is, the color to which the link text momentarily changes, whilst the customer's mouse passes over the link). Just click on the color picker button from the right side of the Link Hover option and a Color Picker window will appear. You just need to select the desired color and it will appear in the box situated on the left of the color picker button, along with the code of that specific color. If known, you can enter the hexadecimal value directly into the color text box - the color sample will update to reflect your selection, accordingly.

Saving, Canceling and Previewing your Home Page Popup changes

There are three buttons at the bottom of the Home Page Popup screen. Their functions are as follows:

"Preview Popup" Button: This button allows you to load the pop-up window illustrating exactly how the changes you have just made will look when your page is made live. This is a great way to visualize how the text you've used appears on the popup, and to make sure you're happy with the overall effect of your editing. This button does NOT make changes to your 'live' site - it is only for use as a visual 'proof' of your proposed changes to the popup.

"Cancel" Button: This button allows you to exit the Home Page Popup screen without saving any changes you may have just made to your popup. If, for example, you preview the popup and you're really not happy with the effect, you can abandon your proposed changes by clicking the "Cancel" button. Only clicking the "Save Changes" button (details of which are below) will you commit your changes.

"Save Changes" Button: This button saves any changes you might have made to the popup. On saving, the system will return you to the default Partner Administration Site page.

Tip:

It is highly recommended that you make full use of the "Preview Popup" button facility to ensure that the changes you have proposed appear exactly as you  want, BEFORE committing the changes to the 'live' site by clicking the "Save Changes" button (although you can of course edit the popup again, and recommit additional changes, should you need to correct an error).