EverWeb Widgets

Website Elements

These widgets create basic elements which are required in just about every website.
Click any widget icon to see the demo …

Styled HTML Heading

HTML headings inserted in the correct order in the web page HTML are essential for the structure and to indicate the hierarchy for the search engine spiders.
h1 through h4 headings can be inserted and styled with many options such as full width, responsive and a background with adjustable transparency.

HTML5 Element - Text

An optional heading and a paragraph inserted into an HTML5 article, aside or section element. This gives superior search engine results compared with using a separate heading and text box.
Styling the container with a border or box shadow gives visual separation from the rest of the items on the page and makes its content easier to find and focus on.

CTA Link

The CTA (Call To Action) link is used to create high visibility links on the full version of the site and to replace text links on the mobile version.
The widget has many styling options and can be configured as an internal or external link to open in a new window if required. The link is also suitable for use on iframe content pages.

iFrame

An iframe can be used to display content created on another page in EverWeb or an external page or file.
The iframe can have responsive width if required. Code has been added to the standard iframe so that it will scroll on touch devices like the iPad.
The iframe can have a background color and padding and a border or box shadow with radiuses corners.

Image Text Wrap

This widget has similar functions to the styled text widget but has the option to wrap text around an image.
The image width is adjustable and it can be created as a link to an internal or external page with the option to open in a new window if required.
There are also options for a main heading and a lead in paragraph above the image.

List

Create a list with any amount of items which can be reordered by dragging.
The list has numerous list style options and the markers can be inside or outside the list. The list item inset and vertical spacing can be adjusted and the list can be made responsive if required.
Text hyperlinks can be created and styled with the list.

Table

The table can have up to eight columns and 99 rows. The table head can have a contrasting color and both the cell and outer borders can be styled and adjusted for width.
The table can be made responsive if required and there are controls for styling any text hyperlinks added to the table cells.

Scroll To Top Button

The smooth scroll to the top button has text content and can either be placed at the bottom of the page, command dragged into the footer or set as a sticky button at a fixed distance from the browser edge and bottom.
Both the font and the button have all the usual styling options including hover color and background and border and box shadow.

Scroll Top Chevron

The chevron can be positioned absolutely or sticky relative to the browser left or right and bottom.
The chevron color and background color and its opacity are adjustable and the button can have rounded corners.
A round button can be created by simply checking a box. The chevron is created using CSS rather than an image to make it suitable for use on the mobile version of the site.

Scroll Top Hover

This is similar to the Chevron button except the tab expands on hover to show the "Scroll To Top" text.
The text can be changed and there is a control to adjust the width on hover to accommodate more or less text.
It has the same styling options as the Chevron button except that it doesn't have the function to make it round of course.

CSS Shape

The widget creates a square or rectangle which can be converted to round or oval by checking a box. The background can be solid or a gradient with adjustable angle and opacity.
The shape can have a border and/or a box shadow which has controls for both blur and spread radius.
It can be used to create a transparent image overlay to prevent download using right click.

Horizontal Line Spacer

A horizontal line which is vertically centered in a container to allow the spacing of items precisely. The widget height is adjusted to the required value for spacing items equally.
The line style can be dashed, dotted, double or solid and the line can also be full width responsive or inset.
It can also be used to create a horizontal line without the extra spacing.

© EverWeb Widgets -