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.
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.
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.
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.
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.
The ECWID Slider Modal widget opens a lightbox window with a responsive slideshow with smaller image file for mobile devices, captions and lazy loading.
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.
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.
