The Divi Summer Sale 2024! Get Up To 70% Off

Headers

Hide Your Header Before Scroll with Sticky Options

Hide Your Header Before Scroll with Sticky Options

A hero section is the eyecatcher of your website. It usually sets the tone for the rest of the website and shows visitors what they can expect. That’s why it can be helpful to make sure all focus is on the few elements you share in your hero section, such as the copy...

read more
Save Space in Your Header Using Toggle Icons

Save Space in Your Header Using Toggle Icons

The way you design your header sets the tone for the rest of your website. That’s why it’s important to think of the way you add elements and interactions. Of course, you’ll want to include the basics like a logo and menu items, but chances are high you’ll want to...

read more
Pick Up Divi Sticky Header

Pick Up Divi Sticky Header

Discover another trick you can apply with Divi’s built-in sticky options. More specifically, how to “pick up” your header once you scroll past it. The header will be automatically placed below each page’s first section. This tutorial will be all about interaction....

read more
Transparent Header Sticky on Scroll

Transparent Header Sticky on Scroll

When it comes to setting up a global header for your website, there are many ways to approach it. One of the more subtle approaches is a transparent header. Transparent headers are placed on top of your pages’ hero sections, which can lead to beautiful designs that...

read more
Create a Sticky Header with Divi’s Sticky Options

Create a Sticky Header with Divi’s Sticky Options

The way we use the Divi Theme Builder when setting up a website has sped up our workflow and made everything easier. Although we were able to create customized headers from day one ever since the Divi Theme Builder came out, one thing has been requested continuously,...

read more
Showcase Blog Post Categories in Your Divi Header

Showcase Blog Post Categories in Your Divi Header

When creating your global header, chances are high you’re going to include a blog menu item. If you don’t have many blog post categories on your website, going for one blog menu item might be enough. However, if you have a set of different categories and you want to...

read more
Colorful Spatter Animation Hero Section

Colorful Spatter Animation Hero Section

The way you design your page’s hero section sets the expectations for the rest of your page. If you’re designing a landing page that celebrates something, whether it is an anniversary or a sale, it can definitely help to bring the festive mood into your design. One...

read more
Fixed Audio Bar in Divi Header

Fixed Audio Bar in Divi Header

If you’re hosting a podcast website with Divi, chances are high you’re using the built-in Audio Module already. Now, if you’re looking for a special way to put your latest episode in the spotlight, you’re going to love this tutorial. Today, we’ll show you how to...

read more
Dynamic Site Title and Tagline

Dynamic Site Title and Tagline

Knowing how to add a dynamic site title and tagline to a Divi Global Header will come in handy when building Divi websites. And there are a few good reasons that one would do it. For one, not every site has a logo. A site title is a good logo replacement. Another...

read more
Notification Box for COVID-19 Updates

Notification Box for COVID-19 Updates

There is always a need for notification boxes on a website. They are helpful additions that supply important information to users where they can see it. Unfortunately, the growing COVID-19 epidemic has left many websites with the pressing need to keep their users...

read more
Minimal Header & Footer

Minimal Header & Footer

When designing a global footer and header, it’s important to take the overall design style of the website into account. If you’re building a minimal website, with a lot of white space, for instance, your best bet is going with a minimal header and footer as well.

read more
Responsive Slide-In Menu

Responsive Slide-In Menu

When setting up a website for a client of yourself, you’ll find yourself contemplating what type of header to build. The most used one around the web is the horizontal menu bar at the top, but there are other options as well, such as a slide-in menu. Slide-in menus...

read more
Zoom-Out Header Transition on Scroll

Zoom-Out Header Transition on Scroll

Creating a zoom-out header scroll effect can be an impressive design element to engage users with your content. The effect is similar to what you see on Apple’s macOS Catalina page. In this tutorial, we are going to show you how to create a zoom-out header transition...

read more
Swap Your Divi Header for Another on Scroll

Swap Your Divi Header for Another on Scroll

Your header inevitably remains one of your website’s most important elements. It influences your visitors’ navigation process and allows them to find what they’re looking for in a heartbeat. Now, if you’re looking for a way to swap your Divi header on scroll with...

read more
Fixed Header with Divi’s Position Options

Fixed Header with Divi’s Position Options

With Divi’s new position options, turning your header into a fixed one is easier than ever. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website. In this tutorial, we’ll...

read more
8 Delayed Button Animations for your Header CTA

8 Delayed Button Animations for your Header CTA

Adding delayed button animations to any CTA can be an effective way to draw attention to visitors and, in turn, increase the likelihood of getting a click. In this tutorial, we will show you how to use Divi to create 8 delayed button animation for a custom header CTA....

read more
Place Your Header Below Each Page’s First Section

Place Your Header Below Each Page’s First Section

Create and customize a header to match it with different needs you might have. In today’s tutorial, we’ll show you how to automatically place a custom header below each page’s first Divi section. This approach allows visitors to see the hero section of your pages...

read more
Add Two Side-by-Side Buttons to Your Divi Global Header

Add Two Side-by-Side Buttons to Your Divi Global Header

Having clear calls to action on your pages is a necessity for most websites. And what better way to draw attention to some of your most important CTAs than by placing them in your header? In today’s tutorial, we’ll show you how to add two side-by-side buttons to your...

read more
Inline Login Form for a Custom Global Header

Inline Login Form for a Custom Global Header

Creating an inline login form for your header can be a wonderful boost to user experience. They are perfect for membership sites and online stores because it makes it really easy for users to login at any time or on any page of the site. In this tutorial, we are going...

read more
Animate Your Global Header

Animate Your Global Header

Your header is one of the most important parts of your website. It connects your pages, posts and calls to action. It’s also one of the things your visitors automatically go looking for, so they don’t waste any time finding what they’re looking for. If you’re looking...

read more
The Divi Summer Sale 2024! Get Up To 70% Off

Pin It on Pinterest