Tutorials

Creating A Hero Section

WordPress roles required: Administrator, Editor, Author, Contributor

We have created the header and footer template and we’re now ready to create our landing page. Create a new page in Elementor, you should only see the header and footer with a blank section in the middle where you will be adding the content. Let’s create the hero section for this landing page.

Adding The Hero Background Image

  • Click on the + red icon to add a new section
  • Choose a section that has 2 columns

Highlight the section, go to the ‘Edit Section‘ panel and apply the settings below.

  • Layout:
    • Content Width: Boxed
      • Width: 1000 pixels
    • Height: 255 pixels
  •  Style:
    • Background
      • Background Type
        • Click on the brush icon and add a background image
      • Position: Center Center
      • Repeat: No-repeat
      • Size: Cover.
        • This will ensure the image always covers the whole section
  • Advanced:
    • Margin: Top, Right, Bottom and Left = 0
    • Padding:
      • Top: 50
      • Right: 0
      • Bottom: 30
      • Left: 0

Hero Column Settings

  • Select the column handle in the top left of the left column.
  • Go to the ‘Edit Column’ panel and click on Layout
  • Layout:
    • Set column width to = 55%
  • Style:
    • Background
      • Background Type, click on the brush icon to open up the background editing section
      • Click on the color palette and choose a color. To make the background color transparent, move the transparent bar to the level of transparency you desire
  • Advanced:
    • Margin: Top, Right, Bottom and Left = 0
    • Padding:
      • Top: 30
      • Right: 50
      • Bottom: 30
      • Bottom: 30

Adding The Hero Header

We have now configured the settings for the left column in the hero section, and are ready to add the content into the column. Press the 9 dots in the editing panel to open the Elementor widgets. Find the ‘Heading’ Widget and drag it into the left column within the hero section.

Go to the ‘Edit Heading‘ panel.

  • Content:
    • Title
      • Add the page header here
  • Style:
    • Text Color: White
      • Typography
        • Choose a font for the header
        • Size: 42
        • Weight: Normal
  • Advanced:
    • Advanced
      • Margin: Top, Right, Bottom, and Left = 0
      • Padding: Top, Right, Bottom, and Left = 0

Adding Text In The Hero Section

To add text in the hero column, press the 9 dots in the editing panel to open the Elementor widgets. Find the ‘Text Editor‘ Widget and drag it into the left column under the hero header.

Now go to the ‘Edit Text Editor‘ panel.

  • Content:
    • Title
      • Text Editor: Add your text here
  • Style:
    • Text Editor
      • Alignment: Left
      • Text Color: White
      • Typography
        • Choose a font for this text
        • Font size: 14
        • Weight: Normal
  • Advanced:
    • Advanced
      • Margin: Top, Right, Bottom, and Left = 0
      • Padding: Top, Right, Bottom, and Left = 0

Adding A Call-To-Action Button

To add the call-to-action button in the hero column, press the 9 dots in the editing panel to open the Elementor widgets. Search for ‘Button’ to bring up the button widget. Drag the button widget into the hero column, under the text you just applied.

Now go to the ‘Edit Button‘ editing panel.

  • Content:
    • Button
      • Text: Add the text for the button here
      • Link: Add the URL of the page you would like to link to here
      • Alignment: Left
  • Style:
    • Button
      • Typography
        • Family: choose a font for this text
        • Size: set the size for the text in the button
        • Weight: Normal
  • Advanced:
    • Advanced
      • Margin: Top, Right, Bottom, and Left = 0
      • Padding: Top, Right, Bottom, and Left = 0
Saving Changes