EverWeb Widgets

EverWeb Responsive Stacking Row Widgets [4]

These widgets create three inline modules when viewed on wider screens and collapse to two plus one and then a vertical stack on mobile devices.
The optional slide up and in animation occurs when the item enteres the viewport. The items have the same animation time but are each given a slightly different delay time.
Click any widget icon to see the demo …

View CartAdd To Cart

Font Awesome Icons

The Font Awesome icons shouldn't need any introduction as they are used everywhere. There is a huge selection to choose from although the actual icons themselves are not the best around.
A better quality icon which is less common and therefore creates a more unique look is the Ionicon range of icons shown below.

Ionicon Icons

The Ionicon range of icons are less over used and abused than the better known Font Awesome icons. They have a more professional design and include a sections of iOS and Android style icons.
The widget has a control for opening the Ionicon cheatsheet which has a search function and easy to copy icon codes.

Images

This layout has a lot of options. The images, captions, text and link can all be turned on/off using checkboxes. The optional text field can be used for price, date etc and the links can open internal or external pages with a new window option.
The images can extend to the edges or have a margin added to pad them inwards to line up with the text.

Image Info Links

Image links are not very suitable for using on responsive pages since visitors using touch devices don't have a hover function where the cursor shows as a pointer to indicate a link.
This widget uses an info icon at the top right of the image to not only indicate a link but to be the link itself. It is set to be the minimum recommended size for a touch device link.

Lightbox Images

Each of the three thumbnail images opens a larger version in a lightbox slideshow. The optional icon can be displayed on hover when viewed on computers and laptops.
The slideshow has image captions, a slide counter and navigation is by directional arrows on computers. The arrows can be hidden on touch devices where the slides are swiped.

Lists

Each item has a heading, a paragraph, a styled list and optional link. Each card can have a different font color and background color and the cards can be styled with a border and/or a box shadow.
Since it is a grid layout, the item spacing can be adjusted using the grid-gap property and there are controls for adjusting the vertical spacing and adding left/right padding.

Animated overlay

The overlay has adjustable background color and opacity and slides down on clicking or tapping the chevron down icon.
The overlay has a heading, text and optional link. The link can open internal or external pages with a new window option and can be aligned left, center or right.

Styled Photos

The images have options for a border and a box shadow. The overlay can animate in on hover on computers and appear on page load on touch devices.
The caption can run to two or more lines by using the HTML5 line break <br> to create returns The caption has its own line height control to space out the lines.

PNG Icons

This version of the slide up widget is for those who want to insert their own custom icons or PNG images. The images can be square or round. Their position relative to the top can be adjusted and there are controls for adding a border and/or a box shadow.
Each item can have a different font color and background color if required.

Quotes & Testimonials

The quotes can be used for customer testimonials or for quoting other sources. Different Google hosted fonts can be used for the text, fancy quotes and signature.. Each one has a drop down for choosing a web safe fallback font.
The heading at the top is optional as is the link at the bottom which can be used to open a page with more testimonials if required.

Text Content

Each item has a heading, optional text field, text and an optional link. The optional text field can be used for price, date etc and the links can open internal or external pages and open in a new window if required.
Each item can have a different font color and background color and there are controls for adding a border and/or a box shadow.

Round Image Wrap

CSS shapes allow content to wrap around custom paths - like circles, ellipses and polygons - to break free from the constraints of the rectangle and creating more unique web page designs.
The <div> containing the round image uses the "shape-outside" selector set to a value of "circle()" to create the effect.

© EverWeb Widgets -