Webpage maker Manual

1. What is Webpage Maker?

2. General structure

3. List of elements

4. Inserting elements4.1 Image4.2 Text4.3 Buttons4.4 Information4.5 Contact4.6 Description

5. Eliminating elements

6. Property panel6.1 Image Properties6.2 Text Properties6.3 Button Properties6.4 Information Properties6.5 Contact Properties6.6 Description Properties6.7 General Properties

7. Page design7.1 Selecting elements7.2 Moving elements7.3 Adjusting page size

8. Managing templates8.1 Loading template8.2 Saving template8.3 Deleting template

9. General options9.1 Preview9.2 Accept9.3 Cancel

1. What is Webpage Maker?

The program Webpage Maker is a part of Hosting by 3D Vista that allows users to create WebPages for their virtual tours without needing any technical knowledge of programming.

With just a few clicks you can create a professional site with images, texts and advanced functions, as well as get the statistics on page views. And by using web editor, your page will get better rankings in Google and other search engines.

The user interface of Webpage Maker has been designed so that the elements can be placed on screen by dragging and dropping. Once finalized, Webpage Maker will change this design into a real webpage that would take hours if you would have to program it.

If you want to use the same design for your pages, you can save time by saving the template and using them for all of your pages.

Webpage Maker works in synchrony with VistaZoo, so that the data used in the portal is directly exported to tour as information (description, price, address, etc.)

To access Webpage Maker you need to host the tour first in 3DVista Hosting, either via SHOW 3 or Publisher 4, or using any of the online services of 3DVista such as VistaZoo or VistaTour. Once the tour is hosted, we can access the “Webpage Maker” aplication from the Hosting menu (in SHOW 3 or Publisher 4) or from the user control panel (VistaZoo and VistaTour)

Next we will explain what Webpage Maker offers and how to create your page in a few minutes.

2. General structure

Webpage Maker consists of the following elements:

• List of page elements where the contents can be inserted/deleted and their sequence on the page can be changed.

• Property panel of the elements. • Canvas where page design will be visualized. • General options of the program (Accept, Cancel, Preview)

Graphically we will find this design:

3. List of elements

Basically, the list of elements allows managing the contents that will appear on the finalized page.

These elements can be the following:

• Pictures• Text• Buttons• Tour Information• Contact• Tour Description

Besides the elements shown in the Content window, there are two other elements that always appear in the list and cannot be deleted:

• “General” panel that defines page characteristics. It is always the first element of the list.

• “Viewer” of the virtual tour is always the last element of the list.

The order in the Content list is important because it allows establishing the elements which will be shown in the background or as the first one compared to the others. Meaning that the first element of the list will be placed in the most backward position and the last element will be shown in the first position above other elements.

To change the order of the elements there are two possibilities:

The first consists of the following steps:

• Choose the element by clicking on it in the list of elements.• Use the following moving buttons:

Allows moving the element to the beginning of the list, to the position that comes immediately after the “General”. It will be enabled only if the element is not already in that position.

Allows moving the element to the position above its current one. It will be enabled only if the element is not situated right after the “General” at the beginning of the list.

Allows moving the element to the position below its current one. It will be enabled only if the element is not situated right before the “Viewer” at the end of the list.

Allows moving the element to the end of the list, to the position that comes immediately before the “Viewer”. It will be enabled only if the element is not already in that position.

The second way to change the order of the elements consists of the following steps:

• Go on the element in the list of elements and click on it with the Mouse.

• Drag the element to the desired position in the list.

When it comes to restrictions in the order of the elements, it is important to remember that:

• The elements “General” and “Viewer” have fixed positions that cannot be changed.

• None of the elements can be situated to the position before the “General” and after the “Viewer”.

4. Inserting elements

4.1. Image

This option allows adding pictures to the webpage.

To insert an image, just select it from the drop-down menu and click the Add button. The program will show a window of the archives from the current directory where you can choose the file name of the image you want to add. Then the chosen image will appear on the upper-left corner of the canvas. To move it to another position, just click on it and drag it to the wanted position. Also, the list of contents will renew itself to include the new item as the last one before the “Viewer”.

You can add as many images as you like.

4.2. Text

The text option allows adding different texts to the finalized page.

To insert a text element just choose it from the drop-down menu and click on the Add button. Then the text will appear on the upper-left corner of the canvas. To move it to another position, just click on it and drag it to the wanted position. Also, the list of contents will renew itself to include the new item as the last one before the “Viewer”.

You can add as many texts as you like.

4.3. Buttons

The button option allows adding button toolbar with previously set functions to the finalized page. It is especially useful for real estate virtual tours.

To insert a button toolbar, just choose it from the drop-down menu and click on the Add button. Then the button toolbar will appear on the upper-left corner of the canvas. To move it to another position, just click on it and drag it to the wanted position. Also, the list of contents will renew itself to include the new item as the last one before the “Viewer”.

You can only have one button toolbar on the finalized page.

4.4. Information

Information option allows adding a text box with tour properties to the finalized page. This information can be obtained from VistaZoo and VistaTour portals because it is necessary to first upload the virtual tour there.

To insert an information element, just choose it from the drop-down menu and click on the Add button. Then the information will appear on the upper-left corner of the canvas. To move it to another position, just click on it and drag it to the wanted position. Also, the list of contents will renew itself to include the new item as the last one before the “Viewer”.

You can only have one information element on the finalized page.

4.5. Contact

Contact option allows adding a text box with tour author’s contacts to the finalized page. This information is obtained from VistaZoo and VistaTour portals because it is necessary to first upload the virtual tour there.

To insert a contact element, just choose it from the drop-down menu and click on the Add button. Then the information will appear on the upper-left corner of the canvas. To move it to another position, just click on it and drag it to the wanted position. Also, the list of contents will renew itself to include the new item as the last one before the “Viewer”.

You can only have one contact element on the finalized page.

4.6. Description

Description option allows adding a text with tour description to the finalized page. This information is obtained from VistaZoo and VistaTour portals because it is necessary to first upload the virtual tour there.

To insert a description element, just choose it from the drop-down menu and click on the Add button. Then the information will appear on the upper-left corner of the canvas. To move it to another position, just click on it and drag it to the wanted position. Also, the list of contents will renew itself to include the new item as the last one before the “Viewer”.

You can only have one description element on the finalized page.

5. Eliminating elements

Any of the inserted elements can be deleted from the finalized page.

There are two ways to do this.

The first one consists of:

• Selecting the element or elements that you wish to delete (for multiple selection press the Shift or Ctrl + Mouse button).

• Clicking the Delete button which will only be enabled when you have already chosen some of the elements.

The other way is to select the element or elements and press the Delete button on the keyboard.

On both cases you will be shown a confirmation Popup to make sure that you really wish to delete the selected elements. Once accepted, these elements will be removed from the canvas and from the list of contents, renewing the position of other elements.

6. Property panel

Property panel allows the edition and modification of the properties of this element that you have chosen. By default, if no item has been selected, you will be shown the properties of the general panel.

6.1. Image Properties

The image properties are the following:

• Image type.• Dimensions of the image (width x height) in pixels.• File name as it has been saved in the hosting account.• Option for changing image.• Options for establishing a link from the image.

The Change Image option allows substituting the current image by opening a window of files for choosing a new image and updating the changes on the canvas and in the list of contents.

The options for establishing a link from the image allows linking the image with a web page, e-mail address or with other type of addresses. This way, by clicking on the image on the finalized page, it will open the link specified before with these options.

To establish a link, the following steps are necessary:

• Write the address in the text box.• Choose the type of the address inserted from the drop-down menu. • Click the Link button.

If the address is not correct or does not correspond to the type selected, an error message will appear. When everything is correct, the link will be established.

It is also possible to delete a link. For this just delete the text box with the specified address and click the Link button.

6.2. Text Properties

The text properties are the following:

• Text content• Option for changing text font.• Option for changing text alignment.• Option for changing text color.• Option for establishing links.

To modify the text content, just write in the text box shown. To change the font, click the Font button. Then you will see a Popup where you can choose the options of type, style, size and the option of underlining the text.

To change the alignment, just choose one of the possibilities (left, centre, right alignment) from the drop-down menu.

To change the color, click on the colored box and choose the color that you like.

Establishing links is somewhat more complicated than with images. The main difference is that with images just one link was established but with text you can establish various links with the words you choose.

To establish a link with a text element, follow these steps:

• Choose the part of the text that you would like to use as a link. To do this, go on the text box and choose the wanted area by using keyboard or the Mouse.

• Write the address in the corresponding text box (making sure that the selected word is underlined).

• Choose the type of the address (website, email address, other).

• Click on the Link button.

The link will appear underlined and in blue color in the property panel as well as on the canvas.

To have more links, repeat the steps above but choose new words you want to link.

To edit each of the established links, click on each of them in the text box.

It is also possible to delete the links. For that just choose the link you want to delete by clicking on it, then delete the specified address and click on the Link button.

6.3. Button Properties

The button toolbar properties are the following:

• Option for choosing button type.• Option for changing the font and color of text on buttons.• Option for changing button alignment.• Option for modifying separation between buttons.• Option for showing or hiding text on buttons.• Type of image used for current button.• Dimensions of the image used for current button.• Option for showing or hiding current button.• Option for changing the image for current button.

There are 7 types of buttons on the button toolbar:

Map button. Gives access to the location of tour using Google-maps.

Brochures button. Allows creating a brochure related to the tour or edit it when it already exists. An option for this will be enabled.

Send button. Allows sending an email to the address that has been established with the link.

Mortgage button. When clicked on it, will show a specific calculator for carrying out a mortgage calculation.

Schools button. Allows access to a web page with a list of all the schools and libraries situated in the same zone where the tour was made.

Community button. Allows access to a web page with statistics and profiles of the zone where the tour is located.

Schedule button. Allows sending an email to the tour author to make an appointment on the shown date. For that it is necessary to specify the email address of the tour author in the corresponding options that are enabled when you choose this button while making the page.

By selecting any of these buttons, the properties of the particular button chosen will be visualized.

The alignment of the button toolbar can be horizontal o vertical, allowing the buttons to appear as a row or column.

6.4. Information Properties

The information properties are the following:

• Option for choosing if the fields are shown in 1 or 2 columns.• Option for showing or hiding the fields without content.• Option for changing color and font of field names.• Option for changing the color and font of field content.• Option for ordering position of the fields. For this it is necessary to

choose the field by clicking on it in the field list and use the following buttons for increasing or decreasing a position:

Allows decreasing a position of the field chosen.

Allows increasing a position of the field chosen.

6.5. Contact Properties

The contact properties are the following:

• Option for choosing if the fields are shown in 1 or 2 columns. • Option for showing or hiding the fields without content.• Option for changing color and font of field names.• Option for changing color and font of field content. • Option for ordering position of the fields. For this it is necessary to

choose the field by clicking on it in the field list and use the following buttons for increasing or decreasing a position:

Allows decreasing a position of the field chosen.

Allows increasing a position of the field chosen.

• Options for changing the position and alignment of the contact image with possibilities as left, right, upper, lower and centre alignment.

6.6. Description Properties

The description properties are the following:

• Content of tour description (cannot be edited).• Option for changing font of description text.• Option for changing the alignment of description text. For this it is

necessary to choose one of the options (left, centre and right) from the drop-down menu.

• Option for changing the color of description text.

6.7. General Properties

The general properties are the following:

• Page Title. • Dimensions of the page (width x height) in pixels.• Vertical alignment of the page.• Horizontal alignment of the page.• Background color of the page.• Option for including Google Analytics on the page.• Option for including Meta Tags on the page.• Options for showing/hiding description, information, contact and

button toolbar elements.

To modify the dimensions of the finalized page, just introduce the wanted width and height to the fields and press Enter.

The canvas will renew itself according to the specified measures. When the size does not correspond to the position of the contents, an error message will pop up, leaving the size unchanged.

To modify the vertical alignment of the page, choose one of the options (upper, centre or lower) from the corresponding drop-down menu.

To modify the horizontal alignment of the page, choose one of the options (left, centre or right) from the corresponding drop-down menu.

The option of Google Analytics allows inserting the necessary code for tracking to the finalized page. By clicking on that option a Popup window will appear to enable the option of including the code, as well as a text box for adding the corresponding Google account.

The Meta Tags option allows including tags of description and keywords for searches to your page. For this click on the option and a Popup window will appear for enabling the corresponding options and inserting the necessary texts.

7. Page design

Page design will be achieved through a canvas that allows showing all the elements that the page will include, as well as its position and appearance.

When no page has been created, an empty canvas will appear with the “Viewer” in the center.

7.1. Selecting elements

There are two ways to select the elements:

• By clicking on the corresponding item in the element list.• By clicking on the corresponding element on the canvas.

One way or another, the element will be shown as selected on the canvas as well as in the content list. Also, in the property panel the properties related with that element will be shown.

To delete the selection, just click on any part of the canvas that does not have any elements.

7.2. Moving elements

To move an element on the canvas, select it first. Once it has been chosen, it can be moved by using the arrows on the keyboard or by dragging it with the Mouse.

Description as well as text component can be resized. Do to that use the corners of the text box and drag the Mouse to change the size of the element.

7.3. Adjusting page size

There are two ways of visualizing the page:

• Visualization with the size adjusted to the screen. (This is the option that will be shown by default.)

• Visualization with the real size of the page.

Furthermore, the page can be shown in the full screen mode or in the normal way. With both ways the two visualization possibilities are permitted.

To change the visualization one or another way or to change to full screen mode, use the buttons that can be found in the lower part of the canvas.

The canvas also has an adjustment bar that allows resizing the page from the adjusted size to the real size.

8. Managing templates

After creating a design that you want to use for more than one page it is advisable to save it as “template” to save yourself from the trouble of creating the same design over and over again. Simply with choosing a template, the page that we are editing will obtain its characteristics.

It is possible to load a template, save the current page as a template or delete a template created by the user.

8.1. Loading template

To load a template, choose it from the drop-down menu. The canvas, content list and also the property panel will renew itself with the contents of the chosen template. The changes that have been made previously will not be saved, making the loaded template the current page.

In the drop-down menu are the templates that are predefined by the program as well as the templates that the user has created.

8.2. Saving template

To save the current page as a template, click on the Save button in the template panel.

A Popup window will appear for writing the name which you wish to use for saving the template and afterwards the template will be created.

Once created, the same template will appear in the end of the drop-down menu after all the other templates.

When you wish to make changes to a template and save them, you have to save it as another template. In other words, once that the template has been saved, it can not be modified.

8.3. Deleting template

It is important to mention that only these templates that have been created by the user can be deleted. The predefined templates cannot be deleted. The Delete button will only appear enabled when user created template has been loaded.

To delete a template, load it and click on the Delete button in the template panel. This way the template will be deleted from the drop-down menu, although the content keeps being loaded.

9. General options

General options of the program are associated with the generation of the designed page. There is an option of preview; option of accepting the changes and close the program and option of closing the program without saving the changes made.

9.1. Preview

The preview option allows obtaining a preliminary version of how something will appear on the current page, without having created it yet. That is why it is a useful way of seeing the changes made and continuing making modifications before having the definite version.

In the preview of the page all of the components are shown with the functions that have been specified for them. In other words, the links that have been added to the pictures, texts and actions associated with the buttons, will be active.

9.2. Accept

Accept option allows saving the current page with all the changes that have been made and close the program.

9.3. Cancel

Cancel option allows closing the program without saving the changes made. Before a Popup will show to confirm that no changes will be made and that the program will close if you accept it.