Design A Grid Team Hero Banner with Elementor

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.

Prerequisites

Before starting, ensure you have:

• Elementor

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.