How to set up and style the Hexagon Grid widget in Elementor.
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.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Hexagons | The list of hexagons. Each has the fields below. |
| Show | Icon, Image or Text only. |
| Icon | The icon shown when Show is Icon. |
| Image | The image that fills the hexagon when Show is Image. |
| Title | The title inside the hexagon. |
| Text | Short text under the title. |
| Link | Makes the whole hexagon a link. |
| Own Background Color | A background color for this hexagon only. |
| Own Icon Color | An icon color for this hexagon only. |
| Image Size | The image size used for image hexagons. |
| Title HTML Tag | The heading tag of the titles. |
| Option | What it does |
|---|---|
| Hexagons per Row | How many hexagons sit in each row, from 1 to 12, per device. |
| Gap | The space between hexagons, per device. |
| Row Pattern | First row indented, or second row indented. |
| Max Width | The widest the grid can get, 720 px by default. |
| Alignment | Places the grid left, center or right. |
| Show Title | Shows or hides the titles. |
| Show Text | Shows or hides the text. |
| Text on Image Hexagons | Show on hover, Always show or Hide. |
| Hover Effect | None, Lift, Grow, Shrink or Zoom the image. |
| Pop In on Scroll | Hexagons appear one after another when the grid scrolls into view. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
inner padding, content gap, background color or gradient for normal and hover, outline width and colors, and a shadow color.
size, color and hover color.
overlay and hover overlay colors, and CSS filters for normal and hover.
typography, color, hover color and text shadow.
typography, color, hover color and text shadow.
Lower Max Width in Layout or raise Hexagons per Row. Both are set per device.
Yes. Add a Link to the hexagon and the whole shape becomes clickable.
Two per row is the default on phones, which keeps titles readable. You can change it in Hexagons per Row on the phone view.
Yes. Each hexagon has its own Show setting, so icon, image and text only hexagons can sit in the same grid.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guideYearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.