Divi has a built-in full width header module to build your own header complete with titles, images, buttons, and icons. It’s a nice module that you can style and add your own custom CSS to create effects. What if you wanted to add effects and customizations without using CSS? You need a plugin like Custom FullWidth Header Extended.

Custom FullWidth Header Extended from Divi Web Design adds a module to the Divi Builder that creates a new full width header with 49 animation types and lots of effects including text effects, background effects, in and out animations, animation speed adjustments, header elements, and lots more. You can export and import the module settings just like any Divi module.

Since it shares features with the standard Divi full width header module, let’s first take a look at the standard module for comparison. We’ll then look at the extended module and go through some examples and see it in action. The original animation is smoother than my reduced GIF’s. The images used are from Unsplash.com.

The Standard Fullwidth Header Module

The features of the standard module gives you the tools to create a title, sub-heading text, change the colors, make it full-screen, adjust text orientation, add two buttons, use background colors, use parallax, add a logo, use a background image, adjust vertical alignment, and add text using the text editor. The Advanced Design Settings allow you to style the title, sub-heading, and content.

The FullWidth Header Extended module includes these features and adds lots of animations and customizations, as well as several new features. I’ve included both the standard features and the new features to give you an idea of what the plugin can do. Let’s take a look at each feature of FullWidth Header Extended.

The FullWidth Header Extended Module

The module is added to the module list for the full width section. Just click on it and use it like a normal module. It stands out (bright yellow) so it’s easy to find. You’ll notice another module here in bright yellow called Fullwidth Text Extender. It’s included for free and we’ll take a quick look at it at the end of this overview.

There are lots of effects and each one can use a range of animation types for in and out effects and animation effects for text, images, icons, etc. Here’s a look at each of the effects. Throughout this plugin highlight I’ll add a few of the animations. I’ve included them as gif’s so you can get an idea of what they look like.

Typing Effect

The typing effect places a cursor on the screen and actually types out the text that you want it to. You can also have it to delete the text and retype it in a loop.

I’m using both static and typing effect. This displays both text that stays on the screen and text that uses the typing effect. It uses the page title as the static text. You can adjust the colors, timing, animation type, etc. you can also turn off the typing loop if you don’t want it to continuously delete the text and retype it.

Rotator Effect

The rotator effect is another title effect that animates the text using any of the 49 animation types. You can also use static text along with the rotator text. Select the animation type from the dropdown box, adjust the animation speed using the slider, and adjust the rotator font’s color using the color picker.

In this example I’ve selected the Tada animation type.

Textillate Effects

The third title effect is called Textillate. It uses the same animations as the Rotator effect and adds several other ways to animate the text. Select the in and out animation types and effects from their own dropdown boxes. Animation types include sequence, reverse, sync, and shuffle.

This example uses Shuffle, Rotate In, and Reverse Out.

TextGif Background

The fourth title effect is TextGif Background. This effect makes the fonts transparent so the background will show through them. You can then add any background image you want to show through.

Fancy Line

Fancy Line places a short line around the title. Select it to appear before or after the title, and orient it to the left, center, or right. You can also adjust the top and bottom line spacing, change the color, adjust line-height, etc.

Whole Header Animation

This is a Header animation that lets you animate the entire header including the subheading and visual editor content. You have the same animation choices as the other effects with the exception of continuing the animation. Once the animation completes, the header stays in the condition after the animation. If you animate in, then the header’s content stays on screen. If you animate out, then the header’s content is off the screen. If you do use this one you can’t use animations for the title, sub-heading, content, or the buttons.

Full Screen Header

Use Make Full Screen to make your header take up the entire screen. As we’ll see later, the header can be a solid block of color, use the gradients, or use background images. To create a full screen header without the regular Divi menu use the Blank Page template. This works the same as the regular module with the exception of displaying the animations.

Scroll Down Button

The regular module includes a scroll down button, but this one adds several new features. Selecting the Show Scroll Down Button switch will reveal settings including icons and animations. If you don’t want to use one of the 11 icons available you can upload your own. You can set it to animate on scroll. All of the animation types are available to the icon.

In this example the icon is use the Tada animation type.

Search Form

Add a search form to your header. You can set the search form to include WooCommerce products, and to exclude pages and posts. Adjust the text color, orientation, show the search icon, hide the search text, hide the button, align the button, select the search button orientation, and include your own search box placeholder text.

Here’s a look at the form. I set the text to light and added the search icon but left everything else at their default settings.

Buttons

Just like the standard module you can show up to 2 buttons within the header, each with their own text, styling, and URL’s. What this plugin adds is a video popup feature, allowing you to link the buttons to videos, which can either open in the same tab or as a pop up lightbox within your website.

This example shows the video popup that appears when using the URL from the YouTube embedded link (the portion of the link within the quotes).

Background with Overlay

Like the standard module you can choose between an image or solid background and then add an overlay.

Here’s a full screen image with a black overlay set to 48% opacity. This one is using the typing effect.

Animated Gradient Background

The Animated Gradient Background gives you solid or transparent animation styles and a speed adjustment to control how fast it makes the transitions between gradients. You’ve probably seen this look on lots of Divi sites. I think it looks great and the ability to choose unlimited color combinations and animation speed can make yours stand apart from the rest.

This is a short example of an animated gradient. The entire animation goes from one side of the color spectrum to the other.

Background Gradient

This is a non-animated gradient. Choose your gradient type and two different colors to create an unlimited color-combination. Gradient types include left to right, top to bottom, radial, diagonal down (left to right), and diagonal up (left to right).

I’ve chosen a left to right gradient. You can see how it gradually makes a transition from my first color to my second color.

Particles Effect

Here’s the same background gradient as above, only this time it’s using the particles effect. The particles effect adds floating dots that are connected with lines. These particles will also use your mouse to connect a line to, which is actually fin to play with. The particles effect adds an extra flare that draws attention to your header.

Parallax Effect

The parallax effect, also included in the regular module, works the same as it does within sections and rows. The difference from using parallax in a regular row is you can upload an image to this module, so if you move the module the parallax effect stays with the module rather than the row. Once you’ve uploaded your image and selected between CSS or True Parallax you can use all of the header effects that you want over the parallax background image just like you would a regular background image.

Logo

Logo is exactly that: a logo placed within the header. It also uses the almost 50 animations, so you can bring your logo in or out of the screen any way you want, or forgo the animations (which makes it work just like the logo in the standard module), and just place it on the screen and let something else have the animated attention. You can show or hide it on scroll, give it an alternative text, and give it an HTML title.

Text Vertical Alignment

Align the text in the center of the header or at the bottom. Here it’s aligned at the bottom. You can see the center alignment in the image above this one. This works the same as the standard module.

Header Image

Like the standard module the header image is added under the buttons. The difference is this one can use all of the animation types. It can also be vertically aligned to the center or the bottom of the header. You can also display it without animation. Any size image will work, although it doesn’t display full width. I did get it display around 900 pixels wide.

Content Editor

This is a standard TinyMCE visual/text editor where you can add text, media, and shortcodes. You can do anything with this editor that you can with the regular WordPress editor. The content will appear under the heading. This works the same as the standard full width header module.

Here’s an example using embedded video within the text editor. It works the same as any embedded video, so I can set it to play automatically, have user’s click to play, etc. This is a great place for sign-up forms, CTA’s, opt-ins, messages, images, slideshows, etc.

Advanced Design Settings

All of the advanced settings you’d expect from a Divi module are here. You can adjust the styling of the fonts, headers, lines, buttons, icons, padding, margins, etc. It’s divided into individual sections so you can style them separately. Sections include titles, subheadings, content, fancy line, and search. You can adjust the animation effects for each section.

Here I’ve made a few adjustments to fonts, sizes, buttons, and colors using the advanced design settings.

FullWidth Text Extended Module

You may have noticed in the window where I chose the module there was another module called FullWidth Text Extender. This is a text module that’s included with the plugin for free. The two modules can be used together or independently.

It includes all of the features and functions of the standard text module including text color, orientation, content, disable on specific devices, admin label, advanced design settings, and custom CSS tab.

This opens up lots of design opportunities with the full width header section. Not only can you add text to the full width header, but you can also add shortcodes and media.

Here’s an example where I placed text above the header. The FullWidth Header Extended module has a text editor, but I wanted to place text above the header in a full width section. This is great for placing messages, opt-in forms, banners, etc., above the header’s content. I’ve used the Divi Blank Page template so it doesn’t show the built-in header or its navigation. I’ve added the navigation on this page by placing a full width menu module in the Divi Builder to create my own header complete with navigation.

Using FullWidth Header Extended with Extra

Both the FullWidth Header Extended and FullWidth Text Extended modules work with Extra. Extra doesn’t have the blank page template so the menu remains above the header. You can make this invisible if you want by selecting Hide Navigation Until Scroll in the theme customizer or simply use it as-is. To make the menu invisible go to Header & Navigation Settings, and Header & Format Settings to find the adjustment.

License

The plugin can be used on unlimited websites for you and your clients. It includes one year of updates and six months of support.

Final Thoughts

FullWidth Header Extended adds so many customizations over the already powerful full width header that it’s hard to imagine being without it. The included FullWith Text Extended module works well as a companion to create some interesting design possibilities.

I especially liked the animations, gradients, and particle effects. All of the features add details to your website without felling gimmicky. Like any kind of animation I don’t recommend over doing it. If you want to create a custom header filled with animation possibilities FullWidth Header Extended can take handle it for you.

Have you tried Custom FullWidth Header Extended?

Featured Image by VectorsMarket / shutterstock.com