×
Menu
Index

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

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.
2

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.
3

Fixed background

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

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.
5

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.
   
6

Text Alignment

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

Text color

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

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.
9

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.
 
   
10

Use rounded button

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

Page width

11. Page width
Set the width of the page. The default is 1190. If your page turns out not this width after adding more elements later, you can change this value in the corresponding CSS style.
12

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.