Header & Navigation

The widget for creating a combined header and navigation has an optional log, an h1 heading for the website name and an inline navigation which can be aligned left, center or right.
When the page is viewed on a tablet device, the navigation switches to a mobile "hamburger" icon. Tapping this opens the drop down menu. If viewing this page on a computer, reduce the browser width to see the change. The break point at which this change takes place is set to the width of an iPad in landscape mode.
The navigation can have up to fourteen links and the last two can be configured as external links to open in a new window if required for linking to an external blog, social media site or another website.
The navigation tabs can have a separator which is adjustable for width and color and the current page can be indicated by checking a box and setting a contrasting color.

Hero Text Content

The main container is full width and, in this example has had its background opacity set to zero.
The content area has a setting for maximum width. This is initially set to 740px until all the content has been added and the overall height set. The maximum width can then be reset but the widget height left as is. This prevents the content from overflowing when viewed on tablet in portrait mode.
The content has an optional heading which can be aligned left center or right, a text area and an optional CTA style link tab.
The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The content area background can be set for color and opacity so that it can be made semi transparent as in this example. It can have a radiused border and/or box shadow if required.
The link tab has hover styles and can be configured as an internal or external hyperlink to open in a new window if required.

Vertical Centered

When using the Text Content widget on the EverWeb design canvas, it will be obvious that the content area is automatically centered vertically within the parent container. This allows the content area height to expand as text is added. The parent container is set at a fixed height which should be greater than the content height at the width of an iPad screen in portrait mode. This allows the content to increase in height as browser/device width is reduced without it overflowing the container when viewed on tablet devices in portrait mode.
The responsive width and fixed height is what makes the Hero widgets suitable for stacking vertically to make a page layout which is responsive on computers and tablets down to the width of an iPad in portrait mode.

Parallax Scrolling

The text content widgets can be used in conjunction the Hero Parallax Background widget. This allows a full size background image to be inserted and then scrolled at a slower rate than the the content elements to give the illusion of depth.
The scroll speed can be varied over a range of zero to ten. The lower the value - the greater the difference in speed between the foreground and background.

© EverWeb Widgets -

Compact Footer

This widget can be be used in situations where a basic footer with copyright info and a scroll top function is required.
There is a text field for adding the copyright info which automatically adds and updates the copyright year. Use HTML to create the © symbol like this - ©
The footer is full width responsive and the background color has an opacity slider.
The scroll top function uses a chevron up icon which inherits the font color. The scroll time in milliseconds can be set to adjust the scroll speed.
On long pages, the navigation can be fixed to the bottom of the browser so that it always remains in view by checking the "Make Sticky" box.