October 18, 2023

Design an Elementor Web Designer Hero Banner for Your Portfolio

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 web designer hero banner for your portfolio is an essential task for any professional in the field. In this tutorial, we’ll guide you through the process of designing a visually appealing and functional hero banner using Elementor.


Please make sure you have the following installed and activated:

Setting Up the Container

  1. Navigate to Elementor > Edit Page and add a new container.
  2. Select the container and set its layout to “Boxed.”
  3. Adjust the width to 1140 pixels.
  4. Zero out the margin and padding.
  5. Set the height to 75 VH (Viewport Height).

Adding Background and Overlay

  1. Navigate to Style > Background and choose a background color that complements your design.
  2. Go to Background Overlay and add an image that will sit on the right-hand side of the banner.
  3. Set the image to “Center Right,” “No Repeat,” and “Contain” for size.
  4. Adjust the opacity of the background overlay to 0.4.

Inserting Headers and Image

  1. Drag two headers (H1 and H2) and an image into the section.
  2. Change the text of the headers to “Web” and “Designer.”
  3. Replace the image with a high-resolution picture of a person (yourself, if it’s a personal portfolio).

Styling the Text

  1. Navigate to Style > Typography for each header.
  2. Set the text color to white.
  3. Choose a bold font weight (e.g., 800).
  4. Apply text-transform to “Uppercase.”

Making Text Responsive with Clamp

  1. Use a clamp calculator to determine the responsive font size.
  2. Insert the clamp formula into the typography settings for each header.

Positioning Elements

  1. Go to Advanced > Positioning for each header.
  2. Set the position to “Absolute” and align it at the bottom.
  3. Adjust the Z-index of the image to place the text behind it.
  4. Set the horizontal orientation offset to VW and zero to center the text.

Adding a Transparent Layer

  1. Duplicate one of the headers.
  2. Navigate to Style > Opacity and set it to around 0.5.
  3. Adjust the Z-index to place this transparent text above the image but below the main text.

Additional Styling and Responsiveness

  1. Navigate to the parent container and align the items in the center.
  2. Set the Justification to “End.”
  3. Adjust the Z-index of the image to 2 and the transparent text to 3.
  4. Use the clamp calculator again to adjust the bottom margin for responsiveness.

Web Designer Hero Banner – Conclusion

You’ve now successfully created a stylish and functional web designer hero banner using Elementor Pro. This banner not only showcases your skills but also makes a strong visual impact, encouraging visitors to explore your portfolio further.

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 an Elementor Web Designer Hero Banner for Your Portfolio
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.