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 viaIntersectionObserver, 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-childoffsets + 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-hiddenspacers and fillers, keyboard
navigation, and reduce-motion support throughout. - Dynamic Tags, global colors and global typography all flow through.
