cubicFUSION Hexagon Grid

An Elementor widget that renders a fully configurable honeycomb grid. Each hexagon cell carries an icon or image, title, text, and a link. The grid supports two orientations, responsive column and size controls, rounded corners, hover effects, hover-reveal modes, per-cell style overrides, a media-gallery source with lightbox, auto-fit columns, background fill, and drop shadows.

Content sources

• Manual — a repeater of hand-authored hexagons.
• Media Gallery — auto-populate from a WordPress image picker, with lightbox.
• Posts — query the database (posts, pages, CPTs, products…) and render each result as a hexagon.
• Users — query WordPress users (team / author grids) as avatar hexagons.

Per-cell content (Manual)

• Media type per cell: Icon, Image, None, or Spacer (empty).
• Icon from any Elementor icon library (font icon or SVG).
• Image from the media library.
• Title (with selectable heading tag), supporting text, and a link (open-in-new-tab).
• Dynamic Tags on Title / Text / Link / Image — bind to post fields, ACF/meta, site settings, etc.
• Animated stat / counter number per cell (see below).
• Quick Cell Color and full Cell Background Image (classic or gradient).
• Custom Styles popover: per-cell overrides for hover background, border (default + hover),
  icon / title / text / number color (default + hover).

Spacers

• Structural placeholder cells that hold a honeycomb slot but render nothing by default.
• Optional solid Cell Color (custom hex or a global/theme color) to make a blank tile.
• Title doubles as an editor-only label in the Items list (never rendered).
• Hide On (Mobile / Tablet & below): drops the spacer at a breakpoint and repacks the
  remaining cells into a correct honeycomb (normal layout only).

Media Gallery

• Standard multi-image picker with an Elementor image-size group.
• Caption source: image title / caption / description / alt text.
• Link: native Elementor Lightbox (grouped per widget for prev/next), Media File, or None.

Posts source

• Post type, number of posts, offset, order by (date / title / menu order / random / comment
  count), order direction.
• Include by IDs — hand-pick specific posts, shown in the listed order.
• Filter by Terms — any public-taxonomy term(s); results match any selected term.
• Exclude Current Post — drop the post being viewed (useful in Theme Builder).
• Featured-image thumbnail (image-size group), trimmed excerpt (toggle + word length),
  optional publish date (toggle + PHP date format), and an optional permalink link.

Users source

• Filter by role(s), number, order by (name / registered / post count / ID), order.
• Include by IDs — hand-pick specific users in order.
• Avatar (Gravatar / profile image at a chosen size), display name, trimmed bio
  (toggle + length), optional author archive link.

---

Layout

• Orientation: pointy-top or flat-top — same engine, different shape.
• First Cell Position: choose which rows are staggered (the half-column nest offset).
• Responsive columns (desktop / tablet / mobile, 1–6) and cell size (60–300 px).
• Auto-fit Columns — fits as many columns as the container allows at the current size,
  with optional min / max bounds; recomputes on resize.
• Gap between cells (responsive).
• Alignment — left / center / right within the widget column.
• Corner rounding — sharp hexagons → rounded-rectangle feel, via an SVG mask that also
  rounds the border ring (works on both orientations).

Pattern painter („bitmap editor“)

• Clickable honeycomb to paint a deliberate shape (a heart, an arrow, a logo) from Manual items.
• Assign existing items, or create a new item / spacer on the spot; each filled hex shows its
  item number, and the Items list shows each item’s [R·C] coordinate.
• Non-painted hexes fall back to the Background Fill layer (decorative outline or negative space).
• Default Spacer Color for painted spacers without their own fill.
• Responsive collapse: below a chosen breakpoint the fixed shape is dropped and the real
  items reflow into a normal interlocked honeycomb, with independent Reflow Alignment.

Stat / counter hexes

• Optional animated count-up number on any non-spacer cell (sits next to an icon or image).
• Start value, target, duration, decimal places, thousands separator, prefix and suffix.
• Counts up the first time the cell scrolls into view (per-cell IntersectionObserver); the
  start value is server-rendered (no flash of the target on load).
• Respects the OS reduce-motion setting (jumps straight to the target, no tween).

Hover & motion

• Hover effects: Lift, Glow, Zoom, Rotate, Icon Pop, Grayscale→Color, Border Grow.
• Hover-reveal modes: show icon only and reveal title + text on hover (with padding that
  collapses so nothing shifts).
• Entry animations with configurable effect, duration, easing, and stagger; revealed on
  scroll via IntersectionObserver, and disabled under reduce-motion.

Styling (Style tab)

• Cell: default & hover background, border width & color (default + hover), inner inset.
• Icon: color (default + hover), size, and an optional icon background shape/size/color.
• Typography for Title, Number, Text, and Date — color (default + hover) + full
  Group_Control_Typography; text scales with cell size by default.
• Background Fill: decorative filler hexagons tiled behind the content with their own
  color, border, opacity, offset and drop shadow.
• Cell drop shadow for the hexagons themselves.

---

Technical highlights

• No JS dependency beyond Elementor’s own frontend runtime; one small handler powers
  auto-fit, background-fill tiling, entry reveal and the counter.
• Pure-CSS honeycomb (flex + nth-child offsets + SVG mask) — no images for the shape.
• Per-widget inline <style> with carefully managed specificity so per-cell overrides,
  globals and hover states never collide.
• Editor live preview mirrors the frontend; query sources (Posts / Users) show placeholder
  hexes in the panel while the live query renders on the frontend.
• Accessibility: role="list" / listitem, aria-hidden spacers and fillers, keyboard
  navigation, and reduce-motion support throughout.
• Dynamic Tags, global colors and global typography all flow through.