Ultimate Divi Builder Addons – Give superpowers to Divi

(8 customer reviews)

$59.00

Take the power of Divi to next level with Ultimate Divi Builder Addons – UDBA. You can activate popular JavaScript libraries that used by million dollar websites with a switch of toggle. Currently there are 16 effects included in the plugin. You can use these effects on a page or theme template files.

Test Drive This Plugin

Live Demos are available in a separate tab below

Some of the cool effects you can create with this plugin include,
* Page Piling Vertical scroll | Live Site DEMO
* Page Piling Horizontal scroll (with Menu Anchor Links)
* Section Stacking Effect
* Text Rotator
* Loading Header while Scrolling

 

Also available in: The bundle package with BIG saving


Don't have Divi? get it first from CLICK HERE

Description

‘Ultimate Divi Builder Addons (UDBA)‘ is the plugin that help you to re-create amazing effects you see in popular websites right inside Divi. It is the BEST Divi Full Page Vertical or Horizontal Scroll Plugin!

 
* Featured in Elegant Themes Plugin Highlight Series… Check the post >
 
* Check the plugin walkthrough and demos HERE >

 
We all know Divi theme is a great tool to build web sites. The page builder is easy to use and intuitive. Theme customizer, the epanel allow to customize the design of your site easily. There’s one problem though, and it’s a big problem! When you look at all the sites built with Divi theme, they all look the same. You will need many lines of custom code to change default Divi theme look. You can never achieve the design and functionality of those popular sites that clients are willing to pay millions of dollars without hiring an expert developer. Let’s face it, If you are using a drag and drop page builder based WordPress theme like Divi, you should be able to create your masterpiece without touching a line of code. So, Are you a Divi web designer tired of giving same old designs to your clients? Don’t worry, you won’t be need to learn custom code or hire an expert developer anymore. All you’ll need is ‘Ultimate Divi Builder Addons – UDBA‘ plugin to help you create stunning web pages with switch of a toggle!

 

Take the Plugin for a Test Drive > *Create a test site and activate Divi Theme. Then search for this plugin (ultimate divi) and activate. If you are testing the ‘Page-piling effects’ then please remove default footer widgets added to the site by Divi upon activation. You can download the Page-piling demo layout form the ‘Solutions’ tab above.

 

Get the BUNDLE and SAVE!

 

Looking for a use case? then, See how easy it is to implement popular Full page scrolling technique in Divi with the help of our plugin

 

* Divi Scroll Motion Effect and Animation features does not work (from 2nd slide onwards) on pagePiling scroll pages. This is because there’s no view port base trigger in pagePiling.js library. Our Scroll child theme which is based on fullpage.js libarry can handle this.

 

Here’s how to setup the plugin WATCH THE VIDEO >
Download the old version 1 of this plugin from plugin's GitHub repo >

 

Terms of Sale:

You can use this product for both personal and commercial use on unlimited websites – 3 websites can receive auto updates through license mechanism (1 purchased license = 3 websites) or you can manually update unlimited number of sites.
You are not allowed to resell or redistribute this product or any of its parts to anyone else.

You get product updates for lifetime – We will make every attempt to ensure that our products are compatible with all future releases of Divi. You can access product updates through your website admin dashboard or ‘My Account‘ page here (check version number to see if there’s an update).

For product support you can directly contact us. We provide customer support for life of the product – Support is provided for bug fixes only. If you need customisation support you will have to pay our hourly rate.

Scope of Support – Our main intention by providing product support is to help uncover bugs, add frequently requested features and overall improve the product for everyone. We reserve the right to dismiss any support request that’s outside of this support scope.

Due to the nature of digital products as they cannot be returned, it’s impossible to prevent fraud and still offer refunds. Hence refund requests are expressly denied. You are encouraged to use our test drive facility to try the product before you buy.


Compatible with PHP version 5.5 or higher

Live Demos

Effects in this plugin can be divided into mainly 3 categories:

1. General effects for Divi

2. Animation effects

3. Special effects for Divi

 

1. General effects for Divi

 

1.1 Custom Scrollbar Effect :

Add mobile responsive custom scroll bars to any builder element. Please note that you have to remove any element animation in the builder to make this effect work properly. There are 8 scroll bar designs to chose from.

Demo

Source

 

1.2 Hide the Divi Theme Header when Scrolling Down : You can make the header hide when scrolling down and appear it when scrolling up.

 

1.3 Loading Header while Scrolling :

 Create a mobile responsive loading header effect while you scroll. This effect can used as a reading progress bar indicator showing the user how far scrolled through the current post or page they are. You can chose the color for reading progress bar. There are two effects to chose from.

Demo

Source

 

2. Animation effects

 

2.1 Flipping Text :

 Add real time typing animation to Divi text module. It creates a ticking intro animation for your typography. You can adjust the font from Advanced Design Tab of the Text module.

Demo

Source

 

2.2 Scroll Flow :

Nice scroll animations to add to any Divi Module or Row. These animations works both page scroll up and down. You have 5 animations to choose from.

Demo

Source

 

2.3 Scroll fx :

Scroll fx is a jQuery effect for smooth scroll-triggered animations that allows scaling text and changing the background opacity as you scroll pass them.

Demo

Source

 

2.4 Scroll Trigger :

Animate any Divi module with nice slide in animation. This works with both page scroll up and down.

Demo

Source

 

2.5 Revealator Animation :

Viewport Triggered Element Animations. These animations works both page scroll up and down. You can choose from 9 animation types.

Demo

Source

 

2.6 Scroll Magic Responsive Duration :

 This effect works best with Button or Call to Action modules. It creates nice zoom in and out animation to these modules as the user scroll through the page. Scene duration depending on viewport size.

Demo

Source

 

2.7 Scroll Reveal :

Reveal modules on scroll. These animations works both page scroll up and down. There are 17 animation effects to choose from.

Demo

Source

 

2.8 Super Easy Text Rotator :

Add a super simple rotating/ticking text to your website with little to no markup. You have 5 text animations to choose from. You can use these animations to any Divi module that has a text field. Use commas (,) to rotate texts inside span class.

Demo

Source

 

 

3. Special effects for Divi

 

3.1 Stacking Effect :

A jQuery effect that creates a stacking effect by sticking panels as they reach the top of the viewport. You may want to activate ‘Hide Divi Theme Header when scrolling’ to make this effect appear better. There’s a conflict with Divi slider module. Activate ‘Remove this effect in small screen sizes’ option if necessary.

Demo

Source

 

3.2 Scroll Magic Section Wipes :

Wiping in content with the natural scroll movement. This effect is similar to Stacking Effect mentioned above but it doesn’t have the conflict with slider module. You need to use this effect from second section onwards. This effect is not mobile optimized so you may want to enable ‘Remove this effect in small screen sizes’ option.

Demo

Source

 

3.3 End Page Box :

This effect will let you add an end page box that will display when scrolled to the bottom or in any range on the page.

Demo

Source

 

3.4 Page Piling Vertical scroll :

This effect creates responsive scrolling stack of pages. This is the effect to use if you want to build a one page scrolling page like ‘tumblr’ home page. Don’t activate page Piling Vertical scroll and page Piling Horizontal Scroll at the same time, It creates conflicts. This effect creates vertical scrolling for each section that has the CSS class. Use single module inside a section for best results. Activate ‘Remove this effect in small screen sizes’ option if necessary.

Demo

Source

 

3.5 Page Piling Horizontal scroll :

This effect creates responsive scrolling stack of pages. This a new way to create a single scrolling page in which sections are piled one over another creating an original effect to present the information. You can use this effect to showcase your image gallery in a very attractive way. This effect creates horizontal scrolling for each section that has the CSS class. Use single module inside a section for best results. Don’t activate Page Piling Vertical scroll and Page Piling Horizontal Scroll at the same time, It creates conflicts. Activate ‘Remove this effect in small screen sizes’ option if necessary.

Demo (with Menu Anchor Links)

Source

Changelog

Version 1: Initial Release.

Version 2:
* Fixed errors with PagePiling effects. You can now disable common conflicts on scroll page IDs.

* Added an option to stop slider loop (prevent the panels from cycling through (ie: just stop at the bottom instead of going back to top).

* Added speed controller for: Pagepiling Slide Transitions, Text Rotator, and Flipping Text effects.

* Divi Visibility Options are now working with pagePiling effects.

* You can now use Menu and Button Anchor Links with Pagepiling effects. See the DEMO (with Menu Anchor Links).

* Added an option to disable following effects from showing up in small screen sizes – When enabled effects only show up after a defined screen size (media query).
– doSlide Horizontal
– jQuery pagePiling Vertical scroll
– jQuery pagePiling Horizontal Scroll
– ScrollMagic Section Wipes
– jQuery Stacking Effect

Version 3: Elegant Themes Marketplace Launch

Solutions

• To manually update this product first compare installed version number in your site with the product version number in your my account page here. If the version number is higher then you need to download that new zip file and install to your site. Once installed WordPress will take care plugin/theme upgrade process.

………..

1. Page Piling Effects

Page-piling pages are special kind of pages. It can only show one section/slide on the screen at a time so there’s a very little window/viewport to show contents. So you need to keep that in mind when building the scroll page.

 

Divi default header and footer works fine on scroll pages. However, custom GLOBAL header and footers made inside Divi theme builder won’t get added to the scroll page. In order to show the customer header: add a new theme builder template targeting the scroll page > Copy and paste the global header to here > Remove global tag from this pasted header and make it a normal one.

 
Since there’s no space to show a custom footer in a scroll page you need to design and add your customer footer as the last slide to the page. Unlike the custom header where it’s fixed to the top while page scroll, this footer will be part of the slider and won’t be fixed to the bottom.

…………….

* You can use Divi Module Visibility Options to deign entirely different sections just for mobile view. Plugin is setup to identify visibility rules so like in normal Divi sites it will follow the rule and show scroll sections based on visibility settings you have set in the builder.

…………….

If you are seeing the page you setup with this effect jump up/down before moving into next slide then first check if the ‘smooth scrolling’ effect is active. If Yes, then disable it on that page ID using the field provided in our plugin.

If that doesn’t work then try one of these solutions,

Add following CSS code to page options custom CSS panel.

Click the page settings icon and in the pop up window you will find a place to add page specific CSS. There you need to add these codes:

.pp-section {
height: 83% !important;
}

@media only screen and (max-width: 600px) {
.pp-section {
height: 80% !important;
}
}

You can adjust the height base on your requirement.

 
One other thing that can cause this problem is customizations made under sizing tab in a Row module – Specially the height adjuster. Make sure the height is set to default ‘auto’. To check this go to each Row module (Designated in Green color) in the scroll page > Go to design tab > Select sizing options > Check if height value is set to ‘auto’. If not just press Undo.

 
If the height of the header pushes down all of the pages causing the bottom section to get cut off then add this CSS to fix it,

.pp-section { height: calc(100vh - [nav_height] }

PagePiling effect makes section height set to 100% by default so you loose whatever height the nav bar is. This CSS should fix that.

The following snippet will solve excess top padding added to the first scroll section by other plugins like slider revolution,

.page-id-xxx .et_pb_section_0, .et_pb_section_1, .et_pb_section_2, .et_pb_section_3 {
padding-top: 0px !important;
}

…………….

If you want to change the color of side dot navigation then enter following codes to Divi theme options custom CSS panel.

#pp-nav span {
border-color: #ffa500 !important;
}

#pp-nav li .active span, .pp-slidesNav .active span {
background: #ffa500;
}

You can also change side dot navigation alignment (By default its set to right side) in the page with following code.

div#pp-nav {
right: unset !important;
}

You can also add a background to side dot nav section in the page,

#pp-nav span {
border-color: #FFFFFF !important;
}

#pp-nav li .active span, .pp-slidesNav .active span {
background: #FFFFFF;
}

div#pp-nav {
right: unset !important;
margin-left: 5px;
padding-bottom: 1px;
padding-top: 1px;
background-color: #000000;
}

This code will place the nav on the left, make dot color white and background color black.

…………….

If the header dropdown menu isn’t showing when the Page piling effect is active then use the following code to fix it.

/* fix piling dropdowns */
.menu-item.et-hover .sub-menu {
	position: fixed !important;
}

…………….

* Download our DEMO Page-Piling layout CLICK HERE
Import this to a new page using Divi builder import/export feature.

…………….

* To set up button Anchor links you just have to add ‘arrow’ CSS class to the section module so it will look like this: et_pb_section_pagepiling arrow
Then give the target slide number E.g: #sec1 , #sec2 , or #sec3 ,…. as the button URL.

* If you are using a Blurb module arrow then put the target slide number to “Title Link URL” field, not Module link field.

* When assigning anchor triggers to a menu you only need to set target slide numbers for each custom link menu item.
If you have “Disable this effect in small screen size option” activated then in mobiles these CSS IDs won’t trigger. Add those IDs manually to each section so each section CSS ID field would have sec1 , sec 2 and so on. This will trigger anchor menu/button links in mobiles. You don’t need to do this if you haven’t activated small screen size option.

…………….

* Set the speed to ’10’ in order to speed up slide transitions.

…………….

* Learn how to vertically align contents in a slide with this tutorial.

 

2. Stacking Effect and Page Piling Effects

 
The plugin is designed to work with default Divi conditions – Default Divi header and footer.

If you are using a custom (Global) Footer/Header made with Divi theme builder then it won’t work well with these effects. You need to disable those sections on the pages where you are going to apply these effects. To do this,

1. Add a new theme builder template to the Staking or Pagepiling effect page.
2. It will show Global header footer as default.
3. Then you need to click on ‘Hide on Front End’ option.
– For Stacking effect Header is the only thing that cause problems so disable that, you can keep the footer as it is.
– For Pagepiling You need to disable both global header and footer. Then you can create those section designs on the Scroll page.

8 reviews for Ultimate Divi Builder Addons – Give superpowers to Divi

  1. lobsterdm (verified owner)

    Excellent plugin for adding some really interesting effects to your Divi based website.

  2. Thibaut Goarant (verified owner)

    I am really enjoying the effect that this plugin is bringing to my website. This bring a huge differentiation compared with my competitors in the business I am trying to developp. But the most delightful was the service, frankly I’ve been amazed how fast it was and how kind enough the people were to listen to my issues. No doubt, I warmly recommand their products, you won’t be disapointed!

  3. Sara Swallow (verified owner)

    Great plugin! I had a few modification requests and the support was awesome!

  4. Jean-Michel Scheidegger (verified owner)

    Awesome Support and just a great product! Thank you very very much for this nice tool

    Preview:

  5. Thanh Nguyen Duy (verified owner)

    Great plugin!
    I really like the effects of UDBA. I will use UDBA for my projects. It makes my website more beautiful.

    Preview:

  6. Justin Jeffs (verified owner)

    Great plugin used on a client site Home Page with vertical scrolling. Had a support issue that was responded to and sorted out amazingly quickly. A solid 5 star rating form me.

  7. Tatu (verified owner)

    Great plugin, i used the vertical pagepiling effect and works just like it should! Very fast customer support. Thank you!

  8. Bastian Hilk (verified owner)

    Love the Plugin! I buyed it for the scroll effects, which are super simple to use. Amazing support as well!
    Great work!

Only logged in customers who have purchased this product may leave a review.