EverWeb Widgets

Responsive Elements Widgets

This pack contains the basic widgets required for a simple responsive web page layout. Please read the responsive widget instructions by clicking the first icon below.
NOTE: These widgets require EverWeb V2.8 and above and should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

View CartAdd To Cart

Using Responsive Widgets

Creating responsive designs is quite different from fixed width using drag and drop. Please take the time to read the instructions and learn how to create a responsive template page and how to use the widgets.
Make sure the iOS Simulator is available for testing responsive designs in the various devices before publish the site.
Click the icon for info about all this.

Header & Navigation

The header and navigation are combined in one widget with the website name and an option for a logo if required.
The navigation is single level and can accommodate up to 14 links. The last two can be configures as external links and open in a new window if required.
On mobile devices the navigation switches to a drop down controlled by a "hamburger" icon.

HTML Headings

HTML headings of the type h1 through h4 can be created and styled. The font can be web safe or non web safe or Google hosted with a web safe fallback font.
There many styling options including letter spacing and text shadow. The widget can also be configured as an anchor when used in conjunction with a suitable smooth scrolling link widget

Auto Footer

The footer is full width and can accommodate several lines of centered text using the HTML <br> to create returns.
There is an auto copyright date function which uses javascript to create the copyright year and update it automatically. The footer incorporates a smooth scroll back to the top chevron and there is a control for adjusting the scroll time which is set in milliseconds.

Text Module

The text module has an optional heading and - of course - text. The container can be styled with a border and/or box shadow. There are options for styling span tags and text links.
Since text links are not used on mobile page designs, the widget has options to add up to three CTA style link tabs which can be configured to open both internal and external pages.

Image

A responsive website image needs to be inserted with a maximum width and load different size image files for the various devices - computer, tablet and mobile phone. The image is inserted in an HTML5 figure element with alt text for the search engines and an optional caption for the visitors. The image to be displayed for any browser width or device type is selected from the small, medium and large version of the image.

HTML5 Video

The widget inserts a poster image and prevents the video file from downloading on page load which is necessary for mobile devices. It uses the browser default player thus avoiding the use of any heavy scripts like the other video widgets. It has the "playsinline" control for use on iPhones and the "muted" control to allow autoplay if this is absolutely necessary.

Text Wrap Image

A text wrap image is a better option than a full width one for responsive pages. The image file size can be much less since it has only about 50% width when viewed on computers.
The widget has options for a heading and wrapped text and the image can be floated left or right. The image becomes full width on smart phones and can have a caption and be configured as a hyperlink.

Swipe Slider

The slider has arrows for navigation which can show only on hover on computers if required and be hidden on mobile devices to be replaced by swiping.
The images are lazy loading to speed up page download time and can have a caption. They can be configured as hyperlinks and open in a new window if required.

Styled List

The list can be preceded by an optional heading and text if required. There are various styles such as disc, square, decimal etc.
The link style can be inset or outset and the list items have controls for inset and vertical spacing. If HTML links are required, they can be styled in the widgets settings

Tab Links

CTA style tab links are used in responsive designs to replace text links. This widget creates any amount of inline tabs which can open internal and/or external pages.
The tabs will return to two or more lines on narrower devices and there are controls for horizontal and vertical spacing and alignment.

Sortable Table

The table can have up to six columns and any amount of rows. To make it suitable for responsive pages, the layout switches from inline table to a block layout on mobile devices.
The table has options for a caption and styled header and can be made sortable by checking a box in the widget settings.

Theme Break

The theme break creates a vertical space between items in a responsive page layout. The height can be adjusted and the background color and its opacity set.
The theme break can also create a horizontal line which is vertically centered in the container and can be configured as an anchor for use in conjunction with smooth scrolling links.

© EverWeb Widgets -