The widget library for WordPress is here Download plugin

Diagonal Visual Slice Gallery

Create a striking visual impact with the Diagonal Slice Gallery. This widget is a "pure" image showcase designed for photographers, fashion brands, and portfolios where the imagery should speak for itself. It removes all text and buttons to focus entirely on the visual content.

The widget uses advanced CSS transforms to create a Skewed Flex Layout. Images are displayed as diagonal slices (-12 degrees) separated by fine lines. Hovering over a slice triggers a high-performance expansion animation using an Expo easing curve, causing the slice to widen, gain full color (from grayscale), and settle into place. This mechanical, shutter-like movement gives the gallery a highly technical and modern feel.

Key Features:

  • Diagonal Slice Layout: A unique geometry that breaks the standard "box grid" layout for a more dynamic look.
  • Pure Visuals: No text, titles, or links cluttering the view—100% focus on the photography.
  • Grayscale-to-Color: Automatic filter transitions add depth and interactivity without needing custom image editing.
  • Smart "Un-Skew" Logic: The container tilts, but the images remain perfectly upright thanks to counter-transforms.
  • Fluid Response: Adapts from a horizontal diagonal layout on desktop to a stacked vertical deck on mobile devices.
  • Unlimited Items: Add as many image slices as you need via the editor's "Add Slide" function.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.