In this guide, we’ll show you how to add a “Button Group widget” to your Elementor website. The Button Group widget helps you create advanced, flexible button layouts effortlessly by grouping multiple buttons together in a clean, organized format. Perfect for displaying related actions or links in either horizontal or vertical alignment, this free widget gives your visitors clear, easy-to-navigate options while enhancing your site’s design and usability. With customizable options for layout, spacing, and styling, the Button Group widget makes it simple to build engaging, efficient button groups for any Elementor project.
Let’s explore the customization options available in the “Button Group widget” for Elementor below.
Add a Free Button Group to Elementor
Add a Free Button Group Widget to an Elementor Page
Elementor Button Group Widget General Settings
Items Source
Defines where the button group’s content is pulled from.
Items: Manually add and configure buttons inside the widget.
Posts: Generate buttons from WordPress blog posts.
WooCommerce Products: Create buttons from WooCommerce store products.
ACF Custom Field: Use Advanced Custom Fields data for buttons.
JSON or CSV: Import button data from external JSON or CSV files.
Gallery: Create buttons related to gallery items.
Terms: Generate buttons from taxonomy terms (categories, tags).
Users: Create buttons based on WordPress users.
Menu: Generate buttons from navigation menu items.
RSS: Pull button data from RSS feeds.
Instagram: Integrate Instagram posts or profiles as buttons.
API Integrations: Fetch button data from external APIs.
Debug - Show Input Data
When enabled, it displays raw input data to help with debugging.
Layout
Controls how buttons are arranged within the group.
Gap
Sets the spacing between individual buttons.
Align
Determines the horizontal alignment of the entire button group in its container.
Output
Controls the HTML structure or rendering style of the button group.
Hover Effect
Select an animation effect to apply to individual dropdown items when hovered. Options include:
Not Chosen (no animation)
Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Button Group Widget Style Settings
Button Radius
Set corner roundness. Use the chain icon to link or unlink values.
Button Padding
Adjust inner spacing. Use the chain icon to link or unlink values.
Button Border Type
Choose a border style.
Button Shadow
Click the pencil icon to configure shadow settings.
Button Typograph
Click the pencil icon to adjust text styles.
Button Text Color
Select the text color.
Button BG Color
Select the background color.
Button Text Align
Choose horizontal alignment.
Icon Gap
Set the spacing between text and icon.
Button Icon Fill
Select the icon’s fill color.
Button Group Widget Design Examples For Elementor
Here are some live use cases for the Button Group widget.
Online Classes Full Menu with Button Group widget.
Side Menu for a Medical Website with Button Group widget.
Thank you for choosing the free Button Group widget for Elementor! Easily create flexible button layouts displayed horizontally or vertically, perfect for organizing related actions in a clean design. Customize the layout and style to enhance your site’s navigation and appearance. For help or inspiration, feel free to contact us or check out our demos.