Divi All-In-One Module Extended

A whole new experience on Divi. Start building and impress your visitors with title effects, background effects, animation and more!

created: 02/11/2016
latest updated: 02/11/2016
by: DiviWebDesign.com
Version: 1.0.0
email: hello@diviwebdesign.com

Thank you for purchasing our custom module. If you have any questions that are beyond the scope of this help file, please feel free to email hello@diviwebdesign.com or contact us via Facebook

Hi, and welcome to the Divi Divi All-In-One Module Extended Module User Guide. The User Guide covers all the information needed to use extended version of All-In-One to build an amazing website, as well as some helpful tips and tricks that will make your experience working with the Divi All-In-One Module Extended module easier and more enjoyable. If you need any additional assistance while using our modules, you can always post your questions on our facebook page. Divi Web Design Facebook Page or drop us an email to hello@diviwebdesign.com. Our support team will be glad to help you out.

You can navigate through different sections of the User Guide by clicking on the links in the menu to the left of your screen.

Installing Divi Custom Modules

After downloading the Divi Custom Module Extended installation file from DiviWebDesign.com, extract it and in the extracted folder locate the dwd-aio-module-extended-OPENFIRST.zip file. You can then install the Divi Custom Module Extended Module using one of the two following installation methods:

1. Login to your WordPress admin panel
2. Navigate to Appearance > Plugins > Add New > Upload Plugin
3. Click on Choose File and select dwd-aio-module-extended-plugin.zip
4. Click on Install Now
1. Extract the dwd-aio-module-extended-OPENFIRST.zip file you previously located. You should now see a folder named dwd-aio-module-extended-OPENFIRST
2. Using an FTP client, login to the server where your WordPress website is hosted
3. Using an FTP client, navigate to the /wp-content/plugins/ directory under your WordPress website's root directory
4. Using an FTP client, upload the previously extracted dwd-aio-module-extended-plugin folder to the plugin directory on your remote server
Updating Files - If you would like to update the Divi All-In-One Module Extended module via FTP:
1. Extract the new updated dwd-aio-module-extended-OPENFIRST.zip file you downloaded. You should now see a folder named dwd-aio-module-extended-OPENFIRST
2. Using an FTP client, login to the server where your WordPress website is hosted
3. Using an FTP client, navigate to the /wp-content/plugins/ directory under your WordPress website's root directory
4. Using an FTP client, upload the previously extracted dwd-aio-module-extended-plugin folder to the plugin directory on your remote server

Activating Divi Custom Modules

To activate the Divi All-In-One Module Extended Module, you have to navigate to Appearance > Plugins > Installed Plugins and click on activate as shown below.

After you have done this, your Divi Custom Module Extended modules will be ready for use. you should see All in One Extended appear in Divi Builder as shown below.

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

When using custom All-In-One module, one of the first things you will probably want to do is to choose the standard section in the divi working environment. To do this, log in to your word press admin panel, choose the divi theme. Click Insert Modules inside the Insert Module section, choose the YELLOW color All-In-One Extended module.

Typing Effect

Use Typing Effect : - Toggle this input to "on" to apply the typing effect for the header title.
Title Type in some text that you want to display as title in the All-In-One of your page. The input text should be in the following format seperated by |.

Example: text1|text2|text3

Animation Speed (in ms): Set the speed of the typing effect in this input field.

Note: The default setting of the speed for typing effect is 10.

Static + Typing Effect

Note: This will help you to have the static and typing effect at the same time.The static text will remain in front while the typing effect will follow after. if you wish to see how it works, please visit to https://diviwebdesign.com/divi-all-in-one-extended-module-demo/

Use Typing Effect : - Toggle this input to "on" to apply the typing effect for the header title.
Title : Type in the text that you want to display as static on the title.

Example: This text stays static.

Static + Typing Effect: - Toggle this input to "on" to have the static text and typing effect for the header title.
Input for Typing Effect: - Enter the text seperated by | to apply the typing effect for the header title.

Example: text1|text2|text3

Animation Speed (in ms): Set the speed of the typing effect in this input field.

Note: The default setting of the speed for typing effect is 10.

Start Delay Speed (in ms): Delay the time before the typing effect starts

Note: The default setting of the delayspeed for typing effect is 0.

Delay Time Before Backspacing (in ms): Delay the time before backspacing.

Note: The default setting of the Delay Time for typing effect is 500.

Styling Typing font and Typing Cursor color

Typing font color: Select your desire color for the typing effect font "This will be apply only on the typing effect"
Typing cursor color: Select your desire color for the typing cursor.

Note: For the Typing effect and Rotator effect, either one of them can be applied to each All-In-One extended module.

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

Rotator Effect

Use Rotator Effect : - Toggle this input to "on" to apply the rotator effect for the header title.
Title : Type in some text that you want to display as title in the All-In-One of your page. The input text should be in the following format seperated by |.

Example: text1|text2|text3

Animation Speed (in ms): Set the speed of the rotator effect in this input field.

Note: The default setting of the speed for rotator effect is 2000.

Static + Rotator Effect

Note: This will help you to have the static and rotator effect at the same time.The static text will remain in front while the rotator effect will follow after. if you wish to see how it works, please visit to https://diviwebdesign.com/divi-all-in-one-extended-module-demo/

Use Rotator Effect : - Toggle this input to "on" to apply the rotator effect for the header title.
Title : Type in the text that you want to display as static on the title.

Example: This text stays static.

Static + Rotator Effect: - Toggle this input to "on" to have the static text and typing effect for the header title.
Input for Rotator Effect: - Enter the text seperated by | to apply the rotator effect for the header title.

Example: text1|text2|text3

Animation Speed (in ms): Set the speed of the rotator effect in this input field.

Note: The default setting of the speed for rotator effect is 2000.

Rotator Font Color: Select your desire color for the rotator font "This will be apply only on the rotator effect even you are using Static + Rotator Effect"

Note: For the Typing effect and Rotator effect, either one of them can be applied to each All-In-One extended module.

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

Overlay:

"on"

Gradient Type: From the dropdown input of the animated gradient style, there are 5 options to choose. Top to Bottom, Left to Right, Radial, Diagonal bottom and Diagonal Top

Note: The default setting of the gradient style is left to right.

Gradient colors: To use solid color, use the same color on both otherwise you can just choose to have different color to show gradient
Show Overlay On Load:Selecting this will show overlay on load. This is best to use when you are using a background image

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

Overlay:

"on"

Gradient Type: From the dropdown input of the animated gradient style, there are 5 options to choose. Top to Bottom, Left to Right, Radial, Diagonal bottom and Diagonal Top

Note: The default setting of the gradient style is left to right.

Gradient colors: To use solid color, use the same color on both otherwise you can just choose to have different color to show gradient. If you are using Hover Content PUSH Effect. It is best that you set a background color first.

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

Hide Content - Toggle this input to "on" to hide the contents and only show on hover.
Alternative Title: You can choose to show an alterative title. This title will appear centered when you hide the content.
Hover Content Effect: Define the hover effect style. For pushing effect - Make sure you have a background color set as well. 10 types of appearing content effects to choose from (Fade In, Fade In from Top, Fade In from Right, Fade In from Bottom, Fade In from Left, Flipping, Push from Left, Push from Top, Push from Right and Push from Bottom

Note: The default setting of the gradient style is left to right.

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

Zoom Image On Hover - Toggle this input to "on" to make the background image zoom when hover

Zoom Speed - You can choose to have slow and fast zooming speed.
Image Filters - You can set a your preferred background image filters when hover. Greyscale, Blur, Sepia and Saturate

Note: Make sure you are using background image.

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

Use Border Wrapper - Toggle this input to "on" to have a border wrapping the content section. This will also called the box overlay when you use the overlay

Border Style - You can choose to solid, dotted or dashed.

Note: Make sure you are using background image.

In this section of the User Guide we will discuss about the animation effects to apply when using custom All-In-One.

The Animation effect can be applied to either the whole header section

Whole Header Animation:- Toglle this to "on" to set the animation for whole header section.

Note: Once the whole header effect is on, the individual animations effects cannot be applied.

or you can set the customized animation effects to

Title

Contents

Button

Whole Content (Using this will turn off all individual animation such as title, contents, button and etc)

respectively.

We have added 49 Animations to our module. Below is a list of Animation effects you can choose.You can have a look at this website Animate.css for more information about the animation effects.

fadeIn

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInDown

fadeInDownBig

fadeInUp

fadeInUpBig

flip

flipInX

flipInY

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

lightSpeedIn

rollIn

Show/Hide on Scroll: - Toggle this input to "on" to Reveal CSS animation as you scroll down a page

Delay Speed (in s): -Here you can set the delay time for the animation. eg 0.5

Fancyline

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

When using custom All-In-One module, one of the first things you will probably want to do is to choose the standard section in the divi working environment. To do this, log in to your word press admin panel, choose the divi theme. Click Insert Modules inside the Insert Module section, choose the YELLOW color All-In-One Extended module.

Use Fancyline on Title - Toggle this input to "on" to have a line before or after the title.

Fancy line before or after Title: - You can choose to have before or after the title

Fancy Line Orientation: - You can have align the line to be left, center or right depending on the text alignment.

Note: You can change the colors or set Line spacing on the top and bottom at the Advanced Design Settings Tab.

Video Popup

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

When using custom All-In-One module, one of the first things you will probably want to do is to choose the standard section in the divi working environment. To do this, log in to your word press admin panel, choose the divi theme. Click Insert Modules inside the Insert Module section, choose the YELLOW color All-In-One Extended module.

Use Video Popup - Toggle this input to "on" to have video popup

Button URL - Video URL on Button URL. If using YouTube as video, use the link that as /embed/ eg https://www.youtube.com/embed/FkQuawiGWUw

Note: Only work on button at the moment=

Text Behind Title

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

When using custom All-In-One module, one of the first things you will probably want to do is to choose the standard section in the divi working environment. To do this, log in to your word press admin panel, choose the divi theme. Click Insert Modules inside the Insert Module section, choose the YELLOW color All-In-One Extended module.

Use Text Behind Title: - Toggle this input to "on" to have a background text behind the title

Background Text: - Input your value to action background text here.

Note: This will have a opacity of 0.15 and to adjust the placement of the background text, you can go to Custom CSS tab and navigate to Background text. This div uses absolute position, so you must use left, right, bottom or left to adjust it.

TextGIF

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

When using custom All-In-One module, one of the first things you will probably want to do is to choose the standard section in the divi working environment. To do this, log in to your word press admin panel, choose the divi theme. Click Insert Modules inside the Insert Module section, choose the YELLOW color All-In-One Extended module.

Use TextGIF Background: - Toggle this input to "on" to have a background image on your text

TextGIF Background Image URL: - Upload your desired GIF image, or type in the URL to the image you would like to display.

Note: Currently it doesn't work with firefox. Hopefully to find a solution for it soon.

Textillate Effect

In this section of the User Guide we will discuss about the effects to apply when using custom All-In-One.

When using custom All-In-One module, one of the first things you will probably want to do is to choose the standard section in the divi working environment. To do this, log in to your word press admin panel, choose the divi theme. Click Insert Modules inside the Insert Module section, choose the YELLOW color All-In-One Extended module.

Use Textillate Effect: - Toggle this input to "on" to have a css3 animation to each letter

In Animation Type: - The In animation type. Sequence, Reverse, Sync, Shuffle

In Animation Effect: - 49 Animations to choose from when effect starts.

Out Animation Type: - The Out animation type. Sequence, Reverse, Sync, Shuffle

Out Animation Effect: - 49 Animations to choose from when effect is ending

Note: Currently it doesn't work with firefox. Hopefully to find a solution for it soon.

Divi All-In-One Module Extended

A whole new experience on Divi. Start building and impress your visitors with title effects, background effects, animation and more!

Getting Started

Installing Divi Custom Modules

Activating Divi Custom Modules

Typing Effect

Typing Effect

Static + Typing Effect

Styling Typing font and Typing Cursor color

Rotator Effect

Rotator Effect

Static + Rotator Effect

Overlay Gradient

Background Gradient

Hide Content

Image Zoom/Image Filters

Border Wrapper

Animation Effect

Fancyline

Text Behind Title

TextGIF

Textillate Effect