Article
The <article> element has an h1 heading, text and an optional link.
The link can be aligned left center or right and opens internal or external pages.
EverWeb Widgets
Text Overlay Image
The item consists of a full width background with a grid overlay which is centered with a maximum width. The grid has an image and a text panel which can overlap the image and animate in if required.
Grid
The grid has 8 columns and three rows. The images are inserted in an HTML5 <picture> element to allow different sizes and to have alt text for the search engines. This is contained in a <figure> element which spans all three rows.
The text is contained in an HTML5 <article> element with a heading, text and an optional link.
Images
The large image in this demo was croppped to 1200px before importing into EverWeb and the smaller image was cropped to 800px wide.
Image Position
The image is positioned inside the grid by specifying its start column number and the number of columns to span. In the example above, the image starts in column 1 and spans 6 columns. In the one below it is moved to the right by keeping the same value for span but starting it in row 3.
Text Panel
The text panel has a heading, text and an optional CTA style link. The link can open internal or external pages and has a new window option.
Text Position
The text panel also spans all three rows but has a control to vertically align it top, center or bottom using the align-self property set to a value of "start", "center" or "end".
It is positioned in the same way as the image by setting the value for the start column and for the column span. In the example above it is in column 6 and spans 3 columns and in the one below it is in column 1 and spans 4 columns.
The image also has a control for setting a margin so that it can be spaced away fro the top/bottom and left/right of the grid. The margin is automatically removed when the layout switches below the break point.
Layout Switch
On screen width which are less than the break point aetting, the image and the text panel become full width and the text appears below the image.
Animation
The animation is turned on by checking a box. There are control for animation time and delay in seconds and for setting the animation direction which can be down, right, up or left.
By default the animation occurs every time the item enters the viewport and does not occur on mobile phones. There are checkboxes to allow it to fire only once and to animate on phones if this is really necessary.
Image
The image has been switched to the right by starting it in column 3 and spans 6 of the 8 columns.
The text starts at column 1, spans 4 columns and is vertically aligned in the center.
Responsive
Items like this are usually created with a full width, fixed height container and an example of this can be seen by following the link below.
This widget uses a different method which allows the container and the image to be fully responsive in both height and width. This gives much better results when the image is viewed on mobile devices and this is an importamt consideration since more than 60% of the visitors are likely to be usng tablets and mobile phones.