Skip to content

Fullwidth Header Extended Content Options

Within the content tab you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Fullwidth Header Extended Content Options

Use Post/Post Title

This will automatic fetch title from your current post or page.

Title

Insert the title of your Fullwidth Header Extended module here.

Subheading Text

If you would like to use a subhead, add it here. Your subhead will appear before or after your title in a small font.

Button #1 Text

Specify the button #1 text here, or leave it blank if you do not wish to have a button.

Button #2 Text

Specify the button #2 text here, or leave it blank if you do not wish to have a button.

Use Post/Page Excerpt

This will automatic fetch excerpt from your current post or page.

Content

This field is where you can enter the Fullwidth Header Extended content.

Title Effects

You can choose a various title effects for your Perky Animate module. Please take note that for Rotator Effect will need to refresh your browser page in the Visual Builder in order to see the new changes. Once ElegantThemes releases a more comprehensive documentation on how to do things right, we will update accordingly.

Use Typing Effect

This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add "|" e.g text1|word|animating

Use Typing Effect

Static + Typing Effect

This will have a have static text and typing effect on the title at the same time. More of like a before text on the typing effect. For example, "Hello Divi" I am Divi - (Hello Divi is a static text and will not have typing effect where else "I am Divi" is animated). For the static text input, type in your text in the "title" input field above.

An option Input for Typing Effect will appear below when you enable Static + Typing Effect. In this input field, put in your typing text. To seperate the words in typing effect, you will need to add "|" e.g text1|word|animating

Use Static + Typing Effect

After Text

This will add a static text after the typing effect.

Cursor Character

You can have your own custom Cursor Character here. The character is "|" by default. You can put in any characters, letters or numbers.

Animation Speed (in ms)

Here you can control the speed of the typing effect. Lesser value will have faster typing effect.

Start Delay Speed (in ms)

Here you can delay before typing starts.

Delay Time Before Backspacing (in ms)

Delay before backspacing.

Use Loop

If enabled, typing effect will loop infinite.

Use Typing FadeOut

This will have fade out animation instead of backspacing.

Use Typing Shuffle

Here you can choose to shuffle your Typing Effect text strings.

Use Typing Shuffle

Here you can choose to shuffle your Typing Effect text strings.

Use Rotator Effect

This will have a rotating text effect on your Title with many animations to choose from.

Use Static + Rotator Effect

Static + Rotator Effect

This will have a have static text and rotator effect on the title at the same time. More of like a before text on the rotator effect. For example, "Hello Divi" I am Divi - (Hello Divi is a static text and will not have rotator effect where else "I am Divi" is animated). For the static text input, type in your text in the "title" input field above.

An option Input for Rotator Effect will appear below when you enable Static + Rotator Effect. In this input field, put in your typing text. To seperate the words in typing effect, you will need to add "|" e.g text1|word|animating

After Text

This will add a static text after the typing effect.

Rotator Effect on a new line

If enabled, you can have static text on the first line and rotator effect on the other line. This will only show up when you enable Static + Rotator Effect

In Animation Type

This animation list has over 30 animations and it controls the in effect animation of the text rotator.

Animation Speed (in ms)

Here you can control the speed of the rotator effect. Lesser value will have faster rotator effect.

Use Textillate Effect

This effect divides the animation into 2 components, in and out animation for each letters. You may apply them with different animations, separately.

Use Textillate Effect

Use Loop

If enabled, textillate effect will loop infinite.

Textillate Time (ms)

This will set the minimum display time for each text before it is replaced.

Textillate Type

You can choose Character or Word type to animate. If character, it will animate each letter else if you choose Word, it will animate the Word instead.

In Animation Type

Choose the animation type. Shuffle will reverse the character sequence.

In Animation

This animation list has over 30 animations and it controls the direction of the starting animation of the textillate.

Textillate In Delay (ms)

This will set the delay between each character.

Out Animation Type

Choose the animation type. Shuffle will reverse the character sequence.

Out Animation

This animation list has over 30 animations and it controls the direction of the exit animation of the textillate.

Textillate Out Delay (ms)

This will set the delay between each character.

Use Shuffle Text

This will shuffle your text in random letters and reveal the actual text within the given time.

Use Shuffle Text Effect

Shuffle Speed (in ms)

Here you can control the speed of the shuffle text effect. Lesser value will have faster effect.

Shuffle Speed (in ms)

Here you can control the speed of the shuffle text effect. Lesser value will have faster effect.

Overwrite Random Shuffle Text

Here you can have your own random character text.

Use TextGIF Effect

This will apply a background image such as gif to the title.

TextGIF Background Image URL

Upload your desired image, or type in the URL to the image you would like to display.

Use Divider line

The divider is perfect for creating either a horizontal line rule, custom vertical spacing, or both. Using this element is great for adding structure and organization to your site.

Divider Placement

This show up a divider line before or after the title depending if you use Subheading or not.

Divider Alignment

This controls the how your divider line is aligned.

Button

There are 3 tabs here in the button section. First tab is where you put your text and URL. The second tab is for Video Lightbox Popup and the third tab is for hover effect.

Perky Animate Buttons

General Tab

Button #1 Text

Specify the button #1 text here, or leave it blank if you do not wish to have a button.

Button #1 URL

Inserting a valid web URL in this field to specify the destination of your Call to action.

Open URL

Here you can choose whether or not your link opens in a new window.

Button #2 Text

Specify the button #2 text here, or leave it blank if you do not wish to have a button.

Button #2 URL

Inserting a valid web URL in this field to specify the destination of your Call to action.

Open URL

Here you can choose whether or not your link opens in a new window.

Fullwidth Button on Mobile

This will make your Buttons in Fullwidth on mobile devices.

Use Button Separator Text

This will have a text in-between the two buttons.

Separator Text

Insert the separator text here.

Separator Text Gap

The gap spacing between two buttons.

Video Tab

This is where you can have a video lightbox on your buttons.

Video Popup #1

This will enable the video lightbox popup on Button #1. Make sure have an video URL on your Button #1 URL. Support: YouTube, Vimeo and Dailymotion.

Enabling this will remove related YouTube Video at the end of the video.

Video Popup #2

This will enable the video lightbox popup on Button #2. Make sure have an video URL on your Button #2 URL. Support: YouTube, Vimeo and Dailymotion.

Enabling this will remove related YouTube Video at the end of the video.

Hover Tab

Buttons Hover

Use 2D Hover Effect (Button #1)

This will have a 2D hover animation on your button #1 when hover.

2D Transition (Button #1)

29 Animations to choose from.

Use Speech Bubbles (Button #1)

This will have a Speech Bubbles animation on your button #1 when hover. This Bubble effect will only work and look well if you have solid color background for the button.

Speech Bubbles Transitions (Button #1)

4 Animations to choose from.

Hover Effect Color (Button #1)

Tips: It is advisable to choose the same background color as your button #1.

Use 2D Hover Effect (Button #2)

This will have a 2D hover animation on your button #2 when hover.

2D Transition (Button #2)

29 Animations to choose from.

Use Speech Bubbles (Button #2)

This will have a Speech Bubbles animation on your button #2 when hover. This Bubble effect will only work and look well if you have solid color background for the button.

Speech Bubbles Transitions (Button #2)

4 Animations to choose from.

Hover Effect Color (Button #2)

Tips: It is advisable to choose the same background color as your button #2.

Images & Video

Logo Image URL

Upload your desired image, or type in the URL to the image you would like to display.

Header Image URL

Upload your desired image, or type in the URL to the image you would like to display.

This can have a custom URL link for your header image.

Header Image URL

Enter the URL for the Header Image

Open URL

Here you can choose whether or not your link opens in a new window.

Header Video

Upload your desired video, or type in the URL to the video you would like to display.

Show Video on Mobile

By default, header video is hidden on mobile. Turning this on will show the video on mobile devices.

Search Form

Youu can place a search form on your Fullwidth Header. This search form will allow your visitors to search through all of your website’s content, including all pages and blog posts. This gives you the functionality of the WordPress search widget along with the flexibility of the Divi Builder. Not only can you control the search forms location on the page, you can also customize its design. We've also added the WooCommerce search so that eCommerce customers are not missed out!

Placeholder Text

Type the text you want to use as placeholder for the search field.

Exclude Pages

Turning this on will exclude Pages from search results.

Exclude Posts

Turning this on will exclude Posts from search results.

Turning this on will search for WooCommerce products instead of Pages/Post.

Hide Search Text

Turning this on will hide the button text.

Search Text

Specify the search button text here, or leave it blank if you do not wish to change.

Show Search Icon

Enable this if you want to show your search icon on the search button.

Hide Button

Enable this will hide the search button.

Background

This is where you can set a background image on your Fullwidth Header Extended and choose different type of background animation effects.

Background

This will automatic fetch the featured image from your current post or page and set it as background image. Very useful for blog where you can have a good hero impression.

KenBurns Effect

This will have a Ken Burns zooming and panning effect on your site’s background image, achieving stunning results!

KenBurns Effect Type

8 Types of KenBurns to choose from. Choose your desire effect here.

KenBurns Speed

You can adjust the speed of the zooming and panning effect.

KenBurns Loop

Choose whether you want this effect to loop or not.

Hide KenBurns on Mobile

This will hide the effect on mobile devices.

Use Interactive Effect

This will move your background image on mouse move. Mobile and Tablet will not have this effect. Note: KenBurns and Parallax will not work with this. Make sure you turn them off.

Special Background Effects

Enable this will allow you to choose from 3 types of effect. Big Multiple Boxes will replicate boxes from the background URL you provided with the same background image and make these boxes move in perspective towards the viewer. This will spice up and add some jazz to background image. Note: This might not work with older browsers. Layer Illusion will create multiple images and the background image will move on mouse move to create an illusion effect. Glitch Effect will create some distortion effect or glitch effect to your background image.

Particles Effect

This will create particles effect on your Fullwidth Header Extended with many options to choose from. Particles are a great alternative to standard hero sections on a web page.

Number of Particles

This defines the number of particles you wish to display. Default is 80

Particles Size

The size of the particles.

Shape of the Particles

Different types of particles shape to choose from.

Shape Image URL

This option will appear when you select Custom Image from Shape above. Upload your desired image/icon, or type in the URL to the image/icon you would like to display for Particles Shape.

Shape Image Width

Here you can define the shape image width.

Shape Image Height

Here you can define the shape image height.

Particles Line Linked

Change the width of the particles line.

Particles Speed

Change the particles speed.

Particles Shape Color Type

You can set your own color or choose a random color scheme.

Particles Shape Color

Here you can define a custom shape color.

Here you can define a custom link color.

Particles Direction

Particles will move in the directions you specify. Default is none which will stay static.

Use Particles Hover Effect

You can choose the Hover Effect for the particles. Grab, Bubble or Repulse.

This option will appear when you choose Grab for the Hover Effect. Define a custom opacity for the link.

Use Particles Click Effect

You can choose the Click Effect for the particles. Push, Remove, Bubble or Repulse.

Hide Particles Effects on Mobile

This will hide the particles effect on Mobile.

Moving Canvas

Interactive Moving Canvas Effect. Moving Canvas effects are meant for Hero Sections and is best to only use one per page/post.

Moving Canvas

Hero Moving Particles Effect

If enabled, you can have moving particles effect on the header. This create a interactive particles effect which follow your mouse movement. This effect is meant for HERO Section can only be used in one section. You have to either change the color again to see the color or do a refresh on your browser.

Moving Circle Color

Here you can define the moving circle color.

Moving Line Color

Here you can define the moving line color.

Hide Moving Particles on Mobile

This will hide the moving particles effect on Mobile.

Moving Circle Particles Effect

If enabled, you can have cirlce particles effect on the header. This create a interactive circle and colorful particles effect which follow your mouse movement. This effect is meant for HERO Section can only be used in one section. Note: When using Moving Circle Particles Effect, it will not work with background overlay color on the (Design Tab). If you want to have an overlay, please use the background gradient instead.

Wave Effect

This will create a beautiful animated waves using SVG on your Fullwidth Header Extended.

Wave Effect

Wave Color

Here you can define the wave color.

Wave Speed

Here you can define the speed of the wave.

Wave Height

This option will define a height above the wave. Which means the lesser the value, more wave will be shown.

Wave Amplitude

Define the amplitude of the way and this is the vertical distance between a peak or a valley and the equilibrium point.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.