October 23, 2023

Design A Grid Team Hero Banner with Elementor

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Creating a Grid Team Hero Banner can be a complex task, but with Elementor, you can simplify the process. This tutorial will guide you through each step to achieve a visually appealing and functional hero banner.


Before starting, ensure you have:

Setting Up the Parent Container

  1. Navigate to Elementor > Edit Page to open the Elementor editor.
  2. Click on + Add New Section to create a new section.
  3. Select the section and set it as the parent container.
  4. Go to Advanced Settings and set the padding and margin to 0.
  5. Adjust the width to 100% to make it full-width.

Creating Child Containers

  1. Click on + Add New Section inside the parent container.
  2. Name this as ‘Child Container 1’.
  3. Repeat steps 1 and 2 to create ‘Child Container 2’.
  4. Set the width of each child container to 50%.
  5. Ensure both child containers are set to full width relative to the parent container.

Adding Content to Child Container 1

  1. Drag a heading widget into ‘Child Container 1’.
  2. Edit the text and apply the color you desire.
  3. Use the clamp calculation formula for responsive text sizing. For example, clamp(2rem, 2.5vw, 3rem).
  4. Drag a text editor widget below the heading.
  5. Insert the text and customize its appearance.
  6. Drag a button widget and customize it according to your needs.

Defining the Height and Width

  1. Select ‘Child Container 1’.
  2. Calculate the height based on your layout. If your parent container is 1140px wide, then each child container would be 570px.
  3. Input this value into the height field to create a square layout.

Working on Child Container 2

  1. Select ‘Child Container 2’.
  2. Drag a new container inside it.
  3. Drag a grid widget below the new container.
  4. Adjust the grid settings, adding a gap of 5px between the grid items.

Adding Images and Text to Child Container 2

  1. Drag an image widget into the first grid item.
  2. Upload your image and set the border radius to 1000px to make it circular.
  3. Drag a spacer widget below the image.
  4. Set the spacer height to 38.75px.
  5. Drag a text editor widget below the spacer.
  6. Insert your text, such as “Maximize ROI”, and customize its appearance.

Making it Mobile Responsive

  1. Switch to mobile view in Elementor.
  2. Adjust the height and width of the containers and widgets for mobile.
  3. Rearrange the grid items for a better mobile view.

A Grid Team Hero Banner with Elementor – Conclusion

By following these detailed steps, you can create a visually appealing and functional Grid Team Hero Banner using Elementor.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Design A Grid Team Hero Banner with Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.