Hero Overlay Grid
Hero image with overlay items positioned using an invisible grid to position the heading, text block and CTA style link.
EverWeb Widgets
EverWeb Widgets
Invisible Overlay Grid
Hero image with overlay grid made visible to show how the items are postioned by specifying their column and row.
Responsive Grid Layout Module
Now that the CSS Responsive Grid Module is support by all modern browsers, it should be considered as the de facto method of creating responsive web page layouts. It offers a grid-based layout system with rows and columns. This makes designing responsive web pages a lot easier without having to use floats, positioning and javascript.
Grid Widget
The RGL Grid Hero widget offers an easy introduction to overlaying items using the grid module. Anybody who is serious about web design should take the time to learn the basics of grid layout. For those who don't have the time or patience, this widget provides a visual aid for understanding the basics of grid item placement.
Item Placement
There are several different ways of going about item placement. This widget uses the grid-column and grid-row line based placement method since this is the easiest to understand and implement.
Inserting an item is as simple as specifying the column - left, center or right - and row number - 1, 2 or 3.
The heading at the top left of the image above is placed in the left column in row 1, the text is place in the center column in row 2 and the link is placed in the right column in row 3.
All three items are vertically centered.
Vertical Align
One of the neat things about using the responsive grid module is how easy it is to align grid items vertically. The self-align selector can be set to start, center, end or auto.
The options available in the widget are …
"start" will place it at the top
"end" will place it at the bottom
"center" centers it vertically
Column Span
When the page is viewed on a tablet in portrait mode, all three items are centered horizontally. This is achieved using media queries and setting each item to span all three columns.
Image
The image is inserted in three sizes - one for each device type. The images used in this example were cropped to the following size before importing into EverWeb …
Large Image - 1600px wide, Medium Image - 1200px wide, Small Image - 800px wide
Each image has a control to set its fixed height. The height is switched to fill the screen height of mobile phones using viewport units and a value of 100vh.
Follow the Hero Image link below to see a different version of this widget for more experienced users which allows the items to span columns and rows.
The Hero Switch widget has the same simple item placement method as the one on this page but switches from fixed height on computers to fully responsive on mobile devices for a btter viewing experience.
Overlay Grid
The widget has an optional grid which is set up with three columns and three rows to make it easier to get used to placing items. The grid is removed prior to publishing by checking a box in the widget settings panel.
Go to the Grid by Example website to find out more about this method of creating web page layouts.