Widgetkit

Widgetkit

Widgetkit is an easy-to-use content creator to build entire pages in no time. It provides a simple and user-friendly way to enrich your website experience with slideshows, galleries, lightboxes and much more.

The Widgets

Widgetkit provides a growing collection of widget plugins.

Gallery Widget

The Gallery displays images and content in a grid and provides different layout, animation and overlay options. A lightbox can be enabled to show a larger version of your media.

Interior
Library
Vintage
Slides
Tea Box
Camera
Museum
Living Room
Office
  • Interior
  • Library
  • Vintage
  • Slides
  • Tea Box
  • Camera
  • Museum
  • Living Room
  • Office
  • Interior

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Library

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Vintage

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Slides

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Tea Box

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Camera

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Museum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Living Room

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Office

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Interior
  • Library
  • Vintage
  • Slides
  • Tea Box
  • Camera
  • Museum
  • Living Room
  • Office

Dynamic Grid

The Gallery widget provides the option of arranging items fluently and seamlessly for a gap-free multi-column layout on all device sizes. You can filter items by name or tag.

Camera

Camera

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Typography

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Portfolio App

Portfolio App

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Sneakers

Sneakers

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Corporate Identity

Corporate Identity

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Badge

Badge

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Sticker

Sticker

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Vintage

Vintage

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Workspace

Workspace

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Business Card

Business Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Flyer

Flyer

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
T-Shirt

T-Shirt

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Parallax Grid

You can add a scrolling parallax effect to the grid columns.

Gallery 01
Gallery 02
Gallery 03
Gallery 04
Gallery 05
Gallery 06
Gallery 07
Gallery 08
Gallery 09

Gutter

You can set different gutter widths or remove the gutter completely for a tiled image layout. Independently from the overlay, you can add different animations to the image.

Landscape

Landscape

Deer

Deer

Trespassing

Trespassing

Diving

Diving

Flower Field

Flower Field

Hot-Air Balloon

Hot-Air Balloon

Backwoods

Backwoods

Hiking

Hiking

Mountains

Mountains


Overlay

Display your content in an overlay. You can apply a background, animation and determine the alignment. The overlay can be triggered on hover or remain visible at all times.

Alps, Europe

Alps, Europe

September 2015
Cairo, Egypt

Cairo, Egypt

March 2015
Oslo, Norway

Oslo, Norway

January 2015
Hamburg, Germany

Hamburg, Germany

August 2014
Crete, Greece

Crete, Greece

July 2014
Tuscany, Italy

Tuscany, Italy

May 2013
  • Alps, Europe
  • Cairo, Egypt
  • Oslo, Norway
  • Hamburg, Germany
  • Crete, Greece
  • Tuscany, Italy
  • Alps, Europe

    September 2015
  • Cairo, Egypt

    March 2015
  • Oslo, Norway

    January 2015
  • Hamburg, Germany

    August 2014
  • Crete, Greece

    July 2014
  • Tuscany, Italy

    May 2013
  • Alps, Europe
  • Cairo, Egypt
  • Oslo, Norway
  • Hamburg, Germany
  • Crete, Greece
  • Tuscany, Italy

Image Overlay

You have the option to display a different image as an overlay on hover. Just add a second media field to the content section.

Man Man
Diver Diver
Woman Woman

Panels

The Gallery widget can also display content in an image caption with different panel styles. You can split content parts to be shown in the caption and the overlay.

Redbrick House

Redbrick House

USB Stick

USB Stick

Boardwalk

Boardwalk

Backwoods

Backwoods

Tablet

Tablet

Wooden Box

Wooden Box


Additional Fields

Some of the elements that you can display inside a Gallery widget need to be defined first by creating an additional field inside the Content Manager.

Field Description
Tags Need to be created for filtering items.

Gallery Options

Layout Options Settings Description
Grid Behaviour Match Height, Dynamic Grid Match the height of grid items or display them in a masonry style.
Grid Gutter Default, Collapse, Small The spacing between grid columns.
Grid Filter none, Text, Divider, Nav, Tabs The navigation to filter grid items.
Grid Alignment Left, Center, Right Alignment of the filter navigation.
Columns Phone Portrait 1, 2, 3, 4, 5, 6 Number of columns on phones in portrait view.
Columns Phone Landscape Inherit, 1-6 Number of columns on phones in landscape view.
Columns Tablet Inherit, 1-6 Number of columns on tablets.
Columns Desktop Inherit, 1-6 Number of columns on desktops.
Columns Large Screens Inherit, 1-6 Number of columns on large desktops.
Items Animation None, Fade, Scale Up, Scale Down, Slide Top, Slide Bottom, Slide Left, Slide Right The animation that will be applied to grid items when scrolling into view.
Media Options Settings Description
Media Image [Number] Set the width and height of Gallery images in pixels.
Media Border None, Circle, Rounded The appearance of gallery images.
Overlay Appearance Image Caption, Overlay Center, Overlay Bottom Display content in an image caption or different overlays.
Overlay Background None, Steady, On hover Add a background to the overlay at all times, on hover or not at all.
Use second image as overlay if exists Create a second media field in the content settings, which will automatically be displayed as an overlay.
Overlay Toggle content on hover Hide content by default and display it on hover.
Overlay Animation Fade, Slide Top, Slide Bottom, Slide Left, Slide Right The animation that will be applied to the overlay when being displayed on hover.
Overlay Image Animation None, Fade, Scale, Spin, Grayscale The animation that will be applied to the image on hover.
Content Options Settings Description
Text Display Show or hide title and content.
Text Title Size Default, H1, H2, H3, H4, Extra Large Define the font size of the title.
Link Display Display the Read More link. The link URL is added to each item in the Content Manager.
Link Style Text, Icon Mini, Icon Small, Icon Medium, Icon Large, Icon Button,
Button, Button Primary, Button Large, Button Large Primary
Set the style of the Read More link.
Link Text [Text] Define the link text.
Lightbox Options Settings Description
Lightbox Disabled, Default, Slideshow Choose the lightbox style.
Lightbox Image Width, Height Set the image's width and height in pixels.
Lightbox Caption None, Use Title, Use Content Set the content which will be displayed inside the lightbox caption.
Lightbox Image Show second media element in lightbox.
Button Display Show/ hide lightbox button.
Button Style Text, Icon Mini, Icon Small, Icon Medium, Icon Large, Icon Button,
Button, Button Primary, Button Large, Button Large Primary
Set the styling of the button that opens the lightbox.
Button Text [Text] Define the button text.
General Options Settings Description
Custom HTML Class [Text] Set a custom HTML class that will be added to the widget element in the rendered output.
Custom Link Target Open all links in a new window.

Features

Clean code, tons of options and great usability make Widgetkit one of a kind.

Image Sizing

Image Sizing

Images are automatically cropped and resized to fit your widget. This makes publishing galleries easy as pie!
Fancy Animations

Fancy Animations

Widgetkit provides a bunch of eye-catching transition effects that you can choose from for your items.
Drag & Drop Ordering

Drag & Drop Ordering

Widgetkit is intuitive and easy to use. You can order widget items via drag & drop and re-order them at any time.
Fast Loading

Fast Loading

CSS and JavaScript files are combined, minified and cached on the fly. Lazy loading keeps the initial amount small.
Touch Screen Support

Touch Screen Support

Widgetkit supports touch gestures for mobile devices and keyboard navigation to provide a great usability.
Theme Support

Theme Support

All widgets automatically adapt their look to perfectly fit your theme. Most themes even provide bonus widgets.
Custom Fields

Custom Fields

Besides the predefined fields you can add custom fields, so you can easily extend items and add more content.
1­-Click Updates

1­-Click Updates

When a new Widgetkit release is available, you‘ll be notified by your CMS and can update with just one click.
Extendable

Extendable

Widgetkit is very modular and extendable by design. You can easily add your own widgets or content providers.

3rd Party Integration

Widgetkit works smoothly with popular CMS, plugins and extensions.

Joomla
WordPress
WooCommerce
ZOO
K2

Get Widgetkit for WordPress or Joomla.

Buy Widgetkit