Ecwid Hero Poster

ThemeKit
Ecwid eCom

Hero Poster

Tel: 012 345 6789
ThemeKit Ecwid Product Display

ThemeKit Ecwid Product

A two column grid with adjustable column widths and layout switch.
The item is set up on ECWID as a single item.
The widget requires the ECWID store ID and the item ID.
The image used on ECWID is not used and the image is inserted in EverWeb in the widget settings with alt text.

More Info …

Modal Tabs

The ECWID Modal Tabs widget sits below a product to add extra info in modals. It can have up to five tabs to open an iimage modal, a slider modal, an MP4 video and a YouTube video.
The last tab can be configured as a link and has the option to change the SVG icon to any other type.

Hero Poster

The ECWID Hero Poster widget follows the lattest trend for using large graphic text to grab attention.
The main heading sets the text fill to transparent and adds a text background color with transpareny. Text stroke and letter spacing can be adjusted to highlight the heading more.
Images
The image is inserted in three sizes for the various devices and have a lazy load function. They are inserted in an HTML5 <picture> element to allow alt text for the search engines and screen readers.
Fonts
In the example the main heading uses the Google hosted font Bowlby One SC. Its font size is set in viewport units to make it respond to changes in browser.device window width.
The rest of the text uses the Google hosted Michroma with a websafe fallback to helvetica.

Animation

The image can animate out reducing its opacity to allow the text to show clearly using controls for time and delay and for reducing the final opacity.
The text has the option to add a fade in animation with controls for time and delay.

Image Modal

The ECWID Image Modal widget opens a lightbox window with an image inserted in two sizes. The image has alt text, a caption and a max width setting.
The image can have a border and a box shadow and the modal overlay has controls for the background color and its opacity.
The close tab is optional since clicking the overlay will close the modal.

Sldieshow Modal

The ECWID Slider Modal widget opens a lightbox window with a responsive slideshow with smaller image file for mobile devices, captions and lazy loading.

Video MP4 Modal

The ECWID Video Modal widget is the best option for displaying product videos. The video file is inserted in two sizes for computer and mobile devices and the files are not downloaded until the visitor decides to play it.

YouTube Modal

The ECWID YouTube Modal widget opens a lightbox window to autoplay the video and pause it when the lightbox closes.
The widget lazy loads the YouTube video which is essential to prevent web page download time being compromised.

Similar Products

Using a similar products item creates an opportunity to direct a visitor to comparable item wihich may suit their needs.
The bar has a label and an animated action tab and opens a grid width images with oprional captions and links icons. The captios and icons can show on hover if required and the items can be spaced out using the grid gap control.
The items have controlsfor border width, color and radius.
The grid can be viewed for editing on the EverWeb design canvas and then hidden prior to publishing.

EverWeb Widgets -

ThemeKit Ecwid Image Modal
Ecwid Image Modal