Marketing Text/Image Hero
The image is full width, fixed height. The height can be adjusted for the different devices and it is full height on mobile phones in portrait mode to fill the screen. There is a checkbox to set the image to Viewport Height on all devices.
The image remains fixed when viewed on computers and the content below scrolls over it. The fading effect is created using an overlay where the opacity increases as the content is scrolled.
Image
The images are loaded in three sizes - one for each device type. The images in the demo were cropped to 1600px, 1200px and 800px respectively before importinginto EverWeb.
Grid Items
The overlay items can be turned on individually and consist of an h1 heading, an h2 heading and a CTA style link tab.
The grid items have a background which can be adjusted for color and opacity and border radius.
The link radius can be adjusted separately and has controls for color, hover color and for adding a border which inherits the link colors.
The link is configured to open an internal page.
Item Position
Each overlay item has a control for setting its position on the X-axis and the Y-axis using column and row numbers and spans. This can be a column number or column number with column span for horizontal positioning and row number or row number with row span for vertical positioning.
The grid has 5 columns and 3 rows so to set the heading to the left it is positioned in row 1 and spans the track between rows 1 and 3. Its position is entered using the shorthand of 1/4. To center it, use 2/5 and to position it to the right use 3/6.
Small items like the link can be positioned in any column by entering just the column number or, as In this example, placed to the right in row 3 using 3/6 for the column and span.
Note that all the items become centered on narrower devices. This is done using media queries.
Animation
The animation is turned on by checking a box. The animation time and delay can be set for each item .