help center

Search
Close this search box.
On this page

Flex Hero widget

Last Update: April 22, 2025

Add and delete the Hero widget

Flex Hero widget Flex Hero widget 473

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

To delete the widget:

  1. On the canvas, select the element by clicking it.

  2. Press the delete key on your keyboard. For more information, see Delete elements from a page.

What is the Flex Hero widget?

The Flex Hero widget gives you a fast, efficient way to create a Hero section, while still giving you plenty of options to help your page stand out. A Hero section is usually found at the top of webpage. In general, it features:

  • Intro: A couple words about the site or business.
  • Heading: This can be the site name or the most important thing the business does.
  • Subheading: A short phrase or sentence letting visitors know what to expect from the site.
  • Image: A striking image or video to draw visitors’ attention
  • CTA: A call to action giving visitors the chance to engage. This is usually a button or two.

The Flex Hero widget lets you easily and quickly add all, or some, of these to your page. 

See all the options available with the Hero widget.  

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 Bar.
  •  The tagline: Cheers, Beers and Roaring Crowds.
  • An image of the pub.
  • A button linked to a form that lets you reserve a table.
  • A button linked to a page where you can see upcoming activities.
20 the hero section without panel Flex Hero widget 475

Create a Hero section with the Flex Hero widget — Step-by-Step

  1. Drag the Flex Hero widget to the canvas. For details, see Add elements to a page.
    Screenshot 2025 02 13 at 9.50.47 Flex Hero widget 477
  2. Choose a Layout Preset – either Showcase or Storytelling.
    1 enter Intro text 1 Flex Hero widget 479
  3. In the panel, in the Intro text box, enter, Sports and more.
    2 The Heading Flex Hero widget 481
  4. For the Intro, we’ll use the business’ name – Alex’s Sports Bar.
    3 Add subheading Flex Hero widget 483
  5. For the Subheading we’ll use the pub’s tagline – Cheers, Beers and Roaring Crowds.
    Now let’s add a couple buttons to the Hero section, one linked to a reservations form and one linked to upcoming events page.
    Open CTA Flex Hero widget 485
  6. In the panel, open the CTA section.
    Enter button text scaled Flex Hero widget 487
  7. Under Primary CTA, use the Text box to enter Reserve Now.
    Enter link Flex Hero widget 489
  8. In the Link box, enter the URL of the reservation form.
    Now we’ll create a second button with a link to the schedule page.
    Toggle Secondary CTA Flex Hero widget 491
  9. Toggle Secondary CTA to Show
    Enter text for secondary button Flex Hero widget 493
  10. In the Text area, enter Upcoming Events.
    Enter second link address Flex Hero widget 495
  11. In the Link text box, enter the URL of the events page
    Hero sections usually include an eye-catching image. Let’s add one now.

  12. Open the Image section.
    After adding image Flex Hero widget 497
  13. Add an image. For details, see Add images and icons.
    Let’s change the look of the of the Hero section to see how that looks.
    Click teh Style tab Flex Hero widget 499
  14. In the panel, click the Style tab.
    Open the content field 1 Flex Hero widget 501
  15. Open the Content section.
    Click Typography Flex Hero widget 503
  16. Click the pencil icon next to Heading.
  17. Make the font size smaller. For details, see Typography. For details about changing the font color, see Pick a color.
    Lower Subheading size Flex Hero widget 505
  18. Repeat the above process with the Subheading.
    Finally, let’s change the image shape to make it look like an (American) football.
    Open the style image field Flex Hero widget 507
  19. Open the Image section.
    Select the oval shape Flex Hero widget 509
  20. Use the Shape dropdown menu to select Oval.
    The end result 1 Flex Hero widget 511
    The Hero section is ready.

Settings for the Flex 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 intro text, a title and tagline as well as the image, and information for the CTA buttons.

Screenshot 2025 02 13 at 9.42.34 Flex Hero widget 513
Preset

Choose a Preset:

  • Showcase: Highlight key concepts with a balanced layout.
  • Storytelling: Focus on a narrative with supporting visuals.
Content Text Flex Hero widget 515

The Intro consists of a few words talking about what the site is about.  

The Heading is usually the name of the site or business it represents. 

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.

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.

Content tab CTA button Flex Hero widget 517

Control the Call to Action (CTA) button in the Hero section.

  • Text: The words that appear on the button. Leave blank if you do not want a button to appear.
  • Link: The URL you want to take users to when they click the button. Can also be used for mail and phone links. For details see How to make clickable phone or mailto links.
  • Icon
    • No icon Flex Hero widget 519: No icon.
    • upload svg Flex Hero widget 521: Upload an SVG icon of your own.
    • Default icon 1 Flex Hero widget 523: Select and icon from the icon library.

Toggle to Show if you want two CTA buttons in the Hero section.

Content Image Flex Hero widget 525

For details, see Adding images and 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.

tab layout Flex Hero widget 527

Set the content to the:

  • right Flex Hero widget 529 Start of the widget. The can change depending on if the widget goes from right to left or from left to right.
  • MIddle icon Flex Hero widget 531 In the center of the widget.

Only available if the Content Position is set to center.

You can align the Hero section to the:

  • Align center Flex Hero widget 533 Center of the container.
  • start icon 1 Flex Hero widget 535 Start of the container. Will depend on whether the container goes right to left or left to right.

Center alignment is the most common choice.

Use the slider to determine width of the Hero section.

Style Content Flex Hero widget 537

Set the following options for the Intro:

Set the following options for the Heading:

Set the following options for the Subheading:

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 (button only) : Switch between a classic background or a gradient background. For details, see Create a Background.
  • Color (button only): Change the background color of the CTA. You must choose a global color.

Other options for the CTA:

  • 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.
    • RoundedButtons 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.

If you have two CTA buttons, you’ll have the same options for the second button. 

Style Image Flex Hero widget 539

Determine how far the image will stretch across the screen.

Toggle Stretch to Yes if you want the image spread as far as possible ignoring any padding.

Use the sliders or text box to adjust the size the image.

Determine how what part of the image is visible. For details, see Positioning background images.

Add special effects to the image. Choices are:

  • Blur: Applies a Gaussian blur effect to the image, softening its appearance by the specified radius value.
  • Brightness: Adjusts the brightness of the image, increasing or decreasing light intensity based on a multiplier value.
  • Contrast: Adjusts the contrast of the image, enhancing or reducing the difference between light and dark areas.
  • Saturation: Adjusts the image’s color intensity, increasing or decreasing the vividness of its hues using a multiplier.
  • Hue: Adjusts the intensity of the image’s colors, making them more vivid or muted using a multiplier.

Toggle to Yes to create a border around the image.

If you use a border, you’ll have to set:

Use the dropdown menu to set an image shape. Choices are:

  • Sharp: Rectangular image.
  • Rounded: Image appears with evenly curved edges.
  • Round: Image appears with smooth corners.
  • Oval: Image is elongated, rounded, egg shaped. resembling
  • Custom: Use the Border Radius tool to shape the image. For details, see Border radius tools.
Style box Flex Hero widget 541

This is where you can style the background for the entire section. For details, see Background.

Similar to creating a background This is where you can style the background but with the option of using the Opacity slider to adjust the transparency of the background. 

The Heading, CTA and Image are all elements in the Hero widget. Use the slider too set a distance between each of these elements. 

Adjust the amount of space between the image and the other elements.

Add a border around the Hero section.

If you use a border, you’ll have to set:

Set the shape of the Hero section.

  • Round: Buttons appear with smooth corners.
  • Rounded: Buttons appear with evenly curved edges.
  • Sharp: Rectangular buttons.

Click the pencil icon to add shadow to the toggle. Learn more about shadows.

Use the counters to control the distance the elements of the Hero Section and widget’s boundaries. For details, see Padding and margins.

Toggle to Yes if you want the Hero section to take up the entire screen.

Advanced tab

Control the placement of your widget, insert links, add custom code and more.

Advanced Flex Hero widget 543

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article