A recent trens in web design is the use of poster style text in the hero to grab attention. It can be really effective if the text is given a fill color with adjustable opacity and a stroke.
The ThemeKit Image Hero Poster widget inserts the image in three sizes but adds a fade out animation which shows the back image with full opacity and then reduces it to allow the text to become more prominent.
The text block can also have a fade in animation if required.
Inserting images with different aspect ratios in a row of three gives a more interseting layout than having all the images the same.
The row above has a max width set to 1400px and the column ratio is 2:4:3. Prior to importing into EverWeb the images were optimised and sized to …
Below the break point the column ratio is 2:3.
The center image is in row 1 and spans both columns.
The left and right images are in row 3 and in column 1 and 2 respectively - spanning 1 column each.
On mobile phones in portrait mode the images stack in the order in which they are inserted.
Links
The images can be configured as internal links which are indicated by an icon. The caption and the link icons can appear on hover if required.
Lazy Loading
When the row is not in view on page loading the lazy load option should be used.
Menu
