EverWeb Widgets

Header

The header background is full width and can be a color or an image. The background has an overlay with controls for color and opacity. The opacity can be increased to make the text more prominent.
The header has a grid layout with a logo in column one and the h1 heading for the web site name in column two.
Column three is left empty to leave space for the mobile navigation icon.
There are controls for setting the height and for setting a lesser height on phones.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
Logo
Like the heading, the logo is vertically centered in the header and has controls for setting its percentage width at full height and on phones. As can be seen from the example, the logo can be rotated using a slider.
The logo can be configured as an internal link if required to link back to the home page.
Images
The header background image is inserted in two sizes - one for normal use and the other for mobile phones. The images used in this example are 1600 x 360px and 800 x 180px.
Info Bar
The optional info bar can be turned on by checking a box. This also has a three column grid layout.
The first column has a phone number that switches to a "Call Me" phone icon when the page is viewed on phones.
The center column has an h2 heading and the right hand column has an email icon. The email address is entered as name, domain and domain extension in separate boxes and the @ and dot are added using Javascript. This prevents spammers using scraping software from harvesting the email address.

Text & List

Layout

Two HTML5 <article> elements - one with a heading, text and optional link and the other with a list - sit side by side over a hero image background.
Below the break point, the background image is replaced by a solid color.

Home

List

Options for list style, list item inset and list item vertical spacing. To add an item …

  • Click the "Add" button
  • Select the entry in the list
  • Tab down and enter the text
  • Select the item in the list again and it will be editable
  • Enter an item number or text identifier

Navigation

The navigation is inline when viewed on wider screens and switches to a "hamburger" icon on touch devices. The links are inserted using a modified version of the EverWeb widgets API Assets List. The links can be to an internal pages, an external page or file or an internal file.
The links can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The link tabs have controls for setting the font size, color, hover color, background color and its opacity, minimum width and the horizontal and vertical spacing.
The mobile drop down has controls for setting the background color and its opacity, drop down width, position from the top, the break point at which it appears and the separator width and color.
The "hamburger" icon has controls for setting the icon color, background color and opacity and its position relative to the top and right.
The inline navigation background color has an opacity slider and the links can be aligned left, center or right.
Current Page Indicator
The current page can be indicated with a contrasting color and has the option to have an animated underline. The underline has controls for setting the color and the animation delay and duration.
Navigation Position
The navigation can be placed anywhere in the stack of widgets on the page or, as shown in this example, positioned below the header and made to overlay it at the top by checking a box.
It can be fixed in position to make it sticky by checking a box and there is another checkbox to fix the position of the mobile version of the navigation so that it always remains in view.
Animation
When positioned at the top of the page, there is an option to animate the navigation in and down with controls for animation time and delay set in seconds.

Contact

Get In Touch

Let us know if you're interested in any of our outdoor adventure trips and want more information.
Contact the Adventure Team …

Tel: 012-345-6789

Footer

Info

A three column footer with link bar and copyright notice. The phone number switches to a "Call Me" icon on mobile phones.
The © notice has an auto update function.

Location

EverWeb Widgets
203 Unknown Street Unit 99
Anytown DA 12345
Planet Earth

© EverWeb Widgets -