Activate experimental feature
The XXXX widget is an experimental feature that XXX
In order to use XXX widget, you need to activate it. For details, see activating Elementor features.
Add the Hero widget
Add the widget to the canvas
To access and use a widget:
In Elementor Editor, click +.
All available widgets are displayed.Click or drag the widget to the canvas. For more information, see Add elements to a page.
What is the Hero widget?
A Hero section is usually found at the top of webpage. In general, it features:
- Title, usually the site name.
- Tagline letting visitors know what to expect from the site.
- A striking image or video to draw visitors’ attention
- Call to action (CTA), giving visitors the chance to engage.
The Hero widget lets you easily and quickly add all, or some, of these to your page.
Common use case
Alex is creating a page for their new sports pub. The top of the page will feature:
- The name of the pub: Alex’s Sports Pub.
- The tagline: Cheers, Beers and Roaring Crowds.
- An image of the pub.
- A button letting you reserve a table.
Example
Settings for the Hero widget
You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.
Content tab
This is where you’ll add the text for the title and tagline, the image and the information for the CTA button.
Heading
The Heading is usually the name of the site or business it represents.
HTML Tag
The HTML tag help search engines and accessibility tools identify the most important parts of a page.
The Heading is usually the most important part of the page so, by default it is marked as H2. This way, if someone searches for “Alex’s Pub” they’re more likely to land on this page.
However, you can use the dropdown to tag the Heading and Subheading differently if you choose.
Subheading
The subheading gives a little more detail about what users can expect from the site or business. In a Hero section space is at a premium so it should be as short as possible, no more than ten words.
Text
Add text such as Reserve Now or Contact Us to your CTA button.
Link
Choose to:
- Insert a URL in the text box to take users to a page when they click the button.
- Click the dynamic tag icon to insert a dynamic tag. For more details, see Dynamic tags.
Icon
You can add catchy/informative little symbol to the CTA button.
For example, you can add a mail icon to a Contact Us CTA.
- Click the upload symbol to upload your own .svg format icon. You may need to confirm permission to upload .svg files.
- Click the icon symbol to open the library giving you access to hundreds of image options.
Menu Toggle
Control how the icon representing the dropdown will appear, if you select a dropdown layout.
Alignment
Set the icon representing the dropdown to the right, left or center.
Normal
How the icon will appear by default.
Hover
How the icon will appear when a visitor mouses over it.
Active
How the icon will appear when a visitor clicks on it.
Icon
Select the icon that will represent the menu. Learn more about icons.
Style tab
This is where you’ll change the look and feel of text, image of buttons. For example, here is where you’ll change the font size of the Heading.
Content Position
You can align the Hero section to the:
Center of the container.
Start of the container.
End of the container
Center alignment is the most common choice.
Heading
Set the following options for the Heading:
- Text Color: For details, see Choose a color or Use global fonts and colors.
- Typography: Set the font and size of the text. For details, see Typography.
- Text Width: Set how much space, from right to left, the text will take up.
Subheading
Set the following options for the Subheading:
- Text Color: For details, see Choose a color or Use global fonts and colors.
- Typography: Set the font and size of the text. For details, see Typography.
- Text Width: Set how much space, from right to left, the text will take up.
CTA Button
Set the following options for the CTA:
- Type: The CTA can be displayed as either a button or a simple text link. Use the dropdown to switch between them.
- Typography: Set the font and text size of the button or link. For details, see Typography.
- Icon position: Use the positions to determine if the icon will be to the right or left of the text.
- Icon Spacing: Use the slider to set the distance between the icon and the text.
The options below can change depending on where the cursor is:
- Normal: How the CTA appears by default.
- Hover: How the CTA appears when visitors mouse over it.
Dynamic options for the CTA:
- Text Color: Change the color of the CTA text. For details, see Choose a color or Use global fonts and colors.
- Background type: Switch between a classic background or a gradient background.
- Color: Change the background color of the CTA. You must choose a global color.
- Border: Adding a border can help your CTA stand out. Toggle to Yes to add a border. If you add a border you can also choose a border width and color.
- Shape: Use the dropdown to determine the roundness of the CTA button. Choose between:
- Default
- Sharp: Rectangular button.
- Round: Buttons appear with smooth corners.
- Rounded: Buttons appear with evenly curved edges.
- Box Shadow: Add depth to your CTA by adding shadow. For details, see What is Shadow?
- Padding: For details, see Padding and margins.
Icon - For Elementor Hosting users
This section is only relevant if you chose to place an icon next to your menu item.
Position
Determine if the icon next to the menu item will be located to its right, left, top or bottom.
Size
Use the slider to increase and decrease the size of the icon next to the menu item.
Spacing
Use the slider to increase and decrease the amount of room between the icon and the tab name.
Normal
How the icon will appear by default.
Hover
How the icon will appear when visitors hover over it.
Active
How the icon will appear when the item is selected.
Color
Determine the color of the icon. To choose a color, either use the color picker or a global color.
Menu Toggle
Best practice is to replace the menu with a toggle if visitors are using a mobile device. The section controls the look of this toggle.
Size
Use the slider to set the size of the menu toggle.
Normal
How the toggle will appear by default.
Hover
How the toggle will appear when moused over.
Active
How the toggle will appear when selected.
Color
Set the color of the toggle For more details, see Choose a color or Use global fonts and colors.
Background type
Add a background to the toggle. For more details, see Create a Background.
Border type
Use the dropdown menu to add a border to the toggle. Learn more about border types.
Box shadow
Click the pencil icon 
to add shadow to the toggle. Learn more about shadows.
Border Radius
Round the corners of the borders around the toggle, if you added a border.
To adjust the radius with the counter control, use the four counters to adjust each individual corner. Learn more about measurement methods.
Distance from dropdown
Use the slider to control the amount of space between the menu toggle and menu content.
Advanced tab
Control the placement of your widget, insert links, add custom code and more.
Advanced
Learn more about the Advanced tab settings.
