Hand-Coded Design to Divi Layout: Part 1 – The Hero Section

Time to Stress Test Divi.

So while browsing /r/WebDev on Reddit a post caught my eye and it got me thinking. It was this awesome hero section for a burger joint with a fullscreen hamburger menu on desktop where the background of that menu was filled with big bold text that reflected the menu item currently being hovered. Cool, right? But can one build a Divi Hero Section with a Fullscreen Hamburger Menu?

Hmmmmmm…

Surely taking a hand-coded design and converting it into a Divi layout would take some crazy dev skills? Turns out a hard NOPE would be the answer. 

More in this series.

The first step in Converting a Hand-Coded Design into a Divi Layout is going to be to break it down into sections. This is very much the reason why we’ve broken this tutorial down into THREE parts. When you look at this layout it consists of a Hero Section containing an actual Hamburger and some text with a button, then the Hamburger Navigation Menu on desktop, and lastly some jQuery code to create that awesome hover effect.

Building out the Hero Section in Divi will be pretty straightforward, so we will tackle that here in Part 1. Next, in Part 2, we will head on to building out the Hamburger Menu (teehee) on desktop where we will need to use some clever CSS to force the mobile menu style. Lastly, in Part 3 we will cover using jQuery to add the large text in the background of our fullscreen menu when menu items are hovered.

Why do it in three parts? Well, there are valuable skills you’ll learn in each part that could be used on any website, so for those of you looking to utilize just one of the three skills, you won’t have to sit through the whole thing. And don’t worry, we’ll release one full-length video that includes each part for those of you looking to power through!

NOTE: /u/Darius2652 was kind enough to make his code available for anybody to use, so if you are looking for the non-Divi route, check out his Github.

Preview:

Hand Coded
Hand Coded Hero Section with Fullscreen Menu
Divi Layout
Divi Hero Section with Fullscreen Menu

Video Tutorial

Table of Contents

Difficulty

Easy

Time

15 Minutes

Hand-Coded Design to Divi Layout

Setting up the Divi Hero Section

To get rolling we need to set up the Section and Row that will make up the canvas for our Divi Hero Section, so let’s get right to it.

Make sure you are logged in to an administrator account for the backend of your Divi install and create a New Page.

Hero Section

Add a Regular Section > Close the popup to add a Row for now

Section Settings

CONTENT TAB

BACKGROUND
Add a Gradient Background
Color 1: #171717
Color 2: #f1c40f
Gradient Type: Linear
Direction (Desktop): 90deg
Direction (Mobile): 0deg
Gradient Start/End: 50%

Add a Background Image
Image: Download and use noise.png
Background Image Blend: Color Burn

DESIGN TAB

SPACING
Padding Top/Bottom: 75px

Content Row

Add a 25-50-25 Row > Close the popup to add a Module for now

Row Settings

DESIGN TAB

SIZING
Custom Gutter Width: 1
Equalize Column Lengths: YES
Max-Width: 2560px;

Column 1 & 3 Settings

We want to center the elements in these columns vertically, so we will add one line of CSS to Column 1 and 3.

ADVANCED TAB

CUSTOM CSS
Main Element: align-self: center;

Adding the Divi Hero Section Content

With our canvas set, we are ready to start adding the content to this Divi Hero Section.

Column 1

Add a Text Module

Text Module Settings

CONTENT TAB

TEXT
Body: <h2>Eat like<br>a king</h2>

DESIGN TAB

HEADING TEXT > H2
Heading 2 Font: Yantramanav
Heading 2 Font Weight: Heavy
Heading 2 Font Style: Uppercase
Heading 2 Text Alignment (Desktop): Right
Heading 2 Text Alignment (Mobile): Center
Heading 2 Text Color (Desktop): #ffffff
Heading 2 Text Color (Mobile): #171717
Heading 2 Text Size: 66px
Heading 2 Line Height: 0.8em

SPACING
Margin Top: -15px

ANIMATION
Animation Style: Slide
Animation Direction: Right
Animation Duration: 750ms
Animation Delay: 250ms

Add a Button Module

Button Module Settings

CONTENT TAB

TEXT
Button: See our menu

LINK
Button Link URL: Put your menu page URL

DESIGN TAB

ALIGNMENT
Button Alignment (Desktop): Right
Button Alignment (Mobile): Center

BUTTON
Use Custom Styles For Button: YES
Button Text Size (Desktop): 16px
Button Text Size (Mobile): 21px
Button Text Color: #ffffff
Button Background Color: #e67e22
Button Border Width: 0px
Button Border Radius: 25px
Button Font Style: Uppercase

ANIMATION
Animation Style: Slide
Animation Direction: Down
Animation Duration: 500ms
Animation Delay: 1000ms
Animation Intensity: 15%

Column 2

Add an Image Module

Image Module Settings

CONTENT TAB

IMAGE
Image: Download and use hero.png

DESIGN TAB

ALIGNMENT
Image Alignment
: Center

SIZING
Max Width: 90%

TRANSFORM
Transform Scale (hover): 115%
Transform Rotate (hover): 10deg

 

Column 3

Add a Text Module

Text Module Settings

CONTENT TAB

TEXT
Body: <h2>Enjoy<br>Every<br>Bite</h2>

DESIGN TAB

HEADING TEXT > H2
Heading 2 Font: Yantramanav
Heading 2 Font Weight: Heavy
Heading 2 Font Style: Uppercase
Heading 2 Text Alignment (Desktop): Left
Heading 2 Text Alignment (Mobile): Center
Heading 2 Text Color (Desktop): #171717
Heading 2 Text Color (Mobile): #ffffff
Heading 2 Text Size: 66px
Heading 2 Line Height: 0.8em

ANIMATION
Animation Style: Slide
Animation Direction: Left
Animation Duration: 750ms
Animation Delay: 250ms

Mayo? Not even once…

Conclusion

There we have it, Part 1 complete! As a reminder, in Part 2 we will create our Divi Fullscreen Hamburger Menu, and in Part 3 we will add some jQuery magic to make that awesome hover effect with the background text. I realize it might be annoying to some of you that we split this Divi Hero Section with Fullscreen Hamburger Menu tutorial up into 3 pieces, but just hang in there, I’ll be publishing each part as soon as it is done.

Definitely drop your comments below and let us know what you think so far!

Check these out
Divi Mobile Cheat Code: Add the Hovered Divi Menu Link as Background Text
Hand-Coded Design to Divi Layout: Part 3 – Adding the Background Text Hover Effect
Hand-Coded Design to Divi Layout: Part 2 – Enabling a Hamburger Menu on Desktop
Hand-Coded Design to Divi Layout: Part 1 – The Hero Section

0 Comments

Submit a Comment

Explore more from Divi Engine