This section will show you how to add elements to the template page. The template page will be used by all other pages. If you change anything on the template page, they will be updated to the pages that use this template page.
Drag the three images "company.png", "House.png" and "Sky_Background_With_Green_Grass.jpg" prepared before from the Windows Explorer to the folder "images" in the Website Explorer.
Open the template page (template.html). You can double click "template.html" at the Website Explorer to open it or select "template.html" and click this button to open it.
Drag the following image "company.png" to the template page from the Website Explorer.
Move the image to 0 pixel from the top and 0 pixel from the left.
Insert a text element on the page by clicking on this button . Double-click on the newly inserted element to open it in the Text Element Editor. Add this text "About us | Contact | Help" to the textbox of the editor.
Select the text "About us" and then click on this button to open the "Add Hyperlink Dialog". We do not have any other pages yet except the index page (index.html). So we just choose "A Page or File in This Site" and select the page "index.html". Click the "OK" button to save the settings and exit the dialog.
The link will now be shown in default styles of the browser. We will show you how to change this later. You can add links to "Contact" and "Help" in similar ways.
Click on the "Save and Close" button to add the text on the page. Then resize the text element to 180 x 30 and place it at 30 pixels from the top and 720 pixels from the left.
Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Click on the "Add" button on the right. A style with the name "style1" will be created automatically. While it is still being selected, click on the "Rename" button or press "F2" to rename it to "about-us-link".
Click on the "Text" tab on the left and set the values as shown below. We use the color #000000 for the link and the link will not be underlined.
Click on the "Elements" tab and select the options as shown. This setting will confine the style to apply to links only.
Create another new style and rename it to "about-us-link-hover" using the same steps as above. Click on the "Text" tab and set the values as shown below. We will use the color #259AB8 for the link and it will be underlined when the mouse is over it.
Click on the "Elements" tab and select the option as shown below. This style will only be in effect when the mouse pointer is over the link.
Click on the "OK" button to save these two new styles.
These new styles will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
To apply these styles to the text element on the page. Drag the styles "about-us-link" and "about-us-link-hover" from the "Available CSS Styles" and drop them on the element. If that element is already selected, you can just drag the styles and drop them to the "Page / Element CSS Styles" panel above. Both will result in the following:
The text element will now become:
We will add some spaces around this text to make it looks better on mobile layout. Use the same approach described above to create a new style and rename it to "mobile-padding-10". The padding will only be added applied to the text on mobile layout. So we select "mobile" from the "Breakpoint" column.
Click on the "Box" tab on the left. Set "Padding" to "10px". Then apply this style to the text element like Point 16 above.
Now we are going to add a navigation bar on the page. Select "Insert" > "Navigation Bar" from the main menu or just click on this button . Select "navbar78" from the Navigation Bar Templates Dialog and click on the "OK" button.
Select the first "Menu Item" and set the Link Properties on the right as below:
This makes the first item of the navigation bar link to the index page. You can add links to the other items in similar ways. To demonstrate adding sub-menu, select the first item "Menu Item" and click on this button several times. Several sub-menu items will be added under the selected item "Menu Item". We also do the same to the third and fourth items. The results will look like the following:
After refreshing the display pane of the navigation bar, you will see the following:
You can add links to the sub-menu items just like the top level items. Click on the "OK" button to add this navigation bar on the page. Move it to 70 pixels from the top and 0 pixel from the left. Then resize the width to 900 pixels by dragging the right edge of the navigation bar to the right. The top of the page should look like this after these actions:
Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar to open the "CSS Style Editor". Select the style "footer-text" and set the "Alignment" to "center". The "Font size" of 12px has already been set. Click on the OK button to save the settings.
Apply the style "footer-text" by dragging it from the "Available CSS Styles" and drop it to the text element with the copyright text. If the element is already selected, you can just drag the style "footer-text" and drop it to the "Page / Element CSS Styles" panel above. After applying the style, the text element will look like below:
Select the text element with copyright text.
Right-click on it to open the context menu and select "Mark as footer". Enter the values as shown below:
This element will be moved to the bottom of the other elements on pages that use this template page and there will be a gap of 20 pixels between this element and the other elements. If a page does not have any contents. This element will be placed at 500 pixels from the top of the page on desktop and tablet layout. On mobile layout, it will be at the bottom of the navigation bar. You can mark more than one elements as footer elements and they will all be moved downward if contents are added on a page that uses this template page.
to open it.
. Double-click on the newly inserted element to open it in the Text Element Editor. Add this text "About us | Contact | Help" to the textbox of the editor.
to open the "Add Hyperlink Dialog". We do not have any other pages yet except the index page (index.html). So we just choose "A Page or File in This Site" and select the page "index.html". Click the "OK" button to save the settings and exit the dialog.
on the toolbar.
. Select "navbar78" from the Navigation Bar Templates Dialog and click on the "OK" button.
several times. Several sub-menu items will be added under the selected item "Menu Item". We also do the same to the third and fourth items. The results will look like the following:
