Block Image & List

ThemeKit Block Image + List
ThemeKit Block Image + List

EverWeb ThemeKit

So many reasons to go with EverWeb ThemeKit for creating professional grade website designs …

  • Transform the way you create web pages in EverWeb
  • Future proof responsive layout using the CSS Grid Layout Module
  • Create web page alyouts like the professionals
  • Excellent user experience on all devices
  • Better layouts with less code
  • Complete package includes project file, widgets and media
Info

Block Text & List

EverWeb ThemeKit

ThemeKit is a new and better way to create websites with EverWeb. It is far better and easier to create a professional quality design with cutting edge features than using templates and EverWeb's default features.
ThemeKit Design
The starter pack has 50 widgets and a complete project file with all the items set up and styled.
Copy them over to a new project file as required, add media files, enter text, reasign links and it's done!
Get the ThemeKit Design project pack and start your new website today …

Info

ThemeKit Design

  • Transform the way you create web pages in EverWeb
  • Future proof responsive layout using the CSS Grid Layout Module
  • Create web page alyouts like the professionals
  • Excellent user experience on all devices
  • Better layouts with less code
  • Complete package includes project file, widgets and media
Buy Now

Block Lists

The Block Image 7amp; List and the Text & List shown above can have the items switch and the list on top or bottom on device screen widths below the break point.
List
The list can have the standard range of markers or, by checking a box, use a custom marker created by inserting the CSS equivalent of any HTML symbol.
The widget has a link to open a site with the HTML Symbols.
Find the required symbol, double click it to open it in a new window, copy the code and paste it into the "Marker Code" box in the widget settings panel.

Block Icon Modules

Layout

CSS Grid

A grid layout with 2, 3 or 4 columns in a row.
At the first break point the layout has 2 columns and 2 rows and on mobile phones in portrait mode the layout is a single column.
When 3 items are inserted, the last one will center itself in row 2 on tablets.
The grid gap and the left/right and top/bottom padding can be adjusted.

Widgets

SVG Insert

Scaleable Vector Graphics

SVGs are best inserted using the code option. To insert …
Choose an icon from the 100s available in the download folder.
Double click the icon to open it in TextEdit.app in plain text mode.
Copy the code and paste it into the widget settings.
Icons have controls for size, color, background color and opacity, border width and color and border radius.

Hero

Items

Content

Each block has an SVG icon, heading, optional span, text and an optional link.
Links can be configured to open internal/external links and have a new window option.
Links have controls for font size, color, hover color, background color and opacity and for border width and radius

Split

Icons

Which Type?

SVGs are far better for quality and download efficiency than font icons like Font Awesome which require a large stylesheet to be downloaded - even if only one icon is inserted!
PNG image icons have no place in an efficient, professional website design. Each one requires a separate server request and are on average about 20x the size of an SVG.

Picker

Block Fade In

Applying a fade in animation to the web page content allows it to load smoothly and gives items like a hero image time to preload.
The widget can be used as a spacer or reduced to a very small height. It has controls for setting a two color gradient background with adjustable angle and the fade in animation is turned on using a checkbox with the time set in milliseconds.