Gravity Forms Styler Module for Divi is a plugin to be had within the Divi Market that makes it simple to fully customise the styling of your Gravity Bureaucracy proper throughout the acquainted Divi Builder interface. With this plugin, you’ll upload Gravity Bureaucracy for your Divi layouts identical to you could another module. The use of the choices within the design tab, you’ve complete regulate over every shape side.

One distinctive function of this plugin is that you’ll preview all of the shape, the shape with validation mistakes, and the affirmation message web page proper throughout the Divi Builder. On this product spotlight, we’ll take a better take a look at the Gravity Bureaucracy Styler Module for Divi and lend a hand making a decision if it’s the correct product for you.

Let’s get began!

Putting in the Gravity Bureaucracy Styler Module for Divi

First, be sure the Gravity Bureaucracy plugin is put in and activated to your web site. Moreover, acquire the Gravity Bureaucracy Styler Module for Divi plugin from the Divi Market and obtain the plugin report.

To put in the plugin, open the Upload New web page below the Plugins heading within the WordPress dashboard. Click on the Add Plugins button, then click on Make a choice Record to make a choice the plugin report out of your laptop. In the end, click on Set up Now, and the plugin will probably be added for your website online.

As soon as the plugin is put in, click on Turn on Plugin.

Gravity Bureaucracy Styler Module for Divi

The Gravity Bureaucracy Styler Module for Divi is a module this is added to the Divi Builder, this means that that you’ll upload Gravity Bureaucracy any place you should upload another Divi module, supplying you with without equal flexibility on your layouts and designs. Get started by means of including a brand new web page for your web site and make a choice the Divi Builder possibility.

At the new web page, click on the gray plus icon to insert a module. Choose the Gravity Shape module from the listing.

Content material Settings

Open the choices for the Gravity Shape module. The primary possibility, titled “Shape” permits you to make a choice the Gravity Shape you wish to have to show.

You’ll additionally customise the name and outline proven at the shape. You’ll disguise every of those components, set a customized name or description, or show the name or description set within the Gravity Bureaucracy settings.

Subsequent, you’ll allow Ajax for shape submissions. If enabled, the web page won’t reload after shape submission. You’ll specify the beginning tab index for the shape fields and default box values within the content material settings.

Background

Within the content material tab, you’ll additionally upload a background to the Gravity Bureaucracy module. The use of Divi’s in depth background choices, you’ll upload a background colour, gradient, symbol, video, trend, or masks to create distinctive layouts to your shape.

Design Settings

Now, let’s transfer over to the design tab. Here’s the place you’ll solely customise the design of each part within the shape.

Font

Underneath the font tab, you’ll set the types for the textual content within the shape. On this phase, you’ll set the font, font weight, taste, alignment, colour, textual content measurement, letter spacing, line top, and textual content shadow. Right here, I set the font and font colour.

Shape Heading

Within the shape heading settings, you’ll customise the styling of the shape heading font, name font, padding and margin, border, and background. With those choices, you’ll solely customise the heading phase break away the remainder of the shape. For this case, I larger the dimensions of the shape name textual content.

Fields

The fields atmosphere phase is the place you’ll set the styling of the shape fields, together with the background colour, textual content colour, focal point styling, margin and padding, font styling, and border styling. On this phase, I set the sphere colour to white.

I additionally enabled focal point borders. This is applicable distinctive styling to the border of the lively box, as you’ll see within the screenshot.

Fields Error

Subsequent, the fields error phase is the place you’ll taste the textual content, background, and border colours for the shape fields error.

Labels

Within the labels phase, you’ll taste the label textual content, set the padding and margin, taste the border, and upload a background or field shadow. For this case, I larger the label textual content measurement and adjusted the colour. I additionally got rid of the ground padding.

Required Textual content

The following phase is the place you’ll taste the desired textual content. The choices mean you can taste the asterisk that looks subsequent to the desired fields.

Sub Labels

Subsequent is the sub labels settings. Right here, you’ll customise the styling of the sub label textual content, padding and margin, border types, background, and field shadow. I set the sub label textual content colour to gray and altered the highest margin.

Fields Description

The fields description settings are very similar to the ultimate, the place you’ll customise the textual content styling, padding and margin, border types, background, and field shadow. I adjusted the margins on this instance to carry the outline and name nearer in combination.

Subsequent, you’ll set the sphere validation font styling within the fields validation atmosphere. Moreover, you’ll customise the padding and margin, border types, background, and field shadow.

Error Notification

The mistake notification settings are very equivalent, with choices to customise the font, spacing, border, background, and field shadow.

Affirmation Message

The following phase is for customizing the affirmation message. You’ll use the preview possibility on the best to view the affirmation message structure.

Radio Buttons

Within the radio buttons settings, you’ll set the radio colours, textual content styling, and listing spacing. Right here, I changed the checked background colour.

Checkboxes

In a similar fashion, you’ll trade the checkbox colours, textual content styling, and listing spacing on this phase.

Record Uploads

The report uploads phase can also be custom designed right here. You’ll customise the font styling, spacing, border, background, and field shadow.

Phase Damage

Right here you’ll customise the font styling for the phase wreck description and heading and customise the spacing, border, background, and field shadow.

Pricing Fields

You’ll additionally customise the Gravity Bureaucracy pricing fields the use of this module. You’ll taste the product value, transport value, and general value fields.

Growth Bar

Subsequent is the growth bar possibility. The growth bar seems within the shape if there are a couple of pages and gives a visible indicator for a way a ways alongside within the shape you might be. Within the design settings, you’ll customise the styling of the growth bar. You’ll set the colours, the bar top, customise the font choices, upload a border, and alter the spacing.

Shape Footer

Within the shape footer choices, you’ll set the button alignment, spacing, border types, background, and field shadow types.

Button Styling

Subsequent are 4 sections the place you’ll customise the buttons within the shape: Publish Button, Web page Navigation Buttons, Save and Proceed Button, and Choose All Button. In every of those sections, you’ll allow customized button types to switch the styling to check the design of your shape.

Sizing

Within the sizing settings, you’ll alter the shape width, top, and alignment. Right here, I set the width to 75% and the alignment to heart.

Spacing

Subsequent, you’ll adjust the margin and padding for the shape. I added some padding to every aspect for this case.

Border

Within the border settings, you’ll upload a border across the shape. Right here, I added a blue border.

Field Shadow

Subsequent, you’ll upload a field shadow to the shape.

Filters

Right here, you’ll use other filters to switch how the shape is displayed.

Turn into

Within the rework settings, you’ll alter how the shape seems the use of scale, translation, rotation, skew, and transform-origin settings.

Animation

In the end, you’ll practice an animation impact to the shape on this phase. You’ll make a choice from seven other animation types and customise the animation length, prolong, depth, and extra.

Predesigned Layouts

Gravity Bureaucracy Styler Module for Divi additionally comes with get admission to to a few predesigned layouts for fully-styled bureaucracy. You’ll obtain the layouts from the plugin creator’s website online. Those layouts are a good way to get a head get started at the styling procedure.

Gravity Bureaucracy Styler Module for Divi Format Instance

Here’s one instance of the best way to taste your Gravity Shape the use of the Gravity Bureaucracy Styler Module for Divi.

First Web page

2nd Web page

Validation Error

Affirmation Web page

Acquire Gravity Bureaucracy Styler Module for Divi

Gravity Bureaucracy Styler Module for Divi is to be had within the Divi Marketplace. It prices $39 for limitless website online utilization and 1 12 months of toughen and updates. The cost additionally features a 30-day money-back ensure.

Ultimate Ideas

Gravity Forms Styler Module for Divi brings all the serve as and design flexibility of Divi for your bureaucracy constructed with Gravity Bureaucracy. With such a lot of techniques to customise the styling of every part, the design choices are nearly never-ending. Should you’re uninterested in the use of Customized CSS to reach your shape styling and wish a very simple option to customise Gravity Bureaucracy the use of the Divi Builder, this can be an excellent product for you. We would like to listen to from you! Have you ever attempted the Gravity Bureaucracy Styler Module for Divi? Tell us what you consider it within the feedback!

The publish Divi Product Highlight: Gravity Forms Styler Module for Divi gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more