The Hexagon Grid widget is a visually striking tool designed for Elementor users who want to showcase content in a unique hexagonal layout. Perfect for portfolios, galleries, or any content-heavy website, this widget offers customizable options to make your grid stand out. With its responsive design and user-friendly interface, you can easily create an engaging and modern grid layout that captivates your audience.
Let’s look at each of the options in the Hexagon Grid widget for Elementor below.
Add a Hexagon Grid Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Hexagon Grid”
- Hover over the widget in the search results and click install
- Add the “Hexagon Grid” widget to any Elementor Page
Source Settings
The Hexagon Grid widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
WordPress Posts
Display WordPress posts dynamically in your hexagon grid, including custom post types and fields for maximum flexibility.
Meta Field
Use Meta as an item source for your hexagon grid to dynamically display and manage content from your Meta data.
JSON or CSV
Load the hexagon grid with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for hexagon grid to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your hexagon grid to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the hexagon grid to dynamically display and manage menu items in a visually engaging layout.
API Integrations
Integrate an API into your hexagon grid to dynamically fetch and display data from external systems or services.
To know more about multi source, Click here.
General Settings
Column Count
Set the number of columns to display in a row.
Gap
Set the gap between grid items.
Show Title
Show or hide the title.
Show Text
Show/hide the text.
Content Gap
Set the gap between content.
Items Image Size
Select the items image size.
- Full
- Large
- Medium Large
- Medium
- Thumbnail
- 1536*1536
- 2048*2048
Items BG Image Size
Select the items backgrounda image size.
- Full
- Large
- Medium Large
- Medium
- Thumbnail
- 1536*1536
- 2048*2048
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
To know more about Remote Control Widgets, Click here.
Sequence Entrance Animation Settings
Sequence Entrance Animation
Set the entrance sequence animation for hexagon grid.
- None
- Appear
- Scale Down
- Scale Up
- From Left
- From Right
- From Top
- From Bottom
Items Settings
Manage the items of the hexagon grid using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set the heading for the hexagon grid item.
Text
Type text for grid item.
Graphic Element
Choose any of the graphic element to display.
- None
- Icon
- Image
- Text
Link Type
Select the link type for grid item.
- None
- Regular Link
- Lightbox
- Button
Styles
Override the title color, description color, button color and icon color.
Background
Override the background color and background image for hexagon item.
Hexagon Grid Widget Styling
A variety of styling options are available, giving you complete control over the widget’s design. Select colors that align with your website’s aesthetic. You can customize the text, icons, fonts, and layout to ensure the widget looks and functions exactly as you envision.
Item Container Styling
Set the item container width, alignment, background color, hover animation and border.
Title Styling
Style the title color and title typography.
Text Styling
You can set the text color and typography.
Button Styling
Here, you can set the button color, hover color, background color, typography, padding, border and box shadow.
Graphic Element Styling
You can set the width, height, background color, border, radius, shadow, spacing, typography, and icon size of graphic element.
Hexagon Grid Design Examples For Elementor
Here are some live use cases for the Hexagon Grid Widget.
Team members shown as hexagon grid.
Zodiac signs displayed as hexagonal grid items.
Thank you for taking the time to explore the Hexagon Grid widget for Elementor! We hope this guide has helped you to create eye-catching layouts that truly make your website stand out. If you have any questions or need a little extra help, don’t hesitate to reach out—we’re always here for you. Be sure to check out our other widgets for even more creative possibilities.
