EverWeb Widgets

Responsive Elements Widgets

Link Tabs

The link tabs can create any amount of links which can be configured to open an internal or external page and in a new window if required.
When a suitable number of links are inserted - or on the narrower screens of mobile devices - the tabs will return to create rows. The horizontal spacing of the tabs and the vertical spacing of the rows can be adjusted.
The tabs can be styled with boder width, color and radius and the background has an opacity slider.
The container has a maximum width setting and can have a contrasting background color and opacity. The links can be aligned left, center or right and the navigation can be spaced vertically from the items above and below it.

Responsive Text Wrap Image

A text wrapped image is a better option for responsive pages than a full width one. The image file width can be made about half the value of the widget's maximum width setting so its file size will be a lot smaller than one that is displayed at full width.
The image is floated left so that the optional h1 heading and the text in the second paragraph can slide up and wrap around it. It can be floated right if required.
The image width is expressed as a percentage so that it adjusts along with the browser or device width. The image can be set to full width if required by dragging the "Image Width" slider to its maximum value.
The image has an optional overlay caption which can be made to appear only on hover when viewed on computers if required. The caption appears on page load when viewed on touch devices.
When the page is viewed on a mobile phone, the image becomes 100% wide.
The image can be configured as an internal or external hyperlink which can open in a new window if required.
The image and text are contained in an HTML5 section element which can have a border and/or a box shadow.
When a box shadow is applied, the image percentage width is reduced slightly. This, along with the vertical spacing adjustment, allows the box shadow to be displayed correctly on all devices.

Image [1] Caption

Image [2] Caption

Image [3] Caption

Image [4] Caption

Image [5] Caption

Responsive Swipe Slider

The slideshow can be navigated using directional arrows or by swipe on mobile. The images are lazy loading so that the page download time won't be effected if more than a few images are included.
There is an option to add captions beneath the image and to configure the slides as links.
Images
Make sure the image files are reduced in size to equal the slider's maximum width setting before importing into EverWeb and that they all have the same aspect ratio.
Options
There are controls for show/hide arrows, show arrows only on hover on computers and to hide the arrows on mobile devices. The default transition is "slide" but can be changed to "fade" if required. The transition time can be varied and is expressed in milliseconds.
Lazy Loading
The lazy loading control is set to "progressive" by default. This means that all the slides will download with the rest of the page items. For faster page download time, set the control to "ondemand" so that the images are only downloaded when required.
Autoplay
Although autoplay should not be used on pages that will be viewed on mobile devices, the option is available with controls for slide time and pause in hover.
Styles
The captions can be styled for font, size, color and background color and the container can have a border if required. There is a control for vertical spacing to adjust the position of the slider in relation to the items above and below it.

Sortable Table
Name	ID	Date	Email
Arnold Armstrong	EWSN-0019	03/01/2016	arnie@easymail.com
Herbert Hanley	EWSN-0007	02/01/2016	hhan@anymail.com
Julia Jones	EWSN-0011	02/016/2016	jj@jmail.com
Sarah Smith	EWSN-0006	01/01/2016	sasm@email.com

Responsive Table

Tables are not exactly suited to responsive layouts for obvious reasons. This one overcomes the inherent problem by switching from an inline style at wide browser/device settings to a block layout when the device width gets too narrow to show all the items in line.
The table can accomodate up to six columns and any amount of rows. The caption and styled header are optional and the columns can be made sortable by checking a box.
To sort any column, click the header, a down triangle appears and the items are sorted.
There are a lot of styling options available and the device width at which the layout change takes place can be changed to suit the number of columns and the amount of content.