Hero Image
Layout
The full width, fixed height image has an overlay with five columns and three rows. The heading is inserted using the controls for row, column and column span.
Images
Slide Over Spacer
Slide Over Hero Image
This hero image is designed to complement the Slide Over Stack widgets as can be seen from the example above. The image is full width, fixed height and has an h1 heading which can be placed in different positions.
Images
The image is inserted in three different sizes using the HTML5 picture element so that the image can have alt text for the search engines.
The images used in the demo were cropped to 1200 x 750px, 800 x 500px and 360 x 540px. The last size may seem a bit odd but this is due to the fact that the item is full width and fills the height of the screen when viewed on mobile phones in portrait mode.
Overlay & Heading
The grid overlay is turned on by checking a box and setting the color and its opacity.
The grid layout has 5 columns and 3 rows and the heading has controls to position it anywhere in the grid - both above and below the break point.
There are controls for both horizontal and vertical align and for inserting the heading in any of the 3 rows.
The Column control defines the column in which the heading starts and the Column Span control defines the number of columns it spans.
The heading can use a Google hosted font if required with a web safe fallback font. There are controls for font size, weight, style, color, letter spacing and for adding a text shadow.
Slide Over Spacer
The RGL Stack SO Spacer widget can be used to separate rows of slide over items. It can either have a solid color with variable opacity or a background image.
Images
The image is inserted in two different sizes - one for computers and the other for mobile devices, The images used in the above example were cropped to 1200 x 480px and 800 x 320px before importing into EverWeb.
Heading
The optional heading can use a Google hosted font if required with a web safe fallback font. There are controls for font size, weight, style, color, letter spacing and for adding a text shadow.
Heading Position
The heading is centered horizontally and can be aligned vertically using the values of start, center or end. When placed at the start or end, the heading can be distanced from the top or bottom using the control for top/bottom padding.
Header
The header was designed to be used with a hero image. It can overlay the first item on the page and either scroll with the rest of the content or be fixed in position.
Items
The header has a logo, h1 heading and a drop down navigation. There is an option to configure the logo as an internal link and to add a phone number which switches to a Call Me phone icon on mobile phones.
Layout
The grid layout has 3 columns and 2 rows. The logo is in row 1, the logo in row 2 and the h1 heading spans both rows. The navigation icon is absolutely position with respect to the top and right.
As the browser/device width reduces, the heading moves to row 2 and the navigation menu icon is positioned nearer the top. On mobile phones, the phone number switches to a phone icon.
Navigation
The drop down navigation is visible the being set up and is hidden prior to publishing by checking a box. The navigation has an option to show the current page link in a different color.
The drop down can be styled for background color and opacity with optional separators and has adjustable width.
Links are added using the EverWeb widget API Assets List and can be configured to open internal or external pages.
Setup
The header should be the last item inserted on the EverWeb design canvas and positioned below the footer widget. It will appear to overlay the first item when published and can be made sticky be checking the last box in the widget settings panel.
Footer
The footer used on this page has opup info links and is in the RGL Row [5] widgets pack …
