EverWeb Widgets

Responsive Grid Marketing Widgets [1]

These responsive grid widgets provide ways of marketing products or services in a more unique and eye catching way.
Click any widget icon to see the demo …

Sales Grid

The grid can have up to 48 items. The item spacing is easily adjusted and the number of items per row set for each device type.
Each item has an image with an optional sale tag, a heading, price, description and full width link tab. The items have many styling options and the images can have a border if required.

Hero Text & Image

The container is full width, fixed height with an image and a centered text block. When the image and text are viewed side by side on larger screens, the image has a fixed width. When viewed on tablets in portrait mode or mobile phones, the image and text become full width and stack vertically.
The image can be place left or right and appear above or below the text on mobile devices.

4 In 1 Text/Image

The image column has a fixed width which fixes the container height right down to the break point. It then becomes responsive with the text below it. The text content is vertically aligned in the center and consists of a heading and a paragraph.
The position of the image and text can be switched by checking a box.

Banner/Slider

The slideshow can have up to 48 images with options for captions and image links. The slides sit side by side with the info text when viewed on computers and slide above or below when viewed on mobile devices.
The text block has a heading, text and an optional link and can be positioned to the left or right of the images. The link can be a chevron/double chevron or CTA style.

2 x Hero Images

The responsive width, fixed height images sit side by side on wider screens and then stack when the device screen width is below the break point.
The overlay has a heading, text and an optional link and can be positioned at the top or bottom of the images. The link can be a chevron/double chevron or CTA style and can open internal or external pages.

Hero Overlay Slider

The slideshow is lazy loading and has a responsive width and a fixed height when viewed on computers. It switches to responsive width and height on mobile devices for a better viewing experience.
The overlay has a heading and text and an optional link. It covers the left side of the image when viewed on computers. On mobile devices, the text positions itself below the slides.

Icon Grid Links

The link grid uses PNG image icons and can accommodate up to 48 links. Each item has the centered icon, a heading, descriptive text and a link.
The links can be configured to open internal or external pages and have a new window option, They can be styled as single/double chevron or CTA.

Pan Hero Image

The banner is full width, fixed height and adjusts to fill the viewport height when viewed on mobile phones. It has options for an h1 heading, a text block with a heading and a paragraph and a CTA style link.
The animation uses CSS transform and transition to create the "panning" effect. Keyframes are used to change the transform origin and scale over time.

2 x Sales Banner

The banner has two side by side images when viewed on computers and tablets. They switch to one above the other at the break point. The text panel overlays the bottom of the image and can appear on page load or on hover when viewed on computers.
The optional sale tag appears on page load and can can have its font size and color adjusted.

2 x Sales Modules

The modules sit side by side on wider screens and then switch to vertically stacked at screen widths below the break point. Each item has a responsive image with alt text and an optional triangular sale tag at the top left. The text block can be located above or below the image.
The text block has a heading, an optional span for price or other info, a paragraph and a CTA style link.

Text Banner

The responsive container can either be full width or be centered with a maximum width setting. It has a side by side image and text block. The relative sizes of the image and text can be adjusted.
The heading and text have controls for adjusting the font size for normal and mobile. There is a maximum width control for limiting its width when required.

Pan Banner

The banner has a responsive width and a fixed height when viewed on computers. It switches to responsive width and height on mobile devices for a better viewing experience. It has options for an h1 heading, a text block with a heading and a paragraph and a CTA style link.
The "panning" effect is created using CSS transform and transition.

© EverWeb Widgets -