The “Service Box Hero widget” for Elementor empowers you to craft striking and interactive hero sections with ease, combining service highlights and visual engagement in one seamless design. Ideal for showcasing key offerings, this dynamic widget allows you to build bold, clickable service boxes that guide users to learn more, enhancing both usability and visual appeal. With intuitive controls and design flexibility, the Service Box Hero widget is a versatile solution for elevating service-based layouts, landing pages, and homepage introductions.
Let’s explore the features available in the “Service Box Hero widget” for Elementor below.
Add a Service Box Hero Widget to Elementor
This widget requires “Unlimited Elements Pro“ version installed and activated on your WordPress website.
Add a Service Box Hero Widget to a Elementor Page
Elementor Service Box Hero Widget General Settings
Service Columns
Sets how many columns your service boxes are displayed in.
RTL (Right-to-Left)
Toggles the layout direction.
Align Content
Aligns the service boxes themselves (as a group) to the left, center, or right within the widget area.
Service Content Align
Aligns the text and icon inside each service box to the left, center, or right.
Show Title
Toggles title visibility.
Title
Text content for the title.
Title Tag
HTML heading tag for the title.
Show Description
Toggles description visibility.
Description
Text content for the description.
Show Graphic Element
Controls the display of an image/logo.
Graphic Element Link
URL for the graphic element.
Logo Image
Image upload/selection for the logo.
Logo Image Size
Display size of the logo.
Show Button
Toggles button visibility.
Button Text
Text displayed on the button.
Button Link
URL for the button.
Service Item Input Field
Each existing item has a text input field where you can define the name or title of the service.
Duplicate Item Icon
Allows you to create a copy of an existing service item.
Delete Item Icon
Allows you to remove an existing service item.
Add Item Button
Allows you to add a new service item to the list.
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 Service Box Hero Widget Style Settings.
Background Color
Sets the wrapper's solid background color.
Background Image
Sets an image as the wrapper's background.
Image Resolution
Defines the image's quality.
Position
Controls image placement within the wrapper.
Attachment
Determines if the image scrolls or stays fixed.
Repeat
Controls if and how the image repeats.
Display Size
Adjusts how the image fills the wrapper.
Background Overlay Color
Adds a color tint over the background.
Background Overlay Image
Adds an image layer over the main background.
Padding
Controls inner spacing around content (Top, Right, Bottom, Left).
Border Radius
Rounds the corners of the wrapper (Top, Right, Bottom, Left).
Border Type
Sets the style of the wrapper's border.
Box Shadow
Adds a shadow effect around the wrapper.
Content Max Width
Sets the maximum width for internal content.
Height Type
Defines how the wrapper's height is determined.
Graphic Element Width
Sets the overall width of the graphic element.
Graphic Element Height
Sets the overall height of the graphic element.
Graphic Image Width
Sets the width of the image within the graphic element.
Graphic Image Height
Sets the height of the image within the graphic element.
Image Fit
Controls how the image scales within its container.
Background Color
Sets the background color for the graphic element.
Border Radius
Rounds the corners of the graphic element (Top, Right, Bottom, Left).
Image Border Radius
Rounds the corners specifically of the image within the graphic element (Top, Right, Bottom, Left).
Box Shadow
Adds a shadow effect to the graphic element.
Border Type
Sets the style of the graphic element's border.
Typography
Controls font properties for the description.
Color
Sets the text color of the description.
Text Shadow
Applies a shadow effect to the description text.
Gap
Adjusts the amount of space below the description.
Description Content Width
Sets the maximum width of the description text content.
Typography
Controls all font-related styles for the button text.
Padding
Adjusts the inner spacing within the button (Top, Right, Bottom, Left).
Border Radius
Rounds the corners of the button (Top, Right, Bottom, Left).
Gap
Sets the amount of space below the button.
Normal/Hover States
Allows separate styling for the button's default state and when hovered over.
Text Color
Sets the color of the button's text.
Background Color
Sets the background color of the button.
Text Shadow
Applies a shadow effect to the button's text.
Border Type
Sets the style of the button's border.
Padding
Inner spacing of the box.
Border Radius
Corner roundness.
Background Color
Box fill color.
Border Type
Style of the box's border.
Box Gap
Spacing between multiple boxes.
Auto Stretch Last Item
Prevents the last item from auto-stretching.
Typography
Font styles for the title.
Color
Text color of the title.
Text Shadow
Shadow effect for the title.
Persona Service Box Widget Design Examples For Elementor
Here are some live use cases for the Service Box Hero Widget.
Elementor Service Box Hero with Website Featured Image.
Elementor Service Box Hero with Custom Website.
Thank you for using the Service Box Hero widget for Elementor! Designed to highlight your key offerings with bold, interactive service boxes, this widget is perfect for creating stunning hero sections that engage visitors right from the start. Whether you’re showcasing multiple services or guiding users through your core features, its sleek layout and intuitive design make it a powerful addition to any website. Have questions or need assistance? We’re here to help. For more inspiration, explore the live demo on our website.