We will add elements to the index page in this section.
Open the index page by double clicking "index.html" in the Website Explorer.
Drag the image "Sky_Background_With_Green_Grass.jpg" from the Website Explorer and drop it on the page. The size of the image is 900 x 330. Move it to 120 pixels from the top and 0 pixel from the left. You will notice that the text element for copyright text was moved downward automatically as we marked it as a footer element on the template page.
As the image is quite large for mobile devices, we will select the option "Use responsive images" so that browsers will load a smaller versions of this image according to the width of the browser window. Double-click on the image to open the Image Properties Dialog as below:
Select the option "Use responsive images". Click on the OK button. As we have not generated the responsive images yet, a message shown below will ask if we want to create them. Click on the "Yes" button to create them. In case you change the image after creating the responsive images, be sure to generate them again. Find the file "Sky_Background_With_Green_Grass.jpg" in the Website Explorer. Right-click on it and select "Create responsive images" from the context menu.
We are going to create a CSS style for a separator which will be used in text elements. Open the CSS Style Editor by selecting "Tools" > "CSS Style Editor" from the main menu or clicking on this button on the toolbar. Click on the "Add" button on the right to create a new style and rename it to "paragraph-separator". Click on the "Borders" tab on the left and enter values as shown below. Only the bottom border is set.
Insert a text element on the page by clicking on this button . Resize the width to 600 by dragging the handle on the right edge of the text element. Double-click on the newly inserted element to open it in the Text Element Editor. We will use the following text as example. Copy and paste the following text to the editor.
Heading 1 - Vivamus dapib convallis magna sed fringillat taciti sociosqu ad litora torquent per conubia nostra.
Heading 2 - Nullam at erat purus, at imperdiet augue. Aliquam in volutpat massa. Suspendisse potenti. Aenean venenatis tempor varius. Curabitur mollis, mauris at accumsan convallis.
Paragraph : Class aptenNullam at erat purus, at imperdiet augue. Aliquam in volutpat massa. Suspendisse potenti. Vivamus dapibus convallis magna sed fringillat taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean venenatis tempor varius. Curabitur mollis, mauris at accumsan convallis.
Paragraph : Mauris ut fringilla est. In pretium porta massa sit amet gravida. Proin sed odio arcu. Curabitur convallis nisi eget elit pretium faucibus hendrerit metus pulvinar. Suspendisse ut dolor augue. Nullam at erat purus, at imperdiet augue. Aliquam in volutpat massa. Suspendisse potenti. Vivamus dapibus convallis magna sed fringilla.
Read more >>>
After pasting the text, it will look like the following:
Place the cursor before the line "Heading 2" and press the <Enter> key to create an empty paragraph.
To make sure that the pasted text are all paragraphs, click on this button on the toolbar to show the block formats. The following will be shown. Each paragraph should be wrapped inside a box with a letter "P" at the top left corner.
Now click on the line starting with "Heading 1". Select "Heading 1" from the drop down menu.
After this, the drop down menu will show "Heading 1" and the letter "P" on the top left corner now become "H1". The heading 1 style we customized in Step 1 will now be applied automatically.
Now click on the line starting with "Heading 2". Select "Heading 2" from the drop down menu.
After this, the drop down menu will show "Heading 2" and the letter "P" on the top left corner now become "H2". The heading 2 style we customized in Step 1 will now be applied automatically.
Now we can turn off the showing of the blocks by selecting this button .
Select the text "Read more >>>" like the following. Click on this button to open the "Add Hyperlink Dialog". Select the values from the drop down menus as shown below. In your real website, it should link to the "Read more" page you create. We select "index.html" for demonstration only.
Press "OK" button to add the hyperlink. The text will now look like the following.
Click on the empty paragraph below the "Heading 1". Insert a space and select it. Select style "paragraph-separator" from the drop down menu.
After the above, it will look like below:
Click on the "Save and Close" button to save the changes. Resize the text element to 600 x 370. Move it to 470 pixels from the top and 10 pixel from the left.
We are now going to create two new styles for the link "Read more >>>". Open the CSS Style Editor by selecting "Tools" > "CSS Style Editor" from the main menu or clicking on this button on the toolbar. Click on the "Add" button on the right to create a new style and rename it to read-more-link" by clicking on the "Rename" button or pressing "F2".
Click on the "Text" tab on the left and set the values as shown below.
Click on the "Elements" tab and select the options as shown below to apply the styles to links only.
Create another new style by clicking on the "Add" button again. Rename it to "read-more-link-hover".
Click on the "Text" tab on the left and set the values as shown below.
Click on the "Elements" tab and select the option as shown below to apply styles to links when a mouse pointer is over them.
Click on the OK button to save these 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 "read-more-link" and "read-more-link-hover" from the "Available CSS Styles" and drop them to the element on the page. If that element is already selected, you can just drag these styles and drop them to the "Page / Element CSS Styles" panel above. Both will result in the following:
After this, the text element will look like the following.
Insert another text element to the page by clicking this button . Double-click on the newly inserted element to open it in the Text Element Editor. Copy and paste the following text to the editor.
Heading 2 - Mauris at accumsan
Class aptenNullam at erat purus, at imperdiet augue.
Aliquam in volutpat massa. Suspendisse potenti.
Vivamus dapibus convallis magna sed fringillat.
Curabitur mollis, mauris at accumsan convallis.
After pasting the text, it will look like the following.
Now click on the line starting with "Heading 2". Select "Heading 2" from the drop down menu which are now showing "Paragraph".
After this, the drop down menu will show "Heading 2".
Select all other lines together just like the following. Click on this button to turn them to a list.
Click on the "Save and Close" button to save the text. Resize the text element to 290 x 200 and move it to 880 pixels from the top and 10 pixel from the left.
Insert another text element on the page by clicking this button . Double-click on the newly inserted element to open it in the Text Element Editor. Copy and paste the following text to the editor. Apply the steps as shown above to this one.
Heading 2 - Proin sed odio arcu
Curabitur convallis nisi eget elit pretium faucibus hendrerit metus pulvinar.
Suspendisse ut dolor augue. Nullam at erat purus, at imperdiet augue.
Aliquam in volutpat massa.
Suspendisse potenti.
Vivamus dapibus convallis magna sed fringilla.
The final results should look like this.
Click on the "Save and Close" button to save the text. Resize the element to 290 x 200 and move it to 880 pixels from the top and 330 pixels from the left. The two text elements will look like this.
Insert another text element to the page by clicking this button . Double-click on the element to open it in the Text Element Editor. Copy and paste the following text to the editor.
Heading 2 - Lastest News
2017 Jan 24
Paragraph : Mauris ut fringilla est. In pretium porta massa sit amet gravida. Proin sed odio arcu. Cras lacinia molestie est, at tincidunt lectus rhoncus vitae.
Read more >>>
2017 Jan 4
Paragraph : Nullam at erat purus, at imperdiet augue. Aliquam in volutpat massa. Suspendisse potenti. Vivamus dapibus convallis magna sed fringilla.
Read more >>>
The results will look like the screenshots below.
Place the cursor before the text "2017 Jan 4" and press the <Enter> key to create an empty paragraph like the following.
Click on the first line "Heading 2 - Lastest...". Select "Heading 2" from the drop down menu. Then do the same to the dates "2017 Jan 24" and "2017 Jan 4".
Perform Point 13 above to link both the text "Read more>>>" to the page "index.html".
Click on the empty paragraph above the date "2017 Jan 4". Insert a space and select it. Select style "paragraph-separator" from the drop down menu.
The "Paragraph" has a bottom padding of 10px. As we do not need the padding for both links "Read more>>>", we mark those two links as "Text". Click on the "Read more>>>" link and select "Text" from the drop down menu. Apply the same to the next "Read more>>>" link. You can click on the button on the toolbar to show the block formats to confirm that they are not wrapped in a box with the letter "P" on the top left corner as show below.
Click on the "Save and Close" button to save the text. Resize the text element to 240 x 370. Move it to 470 pixels from the top and 650 pixels from the left.
Drag the styles "read-more-link" and "read-more-link-hover" from the "Available CSS Styles" and drop them to this element. If that element is still selected, you can just drag these styles and drop them to the "Page / Element CSS Styles" panel above. Both will result in the following:
After this, the text element will look like this.
Open the CSS Style Editor by selecting "Tools" > "CSS Style Editor" from the main menu or clicking on this button on the toolbar. Click on the button "Presets" on the right. A dialog as follows will be opened. If you find that no preset styles are shown, click on the button "Restore Default". Select the item "center-image-on-a-line". Then press the OK button to add it. We will use this preset style later. Then click on the OK button to exit the CSS Style Editor.
Insert a text element on the page by clicking on this button . Double click the newly inserted element to open it in the Text Element Editor. Click on this button and select the image "House.png". Press the OK button to add this image.
Enter the text "Location" into the editor next to the image "House.png". While the cursor is still on the first line. Select "Heading 3" from the drop down menu.
Place the cursor at the end of the word "Location" and press the <Enter> key once to go to the next paragraph. Copy and paste the following text to the editor.
New City, Country 21
Aliquam Street Second Floor
New City 21210
Tel : 000-0000-0000
Fax : 000-0000-0000
After pasting the text, it will look like the following:
Select the image "House.png" on the page. Select "center-image-on-a-line" from the drop down menu.
Now the word "Location" is centered as shown below:
Click on the "Save and Close" button to save the text. Resize the text element to 240 x 240 and move it to 860 pixels from the top and 650 pixels from the left. The results will look like this.
Open the CSS Style Editor by selecting "Tools" > "CSS Style Editor" from the main menu or clicking this button on the toolbar. Click on the "Add" button to create a new style. Change the name of the style to "text-box".
Click on the "Background" tab on the left and set the background color to #F5F5F5. Click on the "Borders" tab and set "Radius" to 10px. Click on the "Box" tab and set Paddings to 20px. Then click on the OK button to save the new style.
Drag the style "text-box" from the "Available CSS Styles" in the "CSS Styles" tab and drop it on the "Location" text element created previously. The text box will looks like below after applying the style. The rounded corners will not be shown in the Page Designer. It will only be shown when previewing in the internal or external browsers. As there are paddings added, you will need to resize the text element to 240 x 240 again.
We will add some spaces around several text elements on this page to make them looks better on mobile layout. Select the style "mobile-padding-10" in the "Available CSS Styles" panel and then right-click on it. Select "Copy Style" from the context menu.
Select the text elements as shown below.
Right-click on one of the selected text elements and select "Paste Style (Add)" from the context menu. The style will only be active when in mobile layout.
Click this button to save all the pages. Actually you should click this button or this one to save the pages more frequently so that when your computer crashes for whatever reasons, you will not lose all your changes.
You may like to change the title and add description and keywords to the page. Select "Edit" > "Page" > "Page Properties" from the main menu or right-click on the page and select "Page Properties" from the context menu. Replace the title "Untitled Page" with the one that reflects the contents of this page. Also add your description and keywords to the fields provided. Though adding contents to these two fields are not mandatory but they are important for search engine optimization.
After applying styles to a text element, you may find it difficult to edit the text sometimes. You can click on this button on the toolbar. It will disable the CSS styles temporarily. For example, it will make the following from
to
Sometimes you may need to check which lines are headings and which are paragraphs. You can click on this button to show them. Use the text element as shown above, clicking on this button will show the following:
on the toolbar. Click on the "Add" button on the right to create a new style and rename it to "paragraph-separator". Click on the "Borders" tab on the left and enter values as shown below. Only the bottom border is set.
. Resize the width to 600 by dragging the handle on the right edge of the text element. Double-click on the newly inserted element to open it in the Text Element Editor. We will use the following text as example. Copy and paste the following text to the editor. 
on the toolbar to show the block formats. The following will be shown. Each paragraph should be wrapped inside a box with a letter "P" at the top left corner.
.
to open the "Add Hyperlink Dialog". Select the values from the drop down menus as shown below. In your real website, it should link to the "Read more" page you create. We select "index.html" for demonstration only.
to turn them to a list.
and select the image "House.png". Press the OK button to add this image.
to save all the pages. Actually you should click this button or this one 
to save the pages more frequently so that when your computer crashes for whatever reasons, you will not lose all your changes.
on the toolbar. It will disable the CSS styles temporarily. For example, it will make the following from 
