ThemeKit Active

Image Row

Image Row

ThemeKit Active Image Row 2
Layout

The row can have two, three or four columns. When three items are present the last on is in the centre of row two below the break.
This example shows how the widget can also create a two column two row grid by inserting four items and setting the number of items to two.

Hero

Columns

ThemeKit Active Image Row 2

The article has a header with the heading.
The text section can have styled spans.
The optional link bars are fixed at the bottom so that they remain in line despite varying content.
The links can be globallyconfigured to open internal/external pages.

Images

Images

ThemeKit Active Image Row 3
Lazy Load

The images have an alt text attribute and have the option to be lazy loaded when the row is not in view on page load for fast page download time.
Note that the images can have different aspect ratios.

Perspective

Animation

There is a large choice of custom animations,.
The animation occurs when the item enters the viewport. The animation time is set in milliseconds and the staggered delay is preset.
Animation, of course, is removed for mobile phones since this causes confusion on these devices.

Rotate

Icon Row

Icon Row

Price/Date

The items are created using the CSS Grid Layout Module.
They are <article> elements which can have a border and/or a bottom box shadow.
When there are three columns the last one is centered in row 2 below the break point.

Perspective

Columns

The article has a header with optional icon and a heading.
The text section can have an optional styled span for price/date etc.
The optional link bars are fixed at the bottom so that they remain in line despite varying content.
Links globally switchable internal/external.

Slider

Icon

The optional icons are SVGs used for for better quality and efficiency. They are inserted by opening the SVG download folder, double clicking the file to open it in TextEdit in plain text mode, copying the code and pasting it into the SVG code box in the widget settings.

Images

Animation

There is a large choice of custom animations,.
The animation occurs when the item enters the viewport. The animation time is set in milliseconds and the staggered delay is preset.
Animation, of course, is removed for mobile phones since this causes confusion on these devices.

Rotate

SVG Icons

Scalable Vector Graphics (SVGs) are the preferred chice for responsive web page icons. They have better quality than font icons such as Font Awesome.
Use then to replace PNG icons which should not be used in a responsive web page alyout due to their file size and download inefficiency.
EverWeb ThemeKit responsive widgets and themes have a link in the "Read Me First" file in the download folder. It will download a folder containing 100s of SVG icons.
To insert an SVG …

  • Open the download folder and find a suitable icon
  • Open the icon in TextEdit.app or a code editor
  • Copy the code and paste it into the widget settings
  • CotEditor is a small free app which is ideal for opening SVGs

© EverWeb Widgets -

Menu