Insert an hero image (full width large web banner image with text overlay)

This tutorial shows you how to insert a hero image (text element with large background image and text overlay which expands to the width of the browser window) on a page. Website Template 44 uses two of this images on the page "index.html".

Open a website and a page where you want to insert the hero image.
Click on this button on the toolbar or select "Insert" > "Hero Image" from the main menu.
The following dialog will be opened:
Select an image from your website. It will be used for the background of the text element. The one with size 1920x1080 will suffice. For example, we select an image "computer-desk.jpg". Choose text color and alignment. The more detailed descriptions of each option can be found on Hero Image Dialog.
Press the OK button and the following will be inserted on the page.
To change the text, double-click on the text element and open it in the Text Element Editor.
As CSS styles are applied to the element, it is not so convenient for editing. Click on this button on the toolbar to disable the styles and this one to show heading and paragraph tags. It will look like below. You may like to start the text element editor with these two buttons turned on by default. Select "Tools" > "Preferences" from the main menu. Click on the item "Text Element Editor" and select the options on the right.
You can now change the sample text to your own. If you do not need any blocks like Heading 4, just delete it. To change the text of the link, you can edit it directly or even better, double-click on it or when the cursor is on the link, click on this button on the toolbar. The following dialog will be opened. You can edit the text and also change the link.
Several CSS styles are created automatically. Select the text element that has just been inserted and click on the CSS Styles tab on the left. The relevant styles are shown there.
To change the background image, text colors of headings and paragraph etc, you can double-click on the styles and change the corresponding values. For example, to change the background image, double-click on the style "hero1-background-image". Then click on the "Background" tab and select another image from the drop down menu.

If you have deleted the line for Heading 4, you can delete the corresponding style "heor1-text-h4". To change the text color of heading 2, double-click on the style "hero1-text-h2". Then change the color there as shown on the screen shot below. Other styles can be changed in similar way.
As there are several tabs for each style, you do not need to go through each of them to see if there are settings made. Just check out the name of the tab. The one with an asterisk before the name have values that are set.
The style for the overlay is not in the container "outer". You need to select "inner-1" from the drop down menu. You will see the style "hero1-table-overlay". Double-click on it and click on the "Background" tab. You can change the overlay color and also the alpha value of the color there.
You may need to change the page width again after adding more elements on the page. As the page width may be different from the one you set before or you just use the default 1190. Select "inner-3" from the drop down menu. You will find the style "hero1-max-width". Double-click on it and click on the tab "Block". Change the value of "Max width" to the new width of your page.

After changing the maximum width to the width of your page, right-click on the text element and select "Expand to Browser Window Width" from the context menu. Deselect the option "Expand the width of this element to the width of the browser window". Resize the width of the element to the width that you set to the maximum width above. Then right-click on the element again and Select "Expand to Browser Window Width" from the context menu. Select the option "Expand the width of this element to the width of the browser window". Press the OK button to save the setting.
To create another hero image with similar style, just copy the text element and paste it on the page. Then change the contents. It will use the same styles. For any styles that they do not share, duplicate them and replaced the copied styles with the new ones. For example, if only the background image needs to be changed, duplicate the style "hero1-background-image" and give it another name such as "hero2-background-image". Select another image for the new style. Assign it to the copied text element and at the same time remove "hero1-background-image" from it. Use the same approach for any styles that they do not share.