Hero Image Dialog

Hero Image Dialog
The options selected on this dialog can be changed through the generated CSS styles after the text element is inserted on the page.


1. Image
Select a large image for the background of the text element. An image of size 1920x1080 will suffice. Too large will make your page load slowly and the browser will also need to resize the image to fit the screen.

Import... button

2. Import... button
If the above image is not in the website yet, you can click on this button to import it to the website from images on your computer.

Fixed background

3. Fixed background
Select this option to fix the background image so that it will not scroll with the page.

Use responsive images

4. Use responsive images
Select this option to use responsive images for the background image. It is selected by default. Several smaller images will be created from the one you select on the field "Image". Browsers will select which image to load according to the width of the browser window. So small device like mobile phone will not load the one with width 1920 but a smaller version of it with width 320 etc.

Add overlay:

5. Add overlay:
An overlay with translucent color will be created to cover the original image so that black or white text will be more prominent as images usually have various patches of bright and dark areas. This option is selected by default. The left one is without overlay and the right one with. Please note that the overlay effect can only be seen when previewing as the Page Designer does not support color with alpha value.

Text Alignment

6. Text Alignment
Select the alignment of the text overlay.

Text color

7. Text color
Select the color of the text. The overlay will use the opposite color.

Use font family defined on the current page

8. Use font family defined on the current page
If you have defined font families for your headings and paragraph on the page, you can select this option so that the font families defined on the sample text will not be added and the ones defined on your page will be inherited by the inserted text element.

Show two buttons

9. Show two buttons
The default sample text has one buttons only. Select this option will use the one with two buttons.

Use rounded button

10. Use rounded button
Select this option to use rounded buttons. The default is rectangular.

Page width

11. Page width
Set the width of the page. The default is 1190. If the page has contents like using a template with elements on it. The current page width of your page will be used if it is 800 pixels or above. You can choose to use your current page width if it is below 800, just select the option "Use current page width". If your page turns out not this width after adding more elements later, you can change the width by following the steps below:
  • Select the hero image (text element inserted on the page).  Select "inner-3" from the "Container" 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, for example 900px.
  • Right-click on the text element. 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 of your page, for example 900 px. 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.

Element height

12. Element height
Set the height of the inserted text element. The default is 700. If you decide to change it after inserting the text element, you can drag the bottom edge upward or downward to change its height.