How to Create a Sleek Header Design with Parallelograms in Divi

Last Updated on September 16, 2022 by 11 Comments

How to Create a Sleek Header Design with Parallelograms in Divi
Blog / Divi Resources / How to Create a Sleek Header Design with Parallelograms in Divi

Adding a sleek new header design to your page is an effective way to wow your visitors. And designing a unique background for your header is a great place to start. In this tutorial, Iโ€™m going to show you how to use Divi to add parallelograms to your header design using gradient backgrounds in creative ways. This adds a nice textural element to the design that breaks away from the traditional box layout.

Letโ€™s get started.

Sneak Peek

Here is a look at the design we will build.

divi header design

What You Will Need

To create this design, you will need to main things:

  1. The Divi Theme
  2. The Interior Design Company About Page Layout (available from within the Divi Builder)

Set Up the Page

For this tutorial, Iโ€™m going to use the Interior Design Company About Page Layout on a new page. Go to your WordPress Dashboard and navigate to Pages > Add New. Then give your page a title and click to use the Divi Builder. Then click the button to deploy the visual builder. Select the option to โ€œChoose a Premade Layoutโ€. Then find and select the Interior Design Layout Pack. Choose the About page layout and then finally click โ€œUse This Layoutโ€.

divi header design

Once the page has been loaded to the page, you are ready to start editing.

Take out Top Padding of Section and Replace Background Image

This is an easy first step. All you need to do is hover over the top portion of the top header section of the page. You will see that the current top padding is set to 10%. Simply drag the padding down to 0%. Or you can always go into the page settings and set the custom top padding to 0% as well.

divi header design

You can also change the background image at this point, but it isnโ€™t necessary. To do that, go to the section settings and change out the background imag eunder the content tab. Then take out the background gradient. This will help make the text (which will be white) more readable on mobile since there will be some text overlapping the background image.

divi header design

Adjust Row Size and Padding

Next, go to the row settings and under the Design tab, update the following:

Use Custom Width: YES
Custom Width: 100%
Custom Padding: 0px Top, 10vw Bottom

divi header design

Add Gradient Background to Row and Column

To create this sleek design, we are going to be overlapping gradient backgrounds with different starting and stopping positions. First we need to add a gradient background to the row and then to the column.

Go to the row settings under the content tab and update the following:

Background Gradient Left Color: #1a1a1a
Background Gradient Right Color: rgba(255,255,255,0)
Gradient Direction: 45deg
Start Position: 60%
End Position: 0%

divi header design

Column 1 Background Gradient Left Color: rgba(244,88,63,0.83)
Column 1 Background Gradient Right Color: rgba(255,255,255,0)
Column Gradient Direction: 45deg
Column Start Position: 66%
Column End Position: 0%

divi header design

The orange gradient that we added to the column will be used for the first parallelogram in our header design. To create the parallelogram we need to shorten the orange gradient with an left side that is angled at 45deg to match the right side. We will do this by adding a gradient to the call to action module.

Adjusting the Text Size and Spacing of the Call to Action Module

Before we add our background gradient to the call to action module, letโ€™s get the spacing and text styles dialed in first.

Go to the call to action module settings and update the following under the Design Tab:

Text Orientation: Left
Text Color: Light
Title Text Size: 4.5vw (desktop), 42px (tablet)
Button Text Color: #1a1a1a
Button Background color: #ffffff
Width: 100%
Reset Margins
Custom Padding (desktop): 10vw top, 5% left, 45% right
Custom Padding (tablet): 38% right
Custom Padding (smartphone): 5% right

divi header design

Now we can add our background gradient to our module. To speed up this process, go over to the row settings and right click and copy the background gradient of the row.

divi header design

Then go to the call to action module settings, under the content tab, and right click and paste the background gradient to the module. Then adjust the start position to 47%.

divi header design

As you can see, this creates the effect of a long angled rectangle overlapping the dark gradient background for a unique design element.

divi header design

This would be a great design as it stands now, but letโ€™s go ahead and get even more creative by adding an additional parallelogram overlapping the bottom of our row.

Creating an Additional Parallelogram Using Empty Text Modules

The concept for this final phase of the header design involves creating two text modules side by side each with a custom gradient that, when combined, show a single โ€œboxโ€ with equally angled sides on the right and left. To do this we must first create a one-column row to hold our text modules. Then we can size and position our modules to stand side by side.

Add a one-column row directly under the section containing our call to action module inside the same section.

Then add a text module to the left column and update the text module as follows:

Erase all content in the content box (we are going to be using an empty text module)
Background Gradient Left Color: rgba(255,255,255,0)
Background Gradient Right Color: rgba(58,80,107,0.83)
Gradient Direction: 45deg
Start Position: 50%
End Position: 0%

divi header design

Now jump over the design tab and update the following:

Text Line Height: 0em (this will take out any unwanted spacing)
Width: 50%
Custom Margin: -8vw Top, 0px Bottom
Custom Padding: 8vw Top, 8vw Bottom

divi header design

Save settings.

From the visual builder, duplicate the module and update the text module settings for the new module as follows:

Hover over the background gradient preview and click the โ€œSwitch Gradientโ€ icon to switch the gradient colors from left to right.

divi header design

Module Alignment: Right
Custom Margin: -16vw Top, 0px Bottom

divi header design

Save settings.

Now that we have our modules aligned, we can adjust the row settings to position our modules and resize them to fit the design. Open the row settings and update the following:

Row Alignment: Left
Use Custom Width: YES
Custom Width: 45%
Custom Margin: 30% left
Custom Padding: 0px Top, 0px Bottom

divi header design

That about does it! Check out the final results.

divi header design

Here it is on tablet and smartphone.

divi header design

divi header design

Final Thoughts

I hope this design technique give you a little inspiration for how you can use Diviโ€™s gradient background options to incorporate some sleek parallelograms into your own header design. And, of course, this design isnโ€™t limited to headers. Feel free to explore new areas where this design will work for you. For more inspiration, check out some broken grid design secrets that may help you along the way.

I look forward to hearing from you in the comments.

Cheers!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack thatโ€™ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack thatโ€™ll help you get your next Modeling...

View Full Post

11 Comments

  1. Hey Jason,

    Wondering if you could expound on the thinking behind a simple thing that you did in one of the first steps in “Adjust Row Size and Padding”. You said to set “Custom Padding: 0px Top, 10vw Bottom”.

    I am wondering if you are intentionally setting the bottom padding, which is related to the vertical plane (viewport height) to units that reference the viewport width? There is either some clever relationship of this padding to the width, or you really meant to say “10vh”.

    Thanks, this is a fun tweak to a header.

  2. Very good lessons thanks, you are a master !!

  3. Very cool!!!

  4. Hi,
    very cool ๐Ÿ™‚
    Since a few days i am searching for some cool header design ideas for my new project.
    Your idea is very nice, i will try it with some other colors.

    best wishes
    Sven

  5. Neat idea.

    • Thanks!

  6. Hello,
    Really a good tutorial !
    Thank you

    • You are very welcome. Glad you liked it, bruno.

  7. Now you’re just showing off… ๐Ÿ˜€

  8. Nice!!!!

    • Thanks Pedro!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today