EverWeb Widgets

Tel: 012 345 6789

Sticky Header

The header has an optional logo link, the h1 heading and an optional phone number which switches to a phone icon on mobile phones.
By checking a box the sticky header can be placed anywhere in the stack of widgets and can scroll to the top and stick at a preset distance from the top.
The header has a grid layout with three columns. At screen widths below thee break point it has 2 columns and 2 rows. The logo link and phone each occupty a column in row 1 and the heading spans both columns in row 2.
The background ha an option for a two color gradient with adjustable angle and the heght can be adjusted using the value for top/bottom padding.
Z-index
When the sticky option is used the z-index of the header can be set so that it appears above the other items in the stacking order.

Flex Links

One of the problems with responsive page design is image links. Computer users can get the idea that an image is a link when the pointer cursor appears when the image is hovered.
Mobile users with touch devices have no idea that the image is a link since their device doesn't have a hover function.
Many of the EverWeb Widgets have an option to add an icon to indicate a link . While this can shown on hover for computer users it needs to be always in view for mobile users.
Some photographers and artist are violently opposed to desecrating their images with an icon so one solution is to insert a link bar below the image(s).
Links
The links are in a container with a flex layout and have the option to use different colors for the link tab backgrounds.
If viewing this page on a computer, reduce the browser width to see how the flex layout adjusts with the change in width. The minimum width setting controls how the links react.
The background has a hover ease-in-out animation to make it more professional.
Follow the link below to see hw to create file paths for relative and absolute links …

File Paths

Postcard Grid

The postcard layout consist of four images in a traditional layout for print. It is quite complex to make responsive using relative positioning and floats and a nightmare if you need the gaps to be adjustable.
Using the CSS Grid Layout Module to create the postcard is a breeze and the only item that requires more than basic CSS is the row gap. It needs to half the value of the collumn gap so that the images line up correctly and its value is figured by some CSS calc in the styles.
Structure
Each item in the grid is an HTML5 <figure> element with an image. The <figcaption> is inserted in an <article> element which creates a full size overlay with adjusable opacity. The overlay animates in on hover when viewed on computers and on page load when viewed on touch devices.
The caption is horizontally centered and, since the layout is a grid, can be vertically positioned at the top, center or bottom using the values "start", "center" or "end".
Images
The images should be cropped to the required size and aspect ratio before importing into EverWeb. The sizes of the images used in this demo are shown in the image caption.
Links
Images links are not very useful for responsive pages unless there is a caption or other means of letting the visitor know that the item is a link when they are viewing the page on a mobile device. In this case, the link is an SVG icon which appears on hover on computers and on page load on touch devices.
The links are turned on globally and can be configured to open internal or external pages and in a new window if required. The icon has controls for setting its size, color, opacity and hover color.
Animation
The overlay animates in using an opacity transition and the image can scale on hover if required. The animation time is set in milliseconds and the scale amout is set using a choice of preset values. The postcard on this page has the scale amount set to 1.15.
Break Point
As the device width gets too narrow to show the images in the postcard layout, they reposition themselves at the break point which can be set for tablet in landscape, tablet in portrait, phone in landscape and phone in portrait mode. There are controls for setting the grid gap and padding below the break point.