The “Solid Color Hero widget” for Elementor helps you create bold, clean, and professional hero sections with ease using a single solid background color. Ideal for minimalist designs, this versatile widget emphasizes impactful typography, strong messaging, and a sleek layout to set the tone for your pages. With a range of customization options for text, spacing, and alignment, the Solid Color Hero widget delivers a modern, straightforward aesthetic that enhances any Elementor design.
Let’s explore the customization options available in the “Solid Color Hero widget” for Elementor below.
Add a Service Solid Color Hero Widget to Elementor
This widget requires “Unlimited Elements Pro“ version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Widgets".
Search for "Solid Color Hero" in the widget library.
Hover over the widget and click Install.
Add a Solid Color Hero Widget to a Elementor Page
Click "Add Element" in Elementor
Search for "Solid Color Hero" in the widget panel.
Drag and drop the Solid Color Hero widget into the container.
Elementor Service Box Hero Widget General Settings
Title
Sets the main heading or primary text for the hero section.
Sub Title
Specifies the secondary text that appears below the main title.
Caption
Provides a longer, descriptive text block for the hero section.
Button Text
Defines the visible text on the call-to-action button.
Button Link
Determines the URL the button directs users to when clicked.
Logo Image
Allows for the selection or upload of an image to serve as a logo within the hero section.
Logo Link
Sets the URL that the logo image will link to when clicked.
Background Color
Enables the user to choose a solid color for the background of the hero section.
Elementor Solid Color Hero Widget Style Settings
Enable Styles
Toggles whether custom styling options for the title are active or inactive.
Typography
Allows customization of the title's font, size, weight, line height, letter spacing, and other text-related properties.
Color
Enables the user to select the text color for the title.
Custom Styles
Provides a field to input custom CSS code for advanced styling of the title.
Enable Styles
Turns on or off the custom styling options for the subtitle.
Typography
Controls the font, size, weight, line height, letter spacing, and other typographical aspects of the subtitle text.
Color
Allows selection of the text color for the subtitle.
Custom Styles
Provides a field to add custom CSS code for advanced styling of the subtitle.
Enable Styles
Toggles the activation of custom styling options for the caption text.
Typography
Manages the font, size, weight, line height, letter spacing, and other text formatting properties of the caption.
Color
Allows the user to choose the text color for the caption.
Custom Styles
Provides a field to input custom CSS code for advanced styling of the caption.
Enable Styles
Toggles custom styling options for the button text on or off.
Typography
Controls the font, size, weight, line height, letter spacing, and other text formatting properties of the button text.
Color
Allows the user to select the text color for the button.
Custom Styles
Provides a field to input custom CSS code for advanced styling of the button text.
Solid Color Hero Widget Design Examples For Elementor
Here are some live use cases for the Solid Color Hero Widget.
Elementor Solid Color Hero with a Call to Action Section.
Elementor Solid Color Hero with Custom Section.
Thank you for using the Solid Color Hero widget for Elementor! Designed for bold, minimalist hero sections, this widget uses a single solid background color to highlight strong typography, clear messaging, and clean layouts. With flexible options for text, spacing, and alignment, it’s a great way to give your pages a modern, professional look in seconds. If you have any questions or need support, feel free to get in touch. For examples and design inspiration, don’t forget to explore the live demo on our website.
