Hero Row Header - Text Rotor

The hero image is inserted in three different sizes - one for each device type. The images are inserted using the HTML5 <picture> element rather than as background images so that it can be fixed for scroll over on iPad and iPhone.
The heading, text block and link are positioned using an invisible grid overlay by inserting acolumn number and the column span. The grid items become centered when viewed on a mobile phone.
Images
The images used in this demo are 1600px, 1200px and 800px wide respectively. The smallest image will download fast on a phone and give retina quality in portrait mode.
The image height is set in the widget settings and it becomes 100vh when viewed on mobile phones in portrait mode to filll the screen.
Logo
The logo is optional and has controls for setting the image width and its position in relation to the top/bottom and left/right of the image.
The logo has a control to display it above the overlay navigation by increasing its z-index.
Text Rotor
The text block has a heading and an HTML5 <dl> description list. The heading and the list can be styled independently.
The list items can be seen on the EverWeb design canvas when adding and styling them. and then hidden prior to publishing the page.
The items can have alternate colors and there are controls for line height to adjust the vertical spacing and for aligning the text.
The text container has a minimum width control which can be adjusted to suit the content.
SEO
Using HTML5 containers gives much better search engine results than using anonymous divs and paragraphs. The description list <dl> uses the <dd> tag to insert the list items and is ideally suited for a list of services, products and so on ….
Navigation
The menu is created using the RGL Overlay Navigation widget. It is inserted below the image on the EverWeb design canvas and is set to overlay the item above it. The logo at the top left ihas a checkbox to raise its z-index to place it above the navigation in the stacking order..
Testing
Responsive pages must be properly tested before publishing. Opening it in a desktop browser and reducing the width or using the browser's responsive mode doesn't propely test a responsive layout.
The iOS Simulator is free and very easy to use and allows testing pages in all the current iPad and iPhone models.