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

Posted on August 14, 2016 by in Divi Resources | 50 comments

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

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-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.

Learn More About Divi 3.0


50 Comments

  1. I had no idea about these built in settings. thanks a lot for sharing them. i am gonna try on my blog now

  2. Hi Tom – These are great, clean examples!

    One thing I noticed recently we need are universal leading controls over headline/subhead text – the copy often crashes or is too tight, such as the blurb in your Social Genius example.

    In most modules, it seems there is the option, but not always. It’s key, especially in mobile. Thanks for listening!

  3. Great tutorial on this one.

    • Tom Ewer

      Thanks Camille!

  4. The png logo offers an interesting question. Can we actually use an .svg for scalable logos or icons or type? Have you guys implemented this option for us?

  5. Nice but how do you integrate the navigation and logo into a full width header module so that the background image is under the navigation area (make the navigation area transparent so the image shows all the way to the top)? There isn’t an easy way to do it.

    • Hi Matt I had this issue. There is way though. Simply make your primary menu bar transparent using your theme customiser. Cheers. Rich

    • Under Theme Customizer you can make the primary and secondary Nav transparent, once you save this the background image of the header will show all the way to the top.

    • Hi, Matt. It’s not that difficult, but ET never released a tutorial on it for some reason so I always thought you had to do it by CSS. I learned recently you can do it through the customizer.

      Go to the theme customizer then Header & Navigation > Primary Menu Bar

      Scroll down and select the background color. You’ll see two small sliders next to the color picker, one has color and the other has a checkered background. The one with the checkered background controls the transparency. Move the button on that slider to the bottom and it should make your navigation’s background completely transparent over your full width header.

      If your navigation is fixed (still shows up as you scroll through the page) you can set the background color for the navigation as you scroll in Header & Navigation > Fixed Navigation Settings. One problem however is if your fixed navigation background is white it will still show up transparent on scroll for some reason.

      I hope this is the answer you were looking for. If not, my apologizes for misunderstanding your question!

    • Glad I came across your comment. This the same problem I am having with another company seems very common.

    • Matt, try playing with the transperancy of the menu. If even though the image is not under the menu, use some negative margin on the section below the menu. Ps.: In order to control a section to be under or overlaping some row or other section, play with the z-index using relative position with css in the advanced configuration of the secton/row > custom css > main element. For overlaping, use a higher number on the z-index, and for placing the section/row underneath, use a lower z-index. Example of a high number:

      position: relative !important;
      z-index: 9999;

      Hope that helps.

    • You’re right, it’s not easy. I managed to achieve this with a lot of fiddling about. I think I used a negative top-margin for the background-image layer in the end. Can’t remember exactly what was required. It’d be good if this was configurable directly in Divi.

    • you can make the primary menu bar transparent

    • You do that by tweaking the main navigation element in theme customization. Give the background of the main navigation a transparency an then you’ll see the header (or slider) you place at the start of your site behind it.

  6. Nice tutorial. By the way what is the default image size / aspect ratio for background image to divi header module?

    • Hi ET,

      Like Rich (and another poster down below), I’d like to know which size / ratio is recommended. Could you share please?

      Cheers!
      Gilles

  7. Please could you post the URL for these sites as I’d like to look at them on the web. For example, does this header section replace the menu or not.

    • Tom Ewer

      Hello Cali,

      I’m afraid that we custom built these headers for the article, so there’s no URL to go to. Sorry!

      Cheers,

      Tom

  8. Love these posts!

  9. Randy A. Brown

    Thanks Tom. It’s great to see examples of what can be done with the header module. It’s more powerful than it seems.

    • Tom Ewer

      You’re welcome Randy 🙂

  10. Is the graphic used on the header for “Social Genius” available for use / purchase? Where can it be sourced? Loved it.

  11. Thanks for these cool examples. But I agree with Matt that we need to be able to integrate a menu bar into the fullwidth header (with transparency) to place at the very top. Also, what do these examples look like on mobile devices? I have a feeling the focal points of the backgrounds will shift. Divi needs to have options to have different background images for different devices, similar to being able to have different font settings for desktop, tablet and phone which are available in the Advanced Settings.

  12. I really hope Divi 3.0 gives us more usability with the headers. It’s usually easy to tell if a header is a Divi header, and there aren’t enough options to customise. I really hope there are more customisable options. For something fairly simple to do I feel it is the only thing that’s majorly lacking from Divi

  13. Portion of my image always gets the top chopped off what’s the best size image to use?

  14. PLEASE ET, I beg of you… as a long time supporter since 2011. Please give us a Header CTA Module where we can have the text and CTA button aligned to top instead of only the bottom or centered.

  15. Is there a way to add more buttons to use the header as a navigation bar/main menu?

  16. On example 2, how did you get the headline text to appear as two rows? Doesn’t it default in to one line unless the screen size shrinks? I’d like a tiny bit of control with the heading and subheading positions.

    Apart from that, another great, yet simple tutorial. I love using these on my sites I design.

    • Simon, When I want to force a line break, I don’t use the headline field. I put an H1 tag in the text field and have more control that way, using . HTH

      • Yeah, I figured that’s what could be done, but then wouldn’t I get some errors from Yoast SEO for not using a headline text for that page? Thanks Kollen 😉

        • No, because you’re putting in the tag yourself, so it will show up and Yoast will be happy.

          • Aha! Well that’s that then… thanks very much.

  17. A very good post, many useful tips. I have to follow the examples of header modules, results will be outstanding.

  18. This is much appreciated, but it also illustrates a very big challenge – these headers look great because of great photography. You show a client a concept with images like these, and they give you crappy photos taken on their cell phone expecting their site to look just as awesome… BUT a good solution with nicely designed headers like these is to lay a color over the photo so you can’t tell it’s bad. It also helps the logo/copy stand out more.

    A simple solution for the menu-over-the-image issue that’s come up here is to hide nav until you scroll down.

    • Tom Ewer

      You make a fair point Randall. Such are the joys of working with clients 😉

    • I totally agree! It’s so frustrating to try design a client a great looking website, as the quality of the images make all the difference. Then they email you a load of wonky, out of focus pictures taken on their mobile phone to use. Arrgghhh!

  19. Great resources !
    &
    Daze Cafe… what an image… ?

  20. Awesome post, help in redesign my site.

  21. My WP installation is in italian language and I’m unable to find the “Fullwidth Header” module, only the “Post Title” module.

    Please help me.
    Thanks in advance
    Alexander

    • Hi,
      Under “add row” you will find:
      Standard Section | Fullwidth Section | Specialty Section | Add From Library

      click on the second (fullwidth Section). that will lead you to the full width modules.
      “Fullwidth Header” is the top middle one.

      Hope that helps!

      • Thanks Monicka, I’m actually out of town without my notebook, I’ll check it out on Sunday as soon as I come back to my notebook.

        Thanks a lot Alexander

      • I got it Monicka: thanks a LOT !
        🙂

        ciao
        Alexander

        • ?? happy to help!

  22. Hi. great post. This is a great theme for designers as it takes out most of the dev factor. My question is do you know by chance if in the next version of divi will parallax work on video backgrounds? It really looks so clean when that can occur and if not is there some css possibly that could be done to help that? Thanks again and really looking forward to 3.0.

    • Tom Ewer

      Hello Larry,

      I’m afraid I don’t have a solid answer for you. Your best bet is to head over to our forums – https://www.elegantthemes.com/forum/. You’ll be able to see if other users have found a CSS solution, and you can also make a suggestion for future versions of Divi.

      Hope this helps. 🙂

  23. Hi! Love this!
    I was working on a similar layout, and I wanted one of the buttons to be a trigger for pop-up. Any suggestions how to do this?
    Thank you!

  24. Is there a way to have my text appear on the top side of a header, instead of center or bottom?

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest