Gravity Bureaucracy Styler Module for Divi is a plugin available inside the Divi Marketplace that makes it easy to completely customize the styling of your Gravity Paperwork right kind all through the familiar Divi Builder interface. With this plugin, you’ll be capable to add Gravity Paperwork in your Divi layouts very similar to you’ll be able to some other module. Using the decisions inside the design tab, you’ve got whole control over every form facet.

One unique feature of this plugin is that you just’ll be capable to preview all the form, the form with validation errors, and the confirmation message internet web page right kind all through the Divi Builder. In this product highlight, we’ll take a greater check out the Gravity Paperwork Styler Module for Divi and have the same opinion you decide if it’s the most productive product for you.

Let’s get started!

Putting in place the Gravity Paperwork Styler Module for Divi

First, make certain the Gravity Paperwork plugin is installed and activated in your internet web page. Additionally, gain the Gravity Paperwork Styler Module for Divi plugin from the Divi Marketplace and procure the plugin report.

To position within the plugin, open the Add New internet web page beneath the Plugins heading inside the WordPress dashboard. Click on at the Upload Plugins button, then click on on Make a selection Document to select the plugin report from your laptop. Finally, click on on Arrange Now, and the plugin can also be added in your website.

As quickly because the plugin is installed, click on on Activate Plugin.

Gravity Paperwork Styler Module for Divi

The Gravity Paperwork Styler Module for Divi is a module that is added to the Divi Builder, which means that you just’ll be capable to add Gravity Paperwork anywhere it’s profitable to add some other Divi module, providing you with the ultimate flexibility for your layouts and designs. Get began by means of together with a brand spanking new internet web page in your internet web page and make a choice the Divi Builder selection.

On the new internet web page, click on at the grey plus icon to insert a module. Select the Gravity Form module from the record.

Content material subject matter Settings

Open the decisions for the Gravity Form module. The main selection, titled “Form” lets in you to select the Gravity Form you want to turn.

You’ll moreover customize the title and description confirmed on the form. You’ll quilt every of the ones elements, set a custom designed title or description, or display the title or description set inside the Gravity Paperwork settings.

Next, you’ll be capable to permit Ajax for form submissions. If enabled, the internet web page received’t reload after form submission. You’ll specify the start tab index for the form fields and default field values inside the content material subject matter settings.

Background

Throughout the content material subject matter tab, you’ll be capable to moreover add a background to the Gravity Paperwork module. Using Divi’s extensive background alternatives, you’ll be capable to add a background color, gradient, image, video, pattern, or mask to create unique layouts on your form.

Design Settings

Now, let’s switch over to the design tab. Right here’s where you’ll be capable to only customize the design of every section inside the form.

Font

Beneath the font tab, you’ll be capable to set the categories for the text inside the form. In this phase, you’ll be capable to set the font, font weight, style, alignment, color, text measurement, letter spacing, line best, and text shadow. Proper right here, I set the font and font color.

Form Heading

Throughout the form heading settings, you’ll be capable to customize the styling of the form heading font, title font, padding and margin, border, and background. With the ones alternatives, you’ll be capable to only customize the heading phase minimize unfastened the rest of the form. For this example, I better the scale of the form title text.

Fields

The fields atmosphere phase is where you’ll be capable to set the styling of the form fields, in conjunction with the background color, text color, focus styling, margin and padding, font styling, and border styling. In this phase, I set the sphere color to white.

I moreover enabled focus borders. That is acceptable unique styling to the border of the lively field, as you’ll be capable to see inside the screenshot.

Fields Error

Next, the fields error phase is where you’ll be capable to style the text, background, and border colors for the form fields error.

Labels

Throughout the labels phase, you’ll be capable to style the label text, set the padding and margin, style the border, and add a background or box shadow. For this example, I better the label text measurement and adjusted the color. I moreover removed the bottom padding.

Required Text

The next phase is where you’ll be capable to style the desired text. The decisions will allow you to style the asterisk that appears next to the desired fields.

Sub Labels

Next is the sub labels settings. Proper right here, you’ll be capable to customize the styling of the sub label text, padding and margin, border varieties, background, and box shadow. I set the sub label text color to grey and adjusted the best margin.

Fields Description

The fields description settings are similar to without equal, where you’ll be capable to customize the text styling, padding and margin, border varieties, background, and box shadow. I adjusted the margins in this example to hold the description and title closer together.

Next, you’ll be capable to set the sphere validation font styling inside the fields validation atmosphere. Additionally, you’ll be capable to customize the padding and margin, border varieties, background, and box shadow.

Error Notification

The error notification settings are very similar, with alternatives to customize the font, spacing, border, background, and box shadow.

Confirmation Message

The next phase is for customizing the confirmation message. You’ll use the preview selection on the most productive to view the confirmation message construction.

Radio Buttons

Throughout the radio buttons settings, you’ll be capable to set the radio colors, text styling, and record spacing. Proper right here, I modified the checked background color.

Checkboxes

Similarly, you’ll be capable to trade the checkbox colors, text styling, and record spacing in this phase.

Document Uploads

The report uploads phase may also be customized proper right here. You’ll customize the font styling, spacing, border, background, and box shadow.

Segment Damage

Proper right here you’ll be capable to customize the font styling for the phase break description and heading and customize the spacing, border, background, and box shadow.

Pricing Fields

You’ll moreover customize the Gravity Paperwork pricing fields the use of this module. You’ll style the product price, supply price, and general price fields.

Construction Bar

Next is the expansion bar selection. The expansion bar turns out inside the form if there are multiple pages and offers a visual indicator for some way a long way along inside the form you may well be. Throughout the design settings, you’ll be capable to customize the styling of the expansion bar. You’ll set the colors, the bar best, customize the font alternatives, add a border, and change the spacing.

Form Footer

Throughout the form footer alternatives, you’ll be capable to set the button alignment, spacing, border varieties, background, and box shadow varieties.

Button Styling

Next are 4 sections where you’ll be capable to customize the buttons inside the form: Put up Button, Internet web page Navigation Buttons, Save and Continue Button, and Select All Button. In every of the ones sections, you’ll be capable to permit custom designed button varieties to modify the styling to check the design of your form.

Sizing

Throughout the sizing settings, you’ll be capable to regulate the form width, best, and alignment. Proper right here, I set the width to 75% and the alignment to heart.

Spacing

Next, you’ll be capable to regulate the margin and padding for the form. I added some padding to every side for this example.

Border

Throughout the border settings, you’ll be capable to add a border around the form. Proper right here, I added a blue border.

Box Shadow

Next, you’ll be capable to add a box shadow to the form.

Filters

Proper right here, you’ll be capable to use different filters to modify how the form is displayed.

Turn into

Throughout the transform settings, you’ll be capable to regulate how the form turns out the use of scale, translation, rotation, skew, and transform-origin settings.

Animation

Finally, you’ll be capable to observe an animation have an effect on to the form in this phase. You’ll make a choice from seven different animation varieties and customize the animation duration, prolong, intensity, and further.

Predesigned Layouts

Gravity Paperwork Styler Module for Divi moreover comes with get admission to to a couple of predesigned layouts for fully-styled forms. You’ll download the layouts from the plugin creator’s website. The ones layouts are a good way to get a head get began on the styling process.

Gravity Paperwork Styler Module for Divi Layout Example

Right here’s one example of style your Gravity Form the use of the Gravity Paperwork Styler Module for Divi.

First Internet web page

second Internet web page

Validation Error

Confirmation Internet web page

Gain Gravity Paperwork Styler Module for Divi

Gravity Paperwork Styler Module for Divi is available inside the Divi Market. It costs $39 for endless website usage and 1 12 months of improve and updates. The price moreover includes a 30-day money-back ensure that.

Final Concepts

Gravity Bureaucracy Styler Module for Divi brings all the function and design flexibility of Divi in your forms built with Gravity Paperwork. With such a large amount of techniques to customize the styling of every section, the design alternatives are nearly endless. While you’re bored stiff in the use of Custom designed CSS to achieve your form styling and need an easy option to customize Gravity Paperwork the use of the Divi Builder, this is a tremendous product for you. We want to pay attention to from you! Have you ever ever tried the Gravity Paperwork Styler Module for Divi? Let us know what you imagine it inside the comments!

The submit Divi Product Spotlight: Gravity Bureaucracy Styler Module for Divi seemed first on Sublime Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more