Fullwidth Header Extended

One of the best parts of the Fullwidth Header Extended Module is that every single feature is customizable. From your title to background image to buttons to scroll down icons, literally everything can be customized to fit your specific wants and needs. Not only that, but all features are mobile friendly. Let’s walk through each feature and how they work.

Title Effects

.
Typing Effect

Here you can display a typing effect to your Title, which gives the appearance that the words are being typed as you browse, which is great for adding movement to your page and creating attention to your title.

  • This Typing Effect can incorporate several different line titles that are looped individually if separated with a “|” separator.
    EXAMPLE: Creative Agency | Design | WordPress | Divi
  • Disable Typing Loop: You can choose whether you would like your typing effect to loop constantly or only on the initial load.
Rotator Effect

With the rotator effect, the words are displayed in a rotating animation opposed to typing. You can also choose to separate titles for individual display.

  • Static + Rotator Effect: Here you can choose if you’d like a static title to constantly display while the secondary aspects of the title are individually rotated through, again using “|” as the separator.
    EXAMPLE:
    Static Title = Creative Agency
    Input for Rotator Effect = Design | WordPress | Divi
  • Rotator Effect on a New Line: You can choose if you’d like the rotated input to display on a separate line than the Static Title, choosing this feature will drop the Rotated Line down one and your rotated words will appear just below the Static Title.
Shuffle Text

This option will shuffle your title before displaying it in normal view.

Overwrite Random Shuffle Text: By default,
the shuffle effect displays randomized letters while shuffling
However, you can choose to display set letters instead.

EXAMPLE: creativedesignagency– this would shuffle before displaying the main title Creative Design Agency.

Textillate Effect

This is a cool animation feature where the Title’s animation appearance can be controlled on both “in” and “out” text and animation types, giving it an entry and exit feel, as well as adding a lot more motion to your page.

 

  1. In Animation Type: Choose between four different types: Sequence, Reverse, Sync, Shuffle
  2. In Animation Effect: Choose between 47 different effects, from fadeIn to zoomInDown to hinge
  3. Out Animation Type: Choose between four different types: Sequence, Reverse, Sync, Shuffle
  4. Out Animation Effect: Choose between 47 different effects, from fadeIn to zoomInDown to hinge
TextGIF Background

This is by far one of the coolest features for creating animation in your header’s title. Using the TextGIF background allows you to set an animated GIF behind the display of your title’s words. So, instead of your title displaying in a color text, it will display on top of the animated GIF of your choosing.

  • TextGIF Background Image URL: Upload the GIF you would like displayed as the background of your title. If you’re not sure where to access GIFs for use, GIPHY has a great collection of premade GIFs that you can download, or you can even make your own using YouTube links.
  • Cool Tips: Enlarge your Title Font size (start with 50px) and choose a GIF bright in color and fluid in animation.
Fancy Line on Title

This option is great for adding aesthetic hierarchy to the Main Title and Subheading, separating the two with a line. You also don’t have to have a Subheading for this feature, you can add a line to the Main Title just because you feel like it.
i. Fancy Line Before or After Title: Choose whether you’d like the line to display on top of or below the Main Title.
ii. Fancy Line Orientation: Choose where you would like the line displayed in relation to the title: Left, Center, Right.

Title Styling

.
TITLE GRADIENT
  1. Yes, now you can set your Title font color with a cool gradient effect, blending your own two choices of colors.
  2. First Gradient Color: Set the color you’d like the left set of letters to appear as.
  3. Second Gradient Color: Set the color you’d like the right set of letters to appear as-
  • TITLE FONT COLOR: If title gradients aren’t your thing, or if you’re already using one of the gradient background and making the title gradient as well might be too much, we get it. Use this option to specify a solid color for your title.
  • TITLE FONT: By default, the title font will display with whichever font you selected within the theme customizer as your heading font. However, you do have the option here to use a different font, if you’d like.
  • TITLE FONT SIZE: Here you can control the size of your header font title. Choose between 1px (smallest) to 100px (largest).
  • Cool Tip: Be sure to click on the little phone icon that pops up when changing any font size, you want to ensure the font looks good across all devices.
  • TITLE LETTER SPACING: Control how much room exists between each letter of the title. Choose between 0px (default) to 100px (most room).
  • TITLE LINE HEIGHT: Give a little bit more or less room for the title line itself, this will change the distance of the other content features in relation to the title line. Choose between 1em (smallest amount of room) to 3em (most room).

Subheading

.
Subheading Before or After Title

Like the Fancy Line, you can choose where you would like the Subheading displayed in relation to the Main Title, above or below.
i. Cool Tips: If you have the Fancy Line set to display above the Title, try doing the same with the Subheading– this is also the same as if you have it set to Below. While it’s not required that both are set to above or below, it will look best if consistent.

Subheading Styling

.
SUBHEADING GRADIENT

This option is the same as the Title Gradient. You can give your Subheading text a cool gradient effect.

    1. First Gradient Color: Set the color you’d like the left set of letters to appear as.
    2. Second Gradient Color: Set the color you’d like the right set of letters to appear as.
SUBHEAD FONT COLOR

If you prefer a solid color for your subheading text, you can set that specific color here.

SUBHEAD FONT

By default, the subhead font will display with whichever font you selected within the theme customizer as your body font. However, you do have the option here to use a different font, if you’d like.

SUBHEAD FONT SIZE

Control how large or small you’d like your subhead font to appear.

Choose between 1px (smallest) to 100px (largest).

Cool Tip: Be sure to click on the little phone icon that pops up when changing any font size, you want to ensure the font looks good across all devices.

SUBHEAD LETTER SPACING

Control how much room exists between each letter of the subheading.

Choose between 0px (default) to 100px (most room).

SUBHEAD LINE HEIGHT

Give a little bit more or less room for the subheading line itself, this will change the distance of the other content features in relation to the subheading line. Choose between 1em (smallest amount of room) to 3em (most room).

Text Color

.
TEXT COLOR

Here you can choose if you’d like the default text color displayed as light or dark. These features are more customizable in the Advanced Design Settings, which we’ll get to a little bit later.

Background Effects

.
KEN BURNS EFFECT

You might be familiar with the Ken Burns effect if you’re a video editor, as it’s used widely for panning and zooming. Now, you can use the same effect for your background images! Choose from 6 different effects: Zoom In, Zoom In Left, Zoom In Right, Zoom Out, Zoom Out Left, and Zoom

Out Right. For Mobile view, if Zoom In / Out Left or Right are selected, it will default to Zoom In or Out only. This feature is compatible with the Particles Effect.

PARTICLES EFFECT

Similar to the Particles Effect mentioned earlier in this section, this option allows you to add particles that are responsive to the user’s mouse. As the user hovers around in the header, these Particles follow. It’s a pretty cool visual accessory. This feature can only be used once on a page.

PARALLAX EFFECT

Parallax is probably one of the most popular features in the web today, allowing your background image to have a fixed position while scrolling. You’ve probably seen this on a lot of different websites and now you can do it, too!

Parallax Method: There are two different options to choose from: CSS or True Parallax.

ANIMATED GRADIENT BACKGROUND
  • Gradient backgrounds are making a huge comeback and this feature does even more than just adding a stationary gradient background, this one moves!
  • Animated Gradient Style: Choose between two styles for how you would like your Animated Gradient background to display: Solid or Transparent.
  • Cool Tip: If you’re looking to incorporate a background image, choose transparent.
  • Animated Gradient Speed: Select your desired speed for the background, from 0.001 (slowest) to 0.03 (fastest).
BACKGROUND IMAGE URL

Set an image as the background for the entire Header module, this image will be displayed behind everything else.

BACKGROUND COLOR

Give your background some color with this option.

Cool Tip: Try setting the color transparency to 75% or less to continue seeing the background image beneath the color.

OVERLAY GRADIENT

This option allows you to have a stationary gradient background with two colors of your choosing, great for brand consistency.

Gradient Type: There are 5 different directional options to choose from: Left to Right, Top to Bottom, Radial, Diagonal (from top left to bottom right), and Diagonal (from bottom left to top right).

  • First Gradient Color: Set your first gradient background color here.
  • 2nd Gradient Color: Sent your second gradient background color here.

Cool Tip: Remember to play with the color transparency sliders if you’re wanting the background image to display behind the colors.

Content Styling

.
CONTENT STYLING

CONTENT GRADIENT: This option refers to the content posted in the content box within the general settings and is the same as the Title Gradient and Subheading Gradient options.

  1. First Gradient Color: Set the color you’d like the left set of letters to appear as.
  2. Second Gradient Color: Set the color you’d like the right set of letters to appear as.
  3. CONTENT FONT COLOR:
  4. Set the solid font color you’d like your content to appear as.
  5. CONTENT FONT: By default, the content font will display with whichever font you selected within the theme customizer as your body font. However, you do have the option here to use a different font, if you’d like.
  6. CONTENT FONT SIZE: Choose how large or small you’d like the content to appear. Choose between 1px (smallest) to 100px (largest).
  7. Cool Tip: Be sure to click on the little phone icon that pops up when changing any font size, you want to ensure the font looks good across all devices.
  8. CONTENT LETTER SPACING: Control how much room exists between each letter of the content. Choose between 0px (default) to 100px (most room).
  9. CONTENT LINE HEIGHT: Give a little bit more or less room for the content line itself, this will change the distance of the other content features in relation to this main content line. Choose between 1em (smallest amount of room) to 3em (most room).

More Content Features

.
LOGO IMAGE URL
  1. If you’d like to add your brand’s logo to the header, upload that image here. The logo will appear above the rest of the content (Title, Subheading, and Buttons).
  2. Cool Tip: The logo will appear in the size it’s uploaded as; recommended size specs are 300px or less.
  1. Logo Image Alternative Text: Define your HTML Alt text here, this is the content that will show up in case your image cannot be displayed.
  2. Logo Title: Define your HTML Title text, this text will also appear in an info box when hovering over the logo.
TEXT VERTICAL ALIGNMENT

You can choose where you would like all of your content displayed vertically in the header. There are three different options: Top, Center, or Bottom.

PARALLAX EFFECT

Parallax is probably one of the most popular features in the web today, allowing your background image to have a fixed position while scrolling. You’ve probably seen this on a lot of different websites and now you can do it, too!

Parallax Method: There are two different options to choose from: CSS or True Parallax.

ANIMATED GRADIENT BACKGROUND
  • Gradient backgrounds are making a huge comeback and this feature does even more than just adding a stationary gradient background, this one moves!
  • Animated Gradient Style: Choose between two styles for how you would like your Animated Gradient background to display: Solid or Transparent.
  • Cool Tip: If you’re looking to incorporate a background image, choose transparent.
  • Animated Gradient Speed: Select your desired speed for the background, from 0.001 (slowest) to 0.03 (fastest).
HEADER IMAGE URL
  1. This option allows you to upload a Header Image that will along with all of the other content.
  2. Use Customer Link for Header Image: You can choose to link your Header Image to an internal or external URL.
  1. Header Image URL: Input the destination URL you’d like this image linked to.
  2. URL Opens: Choose whether you’d like the URL to open In the Same Window or In a New Tab.
  1. Cool Tip: If the URL is sending visitors to an external website, set the link to open In a New Tab.
  2. Image Vertical Alignment: Choose where you would like the image to appear vertically within the module. There are three different options to choose from: Top, Vertically Centered, or Bottom.
SECTION SEPARATORS
  1. You know those cool websites that divide their different sections on a page with diagonal lines or triangles? Well, that’s what this is and you can do it, too!
  2. Section Separator Placement: Choose where you would like the separator to appear, Before or After the header module.
  3. Section Separator Type: There are four different styles of separators to choose from: Triangles, Half Circle, Multi Triangles, and Diagonal.
CONTENT

Add any remaining content you’d like displayed in the header. This will appear below the Logo Image, Title, and Subheading, but before any Buttons.

DISABLE ON

You can choose if you’d like this module hidden on specific devices. This comes in handy if you’re designing a different look & feel for mobile.

ADMIN LABEL

Give your module a name so it’s easy to remember exactly what it is when viewing on the backend or in the frontend wireframe editor.

PRO SETTINGS

.
HEADER ANIMATION

You can give the entire header’s content an animation effect on initial load. Choose between 47 different animation effects.

SCROLL FADING EFFECT

This is another animation that consists of the entire header’s content that works on the initial load. The contents will be revealed with fade in and scrolling effects. If this effect is used, no other animation features should be turned on.

TITLE ANIMATION EFFECT

Choose to only give animation effect to the title.

  1. Title Animation: There are 47 different animation effects to choose from.
  2. Title Animation Show/Hide on Scroll: Choose whether or not you would like the animation activated by scrolling or when specified with a specific delay (see below).
  3. Delay Speed (in s): This gives the animation effect a specified delay before being activated. This timeframe represents seconds. Choose between 0 (animation happens on initial load) to 10 (animation happens 10 seconds after initial load).
SUBHEADING ANIMATION EFFECT

Choose to only give animation effect to the subheading.

  1. Subheading Animation: There are 47 different animation effects to choose from.
  2. Subheading Animation Show/Hide on Scroll: Choose whether or not you would like the animation activated by scrolling or when specified with a specific delay (see below).
  3. Delay Speed (in s): This gives the animation effect a specified delay before being activated. This timeframe represents seconds. Choose between 0 (animation happens on initial load) to 10 (animation happens 10 seconds after initial load).
CONTENT ANIMATION EFFECT

Choose to only give animation effect to the content area.

  1. Content Animation: There are 47 different animation effects to choose from.
  2. Content Animation Show/Hide on Scroll: Choose whether or not you would like the animation activated by scrolling or when specified with a specific delay (see below).
  3. Delay Speed (in s): This gives the animation effect a specified delay before being activated. This timeframe represents seconds. Choose between 0 (animation happens on initial load) to 10 (animation happens 10 seconds after initial load).
BUTTON ONE ANIMATION EFFECT

Choose to only give animation effect to button one.

  1. Button One Animation: There are 47 different animation effects to choose from.
  2. Button One Animation Show/Hide on Scroll: Choose whether or not you would like the animation activated by scrolling or when specified with a specific delay (see below).
  3. Delay Speed (in s): This gives the animation effect a specified delay before being activated. This timeframe represents seconds. Choose between 0 (animation happens on initial load) to 10 (animation happens 10 seconds after initial load).
  • Use Button One Hover Effect: This gives the button an animation effect when hovered over.
    • Use 2D Hover Effect: Choose between 28 different hover animation effects.
    • Use Speech Bubbles: Choose between 8 different hover animation effects.
BUTTON TWO ANIMATION EFFECT

Choose to only give animation effect to button two.

  1. Button Two Animation: There are 47 different animation effects to choose from.
  2. Button Two Animation Show/Hide on Scroll: Choose whether or not you would like the animation activated by scrolling or when specified with a specific delay (see below).
  3. Delay Speed (in s): This gives the animation effect a specified delay before being activated. This timeframe represents seconds. Choose between 0 (animation happens on initial load) to 10 (animation happens 10 seconds after initial load).
  • Use Button One Hover Effect: This gives the button an animation effect when hovered over.
    1. Use 2D Hover Effect: Choose between 28 different hover animation effects.
    2. Use Speech Bubbles: Choose between 8 different hover animation effects.
LOGO ANIMATION EFFECT

Choose to only give animation effect to the logo.

  1. Logo Animation: There are 47 different animation effects to choose from.
  2. Logo Animation Show/Hide on Scroll: Choose whether or not you would like the animation activated by scrolling or when specified with a specific delay (see below).
  3. Delay Speed (in s): This gives the animation effect a specified delay before being activated. This timeframe represents seconds. Choose between 0 (animation happens on initial load) to 10 (animation happens 10 seconds after initial load).

 

HEADER IMAGE ANIMATION EFFECT

Choose to only give animation effect to the header image.

  1. Header Image Animation: There are 47 different animation effects to choose from.
  2. Header Image Animation Show/Hide on Scroll: Choose whether or not you would like the animation activated by scrolling or when specified with a specific delay (see below).
  3. Delay Speed (in s): This gives the animation effect a specified delay before being activated. This timeframe represents seconds. Choose between 0 (animation happens on initial load) to 10 (animation happens 10 seconds after initial load).
MAKE BUTTON FULLWIDTH ON MOBILE

This is a great option for the button aesthetics when viewed on a mobile screen. This will make the header’s button(s) fullwidth and centered on mobile view.

Pin It on Pinterest