EverWeb Widgets

ThemeKit Boxes

ThemeKit Box Image List
Image Link

EverWeb ThemeKit

Take a closer look …

  • Transform the way you create web pages in EverWeb
  • Future proof responsive layout using the CSS Grid Layout Module
  • Create web page layouts like the professionals
  • Excellent user experience on all devices
  • Better layouts with less code
  • Complete package includes project file, widgets and media
  • Start with the basic pack
  • Add packs to expand the versatility of any design

ThemeKit Box Text List

This column has a heading, text and an optional link.
Custom Markers
Choose from 100s of HTML symbols to create the list markers.

Info Link

ThemeKit

  • Transform the way you create web pages in EverWeb
  • Future proof responsive layout using the CSS Grid Layout Module
  • Create web page layouts like the top professionals
  • Excellent user experience on all devices
  • Better layouts with less code
  • Complete package includes project file, widgets and media
  • Start with the basic pack
  • Add packs to expand the versatility of any design

ThemeKit Box Links

The box links widget can create up to 48 links to open internal or external pages and have a new window option. As can be seen from the example, each link can have a different background color.
The links are in a grid layout so the number of items per row can be specified for each device type and the grid gap and all around padding can be adjusted.
Vertical Adjust
The links themselves have auto alignment so thay will all the links in a row maintain the same height despite varying vontent, The link text is in a span which is aligned vertically in the center.
To make the links more prominent, they can be assigned a minimum height - in this case the min height is set to 60px and the top/bottom padding to 10px.
Hovers
The text itself can be assigned a hover color and there is an option to assign a hover background. In the example, the hover color is set the same as the link color and the hover background is black. The hover have a transiton animation to give a better UX (user experience).
Text Align
Text is aligned center but there is an option to align it left on mobile phones in portrait mode if required if the blocks are set to one per row.

Inline list items

Individual backgrounds

CSS symbol list markers

Adjustable items per row

Marker adjust & vertical align

Optional inline block links with new window option

Box Marker Grid

The grid can have up to 48 inline list items with a custom marker. The widget can be used to list items or to create links to other pages or sites.
Layout
The layout is similar to the BoX Links shown above with the addition of a custom marker. The marker uses the CSS equivalent of any of the hundreds of HTML symbols. The marker can be aligned vertically at the top center or end of the box and has controls for size, color, spacing and vertical adjustment to compensate for the effect of the marker size.
Markers
Click the tab in the widget settins panel to go to the website with the HTML symbols. Fine the required symbol and double click it to open it in a window with the code options. Copy the CSS code and paste it into the box in the widget settings.