Select Page

How to Style Gravity Forms with Divi

In this quick tutorial, we will show you how to style Gravity Forms with Divi using the Gravity Forms Styler plugin. We will show you how to use the default settings,  and then how to add your unique styles using the Theme Customiser settings.

How to use the Gravity Forms Styler plugin video

Step 1 – Insert a Gravity Form on your page

First of all, you need to insert a Gravity Form into a page on your website. You will notice that at this point It will have the normal default square styling applied to it. And that looks kind of ugly. We are going to change that to make it look a whole lot more professional.

Step 2 – Install the Gravity Form Styler Plugin

Now you need to install and activate the Gravity Form Styler plugin. (Please note you must be a Premium Member to have access to this plugin with your Divi Framework Membership.)

Go to Divi Framework on your WordPress Dashboard and download the Gravity Forms Divi Plugin.

How to style Gravity Forms with Divi -Download Gravity Forms Styler Plugin from your membership

Next, go to Plugins to install the Gravity Form Styler and click ‘Activate’. Activating the plugin will immediately apply the new default styles to all your forms.

How to style Gravity Forms with Divi

Important Tip: Clear your server cache and your browser cache. This will ensure that the new styles load.

Now you can go back to your page with the form and click refresh. You will see that a load of new styles have been added. The form now looks a whole lot better and much more ‘Divi-like’. Just like the example below from the Divi Framework website.

How to style Gravity Forms with Divi - Gravity Form with default styles applied

All of the form fields and the button now look fantastic, and this is just with the standard setup.

If you’re happy with how the form looks at this point you could leave it at that. Or you can go ahead and further customise the form styles using the Theme Customiser.

Step 3 – Customise your Gravity Form styles with the Theme Customiser

To do that, leave the page you’re on and go into your Theme Customiser (find it on your WordPress Dashboard by going to Divi > Theme Customiser). Once you are inside the Theme Customiser, find and click on Ultimate Gravity Forms Style. Here you can do all sorts of different things.

How to style Gravity Forms with Divi - Theme Customiser Settings

Here you will find the following settings, and remember, these are for every single form on your site:

General – allows you to set a background colour or change the padding.

Title – control the font, size, style, colour and spacing. These are the standard stying features.

Description – this is control over the description text if you choose to turn that feature on inside your form.

Labels – these are the labels over each of your items. Again using the standard styling features in Divi.

Input – control the font, colour, style, line height etc.

Form Button – set your button style, including background colour, hover colour, font, icon, orientation, size, borders etc. All the standard Divi features.

Progress Bar – set the background colour and font colour.

Form Border – if you want a form border, you can set the border style, size and colour.

Error – allows you to customise the error message when it is displayed.

Create beautiful forms with the Gravity Forms Styler Divi plugin - Theme Customiser Settings

Step 4 – Publish and you’re all done!

When you are finished you can click Publish and you’re ready to go!

This means that now whenever you insert a Gravity Form on your website, all of your forms will have the same styles applied. It’s a great result that takes very little time! Now you will be able to focus on building your forms, instead of spending time on styling every time you add a new form. Now that’s a great time saver.

That’s a quick introduction to the Gravity Forms Divi Plugin from Divi Framework. It’s a premium product so we encourage you to become a Premium Member. We hope you find the plugin useful and that it allows you to start making some beautiful looking Gravity Forms!

We also have a Divi Module for Gravity Forms, which gives you even more style control over specific forms. You can find more information on that on our product page.

Divi Framework API Activation Update

We have a BIG update to announce for Divi Framework. So what is it? Well, it’s how you actually download and activate your plugins, themes, layouts and other elements from Divi Framework.

So What’s Changed?

We have changed the way you download and install our products, making the activation process much simpler for you!

Using the old activation process, what used to happen is you would…

1. Login to the Divi Framework website
2. Download a particular plugin or item
3. Install it on your website
4. Go back to the Divi Framework website and get an API Key
5. Enter the API Key with your email address on your website to activate the plugin.

This was a long process to activate one plugin at a time.

On top of that, we were using some third party code to manage our API activations. And it wasn’t working as well as we would have liked. It wasn’t ‘cutting it’, so to speak, for where we want to take Divi Framework in the future.

So what we decided to do was to build an all-new plugin. And we have called it ‘Divi Framework’.

We think you are going to love the new process. It’s so much simpler and less complicated than before.

Using the new activation process, what happens now is…

1. You log in to the Divi Framework website with your Free or Premium Membership
2. You download the Divi Framework plugin (you can find it under the Dependencies tab on your ‘My Account’ dashboard)
3. Install it on your website
4. Now you have a new Divi Framework icon on your WordPress Dashboard where you can log in with your member details and access everything directly on your website.

And that’s it! Through your one login, the new plugin links to all the products that you have access to through your membership. All your activations and automatic updates are taken care of.

Divi Framework Hub displaying Active Memberships and Plugins

More Planned Updates and Improvements!

Now at the moment, the new process is pretty simple. You log in once and that deals with the activations and the automatic updates. But, in the future, it’s going to get a little bit more sophisticated.

For example, you’ll be able to install layouts if you’re using the Divi Theme. You’ll be able to install child themes and plugins directly from the Divi Framework members area onto your WordPress website.

Now, this is a big improvement but it does mean a few other changes. What are they?

1. Easier Activation Process

Before, every product on the Divi Framework website was a product in the system. Meaning you had to add things to cart. And when a product was added to cart, the product license got added to your membership. All that is gone!

Now, once you’re signed up and logged in as a member everything gets turned on inside your account. Making it a lot easier to manage.

2. Two Levels of Membership – Free and Premium

We have changed our membership to now include a Free and a Premium option. So if you want to get those free plugins, you’ll be able to use the Free Membership. The Premium Membership is the same all-inclusive plan and is the best value option.

3. The New Courses Area

That’s right, we finally have our E-Learning area up and running. Already, you can try out these great courses:

1. SEO for Divi
2. App Script and WooCommerce API
3. Child Themes for Divi
4. Footer in Divi Builder

We will be releasing more courses very soon on all our plugins and other material.

How many of these courses will be free? Some will be free and some will be premium. So depending on your membership will determine what you get access to. For all our courses, our goal is for you to get the most out of your Divi websites, and the most out of the plugins that we give you.

Ok well, that’s it for now. If you haven’t already, we encourage you to jump on in and sign up. Why not try out the Free Membership and let us know what you think of our plugins? You have absolutely nothing to lose!

We hope you love the changes. We certainly enjoyed changing it all over and making the whole process easier for you!

10 Free Divi Layouts You Need to Download Today

10 Free Divi Layouts You Need to Download Today

Did you know that the Divi community offers free layouts? It’s true! Check out this article to learn about 10 free Divi layouts that you need to download today.


The Top 10 Best Divi Plugins

The Top 10 Best Divi Plugins

Looking to expand the functionality of Divi? These plugins will do the trick. Check out this article to learn about our top 10 favourite Divi plugins!

Keyword(s): Divi plugins

Divi has emerged as one of the most popular WordPress themes out there. More than 930,921 websites are currently using it.

Flexible and versatile, Divi is perfect for any niche. Whether you’re running an online store, a corporate website, or a blog, look no further.

One of the reasons why this theme is popular is its accessibility. In fact, 34 percent of customers use it to build websites for themselves. Another 66 percent rely on Divi to build sites for their clients.

With Divi, it’s no need to code or have programming skills. Once you set up a theme, you can install plugins to enhance its functionality and visual appeal.

Ready to take your site to the next level? Let’s see what makes this WordPress theme so great and how to choose the best Divi plugins for your needs:

Why Divi?

Launched in 2013, Divi has quickly become a favourite choice for webmasters worldwide. It’s easy-to-use, convenient, and highly customizable.

The best part is that you can use it to create beautiful sites without writing a single line of code.

What most users love about this theme is its page builder. This intuitive front editor allows you to create, update, and personalize web pages with a few clicks. Even if you’re a total newbie, you can use Divi to design stunning websites.

Each element of the theme is fully customizable. Users can easily change the colours, fonts, column types, and more. Plus, they have access to over 20 pre-made layouts that make web design a breeze.

Divi is marketed as a multi-purpose WordPress theme. This makes it ideal for businesses in every niche, from art to marketing and real estate. Its drag-and-drop features allow you to customize the design within seconds.

Better yet, users can install Divi plugins to customize their favourite theme.

Some plugins, such as the Divi Custom Post Builder, allowing you to design beautiful single pages. Others, such as the Divi Testimonials Plugin, make it easier for customers to leave feedback on your site. This helps increase brand awareness and builds trust.

Now you might wonder what plugins are best for your site. After all, there are dozens of options available.

To help you out, we’ve compiled a list of the most beloved Divi plugins and their features. Let’s get into it!

Video Toolkit

Nowadays, videos are all the rage. This type of content has become a meaningful part of digital marketing.

Experts say that Internet video traffic will make up over 80 percent of all online traffic by 2019. The videos shared on social networks generate 1,200 percent more traffic than images and text combined.

With the Divi Video Toolkit, it’s easy to place videos inside page layouts.

This plugin enables users to upload and manage video content on their websites effortlessly. Plus, they can create their video libraries and even customize their Video player.

Instagram Feed Divi Module

With over 200 million monthly active users, Instagram can take your business to a whole new level. It’s a perfect way to expand your reach, increase brand awareness, and connect with industry influencers.

The Instagram Feed Divi Module appeals to those who want to get the most out of this social network. Once installed, it allows you to customize your Instagram feed and enhance your website’s visual appeal.

Divi Testimonials Plugin

A beautiful website isn’t enough to attract customers. As a business owner, you must give people a reason to choose your brand. This is where testimonials come in handy.

Customers are more likely to trust a website featuring success stories and testimonials. This shows that your products or services offer great value for money.

With the Divi Testimonials Plugin, you can integrate customer feedback into your site. This handy tool allows you to manage, customize, and categorize testimonials in a single place.

WooCommerce Product Builder

Tired of your old WooCommerce layout? Want to give your online store a makeover?

In this case, Divi’s Kingdom WC Product Builder will do the trick!

Rated as one of the best Divi plugins, it gives you full control over every piece of your website’s content.

Once installed, it adds over 14 shortcodes, 20 WooCommerce modules, and unlimited layouts to your site. Plus, you’ll find it easier to edit product pages, add shopping carts, and personalize customers’ journey.

ACME Divi Modules

Divi plugins aren’t just flexible and versatile but convenient too. Some are actually free.

ACME Divi Modules, for instance, costs nothing to install. Yet, it offers excellent functionality.

Webmasters can use it to change image size and ratio, create custom slugs, or add a masonry layout. Basically, this tool adds extra modules to the Divi Builder to enhance its functionality.

Restaurant Menu Plugin

This is one of the few Divi plugins available for restaurant owners. It makes it easy to create and manage your restaurant menu, add special tags, and customize your site.

With the Restaurant Menu Plugin, you can turn any website into an artwork. Your restaurant menu will look professional and unique, with multiple pricing options, different currency symbols, and custom features.

This tool isn’t just for restaurants. It’s also a great choice for cafes, smoothie bars, cocktail bars, and other venues. You’ll love its styling options and one-of-a-kind menu layouts!

It also has recently added Schema support which is awesome for your Divi SEO.

FAQ Plugin

Regardless of your type of business, customers have questions that need to be addressed.

If you’re running a cafe, they may ask about catering services or special events. In case you sell products online, clients will want to know more about shipping, discounts, or payment options.

This is where Divi plugins come in handy. The FAQ plugin enables users to place FAQ listings on their sites and manage them easily. This will lead to increased customer engagement and higher revenue.

Adding an FAQ section on your site can free up your time and boost sales. Today’s customers want answers fast. They rarely take the time to send emails or contact a business before buying its products.

Plus, they often search for services or products while on the go. They visit your website from their phones while driving or crossing the street.

An FAQ section makes it easier for them to find the information they are looking for. The more descriptive you are, the better.

Why waste time answering the phone or email when you can offer information on your site?

Divi Overlays

With Divi Overlays, it’s easy to create stunning pages and pop-ups for your eCommerce site.

This handy plugin can add just about any type of content in the overlay. This means you’re no longer confined to single layered web pages.

Use it to create beautiful pop-ups, opening animations, and image galleries that grab customers’ attention.

The latest version features automatic triggers. Users can set exit intent triggers, timed delayed triggers, and even URL triggers. This allows for a personalized shopping experience and higher retention rates.

Note – we now have a new plugin called Divi Popover that is does pretty much what this plugin does.

Gravity Form Styler

Customize your email, contact, and other online forms with a few clicks! The Gravity Form Styler allows users to create professional looking forms that catch the eye.

It’s one of the best Divi plugins for setting up and personalizing online forms. You can customize the form layout, description, input, title, and much more.

Unlike other similar plugins, the Gravity Form Styler enables you to import or export settings and edit all fields. This helps prevent common issues like button colours with the same colour font as the background.

Plus, it saves you time and leads to a better customer experience.

Divi Footer Injector

With this free plugin, you can give your website footer a complete makeover.

The Divi Footer Injector is easy to install and set up. Once it’s up and running, all the changes are instantly implemented across your site.

This tool allows users to create custom website footers within seconds. Moreover, it automatically injects your footer layout into every page, so you won’t have to make these changes manually or write CSS.

Try it yourself – it’s free and requires no coding skills. On top of that, it allows you to use global Divi Library items as your site footer.

Choose the Best Divi Plugins for Your Business

These are just a few of the many Divi plugins available. When used right, they can help grow your business and boost your marketing efforts.

Choosing the best plugins comes down to your business needs.

For instance, if you have an online store, the Woo Member Restrict Divi Module is worth checking out. Real estate agents and other business owners can use the Divi VR View to display virtual 3D photos showing their products.

Take the time to familiarize yourself with Divi. Research the most popular plugins and experiment with different layouts. Play with colours, fonts, and other styling options.

So, what are you waiting for? Check out our online shop for the latest Divi plugins and resources!

Which Gravity Forms design tool is right for me?

In this post, I will compare the differences between our Gravity Forms design tools. I will talk about what each product does and help you to decide which one is right for you. I’ll also look at what other Gravity Forms styling tools are out there. All things said and done, choosing the right plugin tool should save you time. This article will help guide you to make the best-informed choice. So let’s get started!

Divi & Gravity Forms – A great combination!

Divi and Gravity Forms are a great combination and we have been using them for years on our own websites. Not only is Gravity Forms easy to extend, it allows you to integrate with third-party services. Some of these include PayPal, Stripe, Zapier, Agile CRM, Zoho CRM and MailChimp to name a few. We have written some informative articles in our blog on using Gravity Forms with Divi.

Why we made our own plugins for Gravity Forms

We created our plugins because styling Gravity Forms in Divi isn’t that easy. It requires you to write custom CSS which we didn’t always want to be doing. We wanted a way to style our forms quickly and easily. To solve this problem we create our own plugins. These are the Ultimate Gravity Forms Styler and the Gravity Forms Shortcode Injector. Next, I will explain what each of these plugins does and why you would use them.

1. Gravity Forms Styler The Gravity Forms Styler styles all your forms across your whole site. Use the Theme Customizer to control the settings. If you want global styles for your Gravity Forms this plugin will suit you. Set your Gravity Form styles once in the Theme Customizer and see them updated everywhere. Quick and easy!

2. Gravity Forms Shortcode Injector Module The Gravity Forms Shortcode Injector is an individual styler for individual forms. It has a custom Divi Module that allows you to control each form as you insert it into a page. You should use this plugin if you have forms on your site that needed to have individual styling. For example, you might want to add a different background colour or border to one form and not another. This plugin has all the customisation settings you need to accomplish this and more.

A Technical Comparison

We have created a comparison table in our E-Learning and Course area to visually compare the features of both products.

To summarise, it really it depends on how you use your website to know which of our Gravity Forms design tools is right for you. They are both great tools for styling your Gravity Forms. Could you use both on the same site? Yes, you could. The Divi Module settings would override the Theme Customizer settings of either plugin.

Other Gravity Forms Plugins

Now let’s have a look at what other Gravity Forms design tools are out there. Here are three alternative products for styling Gravity Forms which are worth considering.

1. Surbma – Divi & Gravity Forms “This plugin adds the same styling for Gravity Forms as Divi Theme has for its own forms. This is a very lightweight plugin with minified CSS to reduce the loading time as low as possible.” We used this plugin for some years and found that although it is a decent tool to use, we still had to write custom CSS. The main issue is that it pulls everything out of the theme accent colour. So if your theme accent colour is the same as your button colour it doesn’t work.

2. Divi Styling Add-On for Gravity Forms by Divi Space  “Divi looks amazing, Gravity forms is amazing, but together they both look out of place. This plugin eliminates that, Divi Styling for Gravity Forms brings the beauty of Divi to the Power & Logic of Gravity Forms. Simply install the plugin and activate, and your Gravity Forms will look and feel as if they are meant to be there. They will adopt the styling of Divi and respect the customizations you’ve made in the “Theme Customizer”

Note: We have not tested this plugin, so please let us know in the comments if you have used it and what you think.

3. Gravity Forms Styles Pro Add-on  This plugin works within Gravity Forms and comes with a lot of customisation options.

Note: We have not tested this last plugin, so please let us know in the comments if you have used it and what you think.

Tell us what you think…

Hey, we’d like to find out what Gravity Forms plugins or add-ons you’re using with Divi and what you find useful. Also, if you have created something great please let us know as we would be happy to add it to the article.

You might be interested in these related articles:

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation