BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Pro widget

Hexagon Grid Widget for Elementor Pro

Honeycomb of hexagons with icons or images, titles and links

Overview

What Hexagon Grid does

Hexagon Grid places hexagons in a honeycomb, with every other row shifted by half a hexagon. Each hexagon can hold an icon, an image or text only, with a title, short text and a link. Use it for services, categories, features or an image gallery with a different shape.

Live demo

See it in action

Cake

Candy

Cookies

Ice Cream

Bread

Coffee

Features

What it can do

  • Icon, image or text only for each hexagon, with a title, text and link.

  • Hexagons per row and gap set for desktop, tablet and phone.

  • First row or second row indented, for two honeycomb patterns.

  • Text on image hexagons shows on hover, always, or is hidden.

  • Hover effects: Lift, Grow, Shrink or Zoom the image.

  • Optional pop in on scroll, one hexagon after another.

  • Outline width and colors, a shadow color, and own colors per hexagon.

  • CSS filters for images in normal and hover state.

Use cases

When to use it

Services or features

Show each service as an icon and title in a compact honeycomb.

Category menu

Link each hexagon to a shop or blog category.

Image gallery

Fill hexagons with photos and show the title on hover.

Team or partners

Use portraits or logos in hexagons for a different look than a plain grid.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Hexagon Grid onto the page.

  2. In Hexagons, open each item and choose Show: Icon, Image or Text only, then add the Title, Text and Link.

  3. Set an Image Size for image hexagons and the Title HTML Tag.

  4. In Layout, set Hexagons per Row and Gap for each device, and pick a Row Pattern.

  5. Choose the Text on Image Hexagons, the Hover Effect and whether to Pop In on Scroll.

  6. Style the hexagon, icon, image, title and text in the Style tab.

FAQ

Questions and answers

How do I make the hexagons smaller?

Lower Max Width in Layout or raise Hexagons per Row. Both are set per device.

Can a hexagon be a link?

Yes. Add a Link to the hexagon and the whole shape becomes clickable.

How many hexagons should a phone show per row?

Two per row is the default on phones, which keeps titles readable. You can change it in Hexagons per Row on the phone view.

Can I mix icons and images?

Yes. Each hexagon has its own Show setting, so icon, image and text only hexagons can sit in the same grid.

Bright Addons Pro

Get Hexagon Grid with Bright Addons Pro

Bright Addons Pro has 98 Pro widgets plus all 56 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $10 a year, with a 14-day money-back guarantee.