How to Create a Beautiful Hero Section for Your Personal Website with Divi

Creating a personal website is both fun and challenging. You want your website to look engaging and personal enough to get your story told. And at the same time, you want to have a beautiful and authentic website that shows that you know what you’re doing.

To help you with the creative process of creating such personal website, we’ve created a beautiful hero section that’ll definitely make your website stand out. In this post, we’ll be showing you step by step how to create that result using nothing else than Divi’s built-in settings for each one of the steps. Before diving into the tutorial, let’s take a look at the result.

Result on Desktop

The result on desktop looks like this:

personal website

Result on Mobile

And the visitors who visit the website on mobile will get to see the following result:

personal website

How to Create a Beautiful Hero Section for Your Personal Website with Divi

Subscribe To Our Youtube Channel

Create Section

Start by creating a new page on your WordPress website, enabling the Divi Builder, switching over to the Visual Builder and adding a new section to it.

Gradient Background

The only thing you’ll have to change within this section is the background.  This background will apply to all of the rows we’ll be adding in the next steps of this post. Open the Background subcategory and add the following gradient background to it:

  • First Color: #c2c6f3
  • Second Color: #cea5b9
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 45%
  • End Position: 45%

personal website

Add First Row

Then, go ahead and add the first row to the section. This row will only include the Text Module you can see at the top of the layout.

Column Structure

Next, choose a column structure with one column.

personal website

Sizing

Move on to the Design tab of your row settings and use the following settings for the Sizing subcategory:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

personal website

Text Module

As mentioned before, this row will only need a Text Module.

Text Settings

Once you’ve entered the text you want to appear in the Content tab, go to the Design tab and make the following settings apply to the Text subcategory:

  • Text Font: Arizonia
  • Text Font Weight: Regular
  • Text Size: 150 (Desktop), 80 (Tablet), 70 (Phone)
  • Text Color: rgba(255,255,255,0.39)
  • Text Orientation: Center

personal website

Add Second Row

Once you’ve completed the first row, go ahead and add a second row to that same section.

Column Structure

Like the previous row, this row will only have one column as well.

personal website

Background Image

Open the row settings and add the personal image you want to use as a background image for the first column. Make sure the Image Position is set to ‘Center’ as well.

personal website

Sizing

Then, open the Sizing subcategory and make the following changes:

  • Use Custom Width: Yes
  • Custom Width: 557px

personal website

Spacing

Next, use ‘0px’ for the top, bottom, right and left padding of the row.

personal website

Box Shadow

Lastly, make the following Box Shadow apply:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 53px
  • Box Shadow Spread Strength: 10px
  • Shadow Color: rgba(0,0,0,0.3)
  • Shadow Position: Outer Shadow

personal website

Text Module

Once your row settings are completed, go ahead and add a Text Module to the column.

Background Color

First of all, this Text Module will need a background color with the ‘rgba(0,0,0,0.66)’ color.

personal website

Text Settings

Then, move on to the Design tab and make the following changes apply to the Text subcategory:

  • Text Font: Andika
  • Text Font Weight: Bold
  • Text Font Style: Uppercase
  • Text Size: 78px (Desktop), 70px (Tablet), 50px (Phone)
  • Text Color: #c2c6f3
  • Text Line Height: 1em
  • Text Orientation: Center

personal website personal website

Border

Next, open the Border subcategory and use the following border:

  • Use Border: Yes
  • Border Color: #c2c6f3
  • Border Width: 8px
  • Border Style: Solid

personal website

Spacing

Moving on, add the following margin and padding:

  • Top, Right, Bottom & Left Margin: 50px
  • Top Padding: 200px
  • Bottom Padding: 200px

personal website

Box Shadow

Lastly, use the following Box Shadow to the Text Module:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 0px
  • Box Shadow Blur Strength: 0px
  • Box Shadow Spread Strength: 50px
  • Shadow Color: rgba(206,165,185,0.41)
  • Box Shadow Position: Outer Shadow

personal website

Add Third Row

As mentioned before, we’re only using one section for this tutorial. The reason behind that is that we want the gradient background of the section to be spread over all of the different content that is being shared. Go ahead and add a new row.

Column Structure

Select two columns for this row.

personal website

Sizing

Then, enable the ‘Use Custom Width’ option and apply a width of ‘663px’.

personal website

Spacing

Lastly, add a top and bottom margin of ’50px’.

personal website

First Text Module

Add a first Text Module to the first column of the row.

Text Settings

Then, go to the Design tab, use ‘Andika’ as the Text Font and ‘Regular’ as the Text Font Weight.

personal website

Clone Text Module & Place it in Second Column

The Text Module in the second column has the exact same settings so go ahead, clone the Text Module and place it in the second column.

Add Fourth Row

There’s one more row left to add to the section before the design is completed.

Column Structure

This new row has two columns as well.

personal website

Sizing

Open the Row Settings and make the following settings apply to the Sizing subcategory:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

personal website

Spacing

Then, add a top padding of 20px.

personal website

First Image Module

Go ahead and add a first Image Module to the first column of this last row.

Box Shadow

And add the following Box Shadow to it:

  • Box Shadow Horizontal Position: -6px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 53px
  • Box Shadow Spread Strength: 10px
  • Shadow Color: rgba(0,0,0,0.3)
  • Box Shadow Position: Outer Shadow

personal website

Clone Image Module & Place in Second Column

And lastly, clone this Image Module and place it in the second column as well to complete this row.

Result

Once you go through all of the steps we’ve added to this post, you should be able to achieve the following result:

On Desktop

personal website

On Mobile

personal website

Final Thoughts

The possibilities you have with Divi are endless. You can make your website look exactly the way you want it to by using the Visual Builder that’ll show you the changes in real time. For this post in particular, we showed you how you could create a beautiful hero section for a personal website. This tutorial was made using nothing else than Divi’s built-in options. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

The post How to Create a Beautiful Hero Section for Your Personal Website with Divi appeared first on Elegant Themes Blog.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: