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
Divi Layout
Video Tutorial
Table of Contents
Difficulty
Easy
Time
15 Minutes
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!
0 Comments