Split Frame Pages

What is a Split Frame Page?

This is a Page Type that allows you to display two different sections of content (a Viadesto Page, an Image from your Media Library, or any URL) within the same page (content area). This offers more layout options for your pages than ever before.

A Split Frame Page allows you to combine two Page Layout Templates that you couldn’t previously combine. For example, you can combine an Info page with a Catalog Page, or a Discussion Board with a Calendar Page, or an Info Page with a User Profile Page, or use it to create an Advanced Photo Gallery Page (see examples of all these below).

There are three different options for your sections of content, which are:

·  An existing Viadesto Page

·  Image (from your Media Library)

·  Any URL

These can be displayed either horizontally or vertically on the screen.

How to Create a Split Frame Page?

To create a Split Frame Page, click the Create New Page dropdown list located under the Create New Page icon and select Split Frame. This will launch the Create/Modify Page screen shown below.

Insert the Navigation Link Name in the Navigation Link Name field.

Frame Direction- This indicates whether the Split Frame Page will display the included sections to be one on top of each other (Horizontal) or side by side (Vertical). Select the appropriate choice.

First Frame (this section will be displayed either on top, or to the left of the screen).

·  Choose ONE type of content (Page to Load, Image, or Web URL) for this section of the screen.

·  Specify Size (either by Pixel or by Percentage- the other frame will resize accordingly)

NOTE- out of the two sections on the screen, ONLY one section will be a set screen size, while the other section will be re-sized accordingly. (e.g. if the you set the first frame to be 60%, the second frame will automatically be set to 40%).

Second Frame (this section will be displayed opposite the First Frame, either on bottom or to the right of the screen).

·  Choose ONE type of content (Page to Load, Image, or Web URL) for this section of the screen.

·  Specify Size (either by Pixel or by Percentage- the other frame will resize accordingly)

NOTE- out of the two sections on the screen, ONLY one section will be a set screen size, while the other section will be re-sized accordingly. (e.g. if the you set the first frame to be 60%, the second frame will automatically be set to 40%).

Click Save to save your new Split Frame Page!

NOTE- just like Direct Link Pages, this page can ONLY be edited by going to the Main Admin screen and selecting this page from the Edit or Remove Page select list.

Examples of Possible Split Frame Page Uses:

Catalog Page with Info Page

In this example a Course Catalog page is used for the 1st/top frame and an Info Page detailing the Course Descriptions is used for the 2nd/bottom frame. This is a horizontal Split Frame Page. The 1st/top frame is set at 60 percent.

Calendar with Info Page

In this example a Calendar Page is used for the 1st/top frame and an Info Page detailing information about upcoming events is used for the 2nd/bottom frame. This is a horizontal Split Frame Page. The 1st/top frame is set at 75 percent.

NOTE: A link to the Calendar Page must be used in the Web URL field rather than selecting the Calendar Page from the Page to Load Select List. To obtain the correct URL do the following:

·  Go to the Calendar Page

·  Right click on the calendar

·  Select Properties

·  Copy the URL (Example: http://www.help.viadesto.com/myadmin/Calendar/maincalendar.asp?NavPageID=37694)

·  Paste only the last portion of the URL (/myadmin/Calendar/maincalendar.asp?NavPageID=37694) into the Web URL field of the correct frame.

User Profile Page with Info Page

In this example a User Profile Page is used for the 1st/left frame and an Info Page is used for the 2nd/right frame. This is a vertical Split Frame Page. The 1st/left frame is set at 70 percent.

NOTE: A link to the User Profile Page must be used in the Web URL field rather than selecting the User Profile Page from the Page to Load Select List. To obtain the correct URL do the following:

·  Go to the User Profile Page

·  Right click within the content area of this page

·  Select Properties

·  Copy the URL (Example: http://www.help.viadesto.com/myadmin/Calendar/maincalendar.asp?NavPageID=37694)

·  Paste only the last portion of the URL (/myadmin/Calendar/maincalendar.asp?NavPageID=37694) into the Web URL field of the correct frame.

Advanced Photo Gallery

This last example allows you to display the thumbnails of a Photo Gallery page on one part of your screen, while the corresponding (enlarged) version of the same image shows up in the opposite frame. This requires additional configuration of the Photo Gallery page, such that it works in conjunction with the Split Frame Page.

To create an Advanced Photo Gallery you can do the following:

·  Create an Info Page

·  Click on the Advanced Options Tab

·  Click on Layout Template Select List

·  Select Photo Gallery

·  Click on the HTML Tags Tab

·  Click on the Thumb Target Select List

·  Select either the First Split Window if you want the larger image to appear in the left frame or select the Second Split Window if you want the larger image to appear in the right frame.

·  Insert the Number “1” into the Number of Columns field

·  Click Save

·  Add one image per item on the page

·  Create a Split Frame Page

·  Choose the Vertical Split Frame Layout

·  Select the image in the Media Library that corresponds with the first thumbnail picture of the photo gallery for the First Frame.

·  Select the Specify Size option for the First Frame. Insert 75 into the percent field.

·  Select the Photo Gallery page for the Second Frame.

·  Click Save.