5 Creative Divi Header Module Styles You Can Achieve Using Built-In Settings

5 Beautiful Ways to Style Divi’s Shop Module
August 14, 2016
How to Properly Move from Medium to WordPress
August 15, 2016
Show all

Welcome to Day 76 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


It’s no secret that the design scope of the Divi Header Module has been an integral part of so many brands for some time. This article aims to show you how to use some of the module’s built-in settings to create simple yet impactful designs.

The Default Header Module

Before we get started, let’s take a look at what the Divi Header Module looks like by default:

Default Header

This is the starting point we’re using in each example below. To get the same results that we’ve achieved, simply follow the instructions under each example.

Getting Started

The following steps form the basis of all of the header examples in this tutorial:

  • Create a Fullwidth Section
  • Click on Insert Module(s) and select Fullwidth Header
  • Go into the General Settings tab and select Yes to Make Fullscreen

Make Fullscreen

1. Daze Cafe

Daze Cafe

This first design shows that you don’t need to use a lot of elements in the Divi Header Module to create an impactful look. This design uses only three elements and applies few changes to the default settings.

First in the General Settings tab we entered the Title and Subheading Text. Since our background image is dark, we selected Light for the Text Color. The foreground area of the background image is on the right, so we have selected Left for Text & Logo Orientation.

General Settings Screen

We added the background image by uploading the chosen image in the General Settings tab.

Upload Background Image

The background image already has a strong foreground image so we decided not to use an additional header image or logo.

Next, we went into the Advanced Design Settings tab and altered the Title Font to Cantata One Font and the size to 80px. The Default Subheading Text Font looks good on this header so it was left unchanged, but the size was altered to 24px so that it runs roughly as long as the title.

2. Degree Lounge

Degree Lounge

In this header we introduce buttons to invite the reader to interact with the site. Once the background image, header, and subheading were adjusted, we added the buttons. To achieve this, go to the General Settings tab and enter the appropriate text in the Button Text section(s).

Enter Button Text

To adjust the button color you then go into the Advanced Design Settings tab and select the Use Custom Styles for Button One option. Upon selecting this button it expands to a whole host of options including Button Font Color and Button Border Color.

Button Options

There is just one more thing to change on this header. The original image had too many light spots that clashed with the light text. In the General Settings tab we used the Background Overlay Color setting to select a translucent sepia tone overlay to mute the background image.

Overlay Color

3. Pretty Natural Cosmetics

Pretty Natural Cosmetics

This header demonstrates another simple yet impactful way to take advantage of Divi’s built-in settings. First we uploaded the header image and centered the title. We wanted to use a call-to-action button in this header to direct readers straight to the store. As before, in the General Settings tab we used the Button #1 Text option to enter text for the button.

We also wanted the button to be a little more interactive, so we adjusted it so that it would change color when someone hovers over it. To do this we went into the Advanced Design Settings tab and used the Button One Hover Text Color and Button One Hover Border Color sections to change the button to bright pink whenever anyone hovers over it.

Pink Button

One final thing we wanted to do with this header was take advantage of the parallax effect feature. Back in the General Settings tab we turned this feature on. This fixes the position of the background image as you scroll.

Parallax Effect

4. Social Genius

Social Genius

This is another header that requires very few components. However, using the built-in Divi settings, we can make quite the impact.

In the General Settings tab we imported our background image and entered the title and subheading. We also added a blurb of content that serves to briefly explain the business and direct the reader to the call-to-action button. The content entry section can be found at the bottom of the General Settings tab.

Content Entry

Since the background image has more going on to the left, we have moved the text to the right by using the Text and Logo Orientation section.

Next we must add text for the button, but this time we also want to add an icon. We add a network icon to complement the “I WANT TO CONNECT” text. The button will display text only until someone hovers over it; it will then expand to also show the icon as shown in the image below:

New Picture

5. Great Outdoors

Great Outdoors

This company calls for a logo and some epic imagery. We uploaded the background image and logo in the General Settings tab. The logo was saved as a transparent PNG image so that the background imagery shows through.

Upload Logo

The tagline is in the logo, so we have not added a subheading for this header. This time we have added a header image of some of the company’s products. The header image can be added in the General Settings tab and you can choose where it appears.

Upload Header Image

We wanted the header image to contrast with the background more, so we added an overlay to the background image. We gave the image a translucent white overlay to mute it compared to the header image.

Wrapping Up

These are just a few of the potential outcomes when using the Divi Header Module. The possibilities are practically endless. The Full Screen option is both striking and attention grabbing, the text and image options make it simple to quickly create stunning and impactful designs, and the various choices for button manipulation make it easier than ever to craft a custom experience and connect with customers.

As you experiment with all of the settings in the Divi Header module, you’ll soon realize why this feature has become an integral part of so many brands. Which features from this tutorial are you excited to play with?

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;}

divi-2-6-logo

Divi 100 Day 76

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Creative Divi Header Module Styles You Can Achieve Using Built-In Settings appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar