A Walkthrough of UDBA Plugin - Learn how to give superpowers to Divi!

Do you often feel that your site lacks the magic or something is missing?
Ever thought of implementing some of the cool effects you see in those popular multi-million dollars sites?

38% of people will stop engaging with a website if the content or layout is unattractive.

sweor

Obviously, it gets really boring to look at a similar site again and again that has no interactive design layout. Earlier it was quite difficult to manage the web page layouts with manual/custom codes. The greats were only a few.

They knew the importance of foreseeing the needs of the customers and plan strategies accordingly.

The small businesses didn’t know where they were missing the trick.

But, change is forever!

With the evolution of more interactive and attractive websites, almost every other website is incorporating javascript, jquery libraries and what not. Every website developer aims to utilize the best pragmatics and provide a delightful UX design to their clients so they can retain their customers. But, all this was done using long codes and code snippets from various code platforms.

Eventually, content management systems like WordPress based web builders came into the picture and made the design workflow much easier.

It has become much easier to craft the webpages using drag-n-drop web builders like Divi. But, using only Divi may not fulfill your dreams of designing a web page similar to say, tumblr home page.

We have always believed in delivering the on-clicks creativity to let our customers feel the ease in their work routines. And, at the same time manage their pace with time. Therefore, we have come up with a new idea yet again.

We have designed a plugin that will help to overcome design limitations that comes with default Divi theme. If you are tired of creating web pages that looks similar to every other Divi site in the wild then this is the plugin for you!

What Exactly is Ultimate Divi Builder Addons Plugin?

UDBA plugin is an add-on solution designed for the Divi theme/builder to help you achieve complex design techniques with switch of a toggle.

We call it ‘Ultimate Divi Addons’ because it provide you with whole collection of new effects to implement in any Divi based website. The best of all the features are activated by a Single Toggle Button corresponds to each effect. Toggle the button to ON, and voila! Your site is enabled with creative effects that you might find it difficult to implement manually.

UDBA plugin comes with following effects categorized into three main heads –

1. General Effects

Custom Scrollbar Effect
Hide the Divi Theme Header when Scrolling Down
Loading the Header While Scrolling
Scrolling Windows

2. Animation Effects

Fade into View
Flipping Text
Scroll Flow
Scroll Fix
Scroll Trigger
Revealator Animation
Scroll Reveal
Scroll Magic Responsive Duration
Wow Animation
Super Easy Text Rotator

3. Special Effects

Stacking Effects
Do Slide Horizontal
Scroll Magic Section Wipes
End Page Box
Page Piling Scroll – Horizontal/Vertical

How This Plugin Works?

Ultimate Divi Builder Addons Plugin is very easy to install and use. Just follow the steps below and you’ll be all set.

Step 1. Purchase the Plugin. When the payment process completes, You can download the plugin.

Step 2. Open your WordPress account and install the downloaded plugin. Once the plugin is installed, click on the Activate button to complete the installation process.

Step 3. After the plugin is activated, you will be able to see the plugin on the WordPress dashboard side panel. Select the menu item from the panel. Now, here you’ll see the list of extra functionalities that can be added to the Divi Theme along with a toggle button to activate them.

Step 4. Select and activate features you wish to add to your Divi site.

For example, let us consider the Custom Scrollbar Effect. When you will select this feature, you’ll see that the toggle button is set to OFF by default. Set the button to ON mode and copy the class name from the listed class options. These classes can be added to any Divi Builder section, row or module. Once the class is copied and the toggle button is enabled, save your settings by clicking on the SAVE SETTINGS button.

Step 5. Next, go to the WordPress dashboard and select Pages -> Add New Page or select an existing Divi builder enabled page. Select “Use Divi Builder” to get into page edit mode.

Step 6. After the edit mode loads, select the module of the page you wish to add effects in and go to module settings -> select CSS ID and Classes -> Add the selected class name to the specified textbox -> Save your settings and Save the Page.

Step 7. Preview the changes by clicking on exit visual builder.

And you are done…

Similarly, you can check out the other effects sets too and add it to your page design the way you want.

If an effect is causing issues you can simply remove the CSS class disable the effect then you are back to where you started.

If you have anything more to know about this plugin, we’d love to have a conversation with you. Simply send us a message to our Facebook Page.