ThemeKit Responsive

ThemeKit Responsive Hero Spacer

Smooth Scrolling

A combination navigation bar with page links & smooth scroll down links.

Combo Navigation

The RWD Combo Nav can have up to eight links which can be configured as internal links or to smooth scroll to an anchor.
The icon is a chevron right when configured as a link and chevron down when configured as a scroll down.
An anchor function is incorporated in the RWD Anchor Heading widget which should be configured as an h3 section heading.
Links
The links have a minimum width setting and controls for vertical and horizontal spacing. There is a background color hover animation when viewed on computers.

ThemeKit Responsive Hero Spacer

Anchor [1]

The Hero Spacer with the image option is used here as an anchor to smooth scroll down from the Combo Nav further up the page.

Headings

Over a decade ago headings were usually required to be h1 through h6. Using HTML5 only requires h1 through h3,

  • h1 is used for the Main heading which usually displays the website name
  • h2 is used for the page name which should give an indication of the page content type
  • h3 is used for section headings to help visitors to quickly find the content they are searching fo

HTML5 Containers

HTML5 uses semantic containers to help the search engines index the content.
The main containers are header, section, article, figure and footer.
EverWeb provides a header and footer in the responsive template but these are not much use when creating a more advanced page design using widgets.
EverWeb wraps each item in a section element so individual widgets never use the HTML5 <section> in their code.
Search engines regard each HTML5 container as a "mini page" so the first heading in the container is always an h1.

Anchor [2]

Sidelines

Sidelines added to a heading give that extra professional touch to a web page design. The sidelines can be styled for height, color and style - dashed, dotted, double or solid. Note the the height has to be at least 4px for a double line.
The heading text area has a max width setting. Adjusting this will adjust the width of the sidelines.
In this application the heading is set as an h3 since it is a section heading.
To help to draw the visitors attention to the section the sidelines can be animated with controls for animation delay and time set in milliseconds.

Responsive Link Bar

A link bar is usefull for adding related links below a block of text, linking to "must see" pages or, in this case, convenience links at the bottom of a page.
CTA (call to action) style block links are very inportant on responsive pages since they are used to replace outdated and ineffective text links.
The style of the actual link helps to define the overall page design if it has some feature to set it apart from all the rest.
Hovers
The link hover state is only seeing on desktops and laptops. On a better class of web page design the hover animation will have transition effect whcih smoothes out the change between the onload and hover states.
The links have a hover animation on computers with five animation types to choose from.

© EverWeb Widgets -

Menu