Divi Gravity Forms is a plugin for the Divi Builder that lets you customise your Gravity Shape from the Divi Builder. The plugin provides a brand new module to the Divi Builder with choices to modify the design of each side of the shape. If you’re a Gravity Shape person, this plugin will assist combine Divi and Gravity Paperwork and permit you to trade the shape design similar to you could some other part in your Divi web page. On this article, we’ll check out the settings that include the Divi Gravity Paperwork Module and display you ways you’ll customise your shape inside the Divi Builder.
Let’s get began!
Putting in Divi Gravity Paperwork
First, it is very important have the Gravity Paperwork plugin put in and activated in your web site.
Divi Gravity Paperwork will also be put in similar to some other WordPress plugin. Open the plugins web page within the WordPress dashboard and click on Upload New. Click on Add Plugin on the most sensible, then choose the .zip plugin document out of your pc.
As soon as the plugin is put in, turn on the plugin.
Divi Gravity Paperwork
The Divi Gravity Paperwork plugin means that you can upload and customise the Gravity Shape proper inside the Divi Builder. To get began, you’re going to first wish to construct the shape inside the Gravity Paperwork settings web page. After you have laid out the elemental construction and serve as of your touch shape, you’ll transfer over to the Divi Builder to customise the design.
Open your web page within the Divi Builder and click on the gray plus icon to insert a brand new module. Choose the Gravity Shape module from the record.
Content material Settings
Open the Gravity Shape module settings to the content material tab. Along with the default Background and Admin Label sections, the module comes with a brand new segment known as Shortcode Parameters.
Shortcode Parameters
Choose the Gravity Shape you wish to show from the Shape ID dropdown. As soon as decided on, your shape will seem at the web page.
Inside the shortcode parameters settings, you’ll additionally make a selection to turn or conceal the name and outline and allow or disable Ajax. Moreover, you’ll specify the beginning tab index for the shape fields and specify default box values.
Design Settings
The majority of the customization settings for Divi Gravity Paperwork is positioned below the Design tab. Those settings provide you with nice flexibility along with your shape’s look, and you’ll trade the design of just about each side of your shape. Let’s check out the other design settings you’ll use.
Shape Titles
First is the shape name settings.
You’ll be able to trade the name margin padding, font settings, alignment, colour, dimension, spacing, line peak, and shadow.
Shape Description
The shape description settings are the similar as the shape name settings. This is the shape description with custom designed font, textual content colour, textual content dimension, and line peak.
Box Wrapper
The sector wrapper settings permit you to trade the margin and padding of the fields. On this instance, I diminished the highest margin in order that the fields have been positioned nearer in combination.
Label
Underneath the label tab, you could have the entire default textual content customization choices. I custom designed the label font and adjusted the textual content colour to inexperienced.
Sub Label
The sub label settings additionally characteristic the default textual content design choices. On this instance, the sub labels are the “First” and “Closing” textual content labels beneath the identify fields. I custom designed the sub label font.
Box Description
The sector description instance is positioned above the Lengthy Query box. Right here I diminished the highest padding to deliver the textual content nearer to the label and adjusted the font.
Enter Wrapper
The enter wrapper settings permit you to trade the margin or padding across the enter field. On this instance, I diminished the highest margin, bringing the enter field nearer to the label and outline.
Enter Normal
The enter basic settings segment is the place you’ll totally customise the design of the enter field. You’ll be able to regulate the background colour, upload rounded corners, trade the border, and entirely customise the enter font settings.
Right here I added rounded corners, modified the enter background colour, modified the border colour, and adjusted the textual content font.
Textual content/Textarea
Within the textual content/textarea settings, you’ll trade the margin, padding, or upload a field shadow to the fields.
Choose
The choose segment has the similar settings because the textual content/textarea segment. You’ll be able to customise the margin, padding, and field shadow in your choose fields.
Checkbox/Radio Textual content Possibility
Right here you’ll trade the margin and padding, and customise the font for the checkbox/radio textual content possibility. I custom designed the font on this instance.
Enter Placeholder Textual content
You’ll be able to customise the font settings for the enter placeholder textual content right here. I modified the font to Montserrat.
Record Box Column Textual content
Identical settings right here because the enter box textual content segment. As soon as once more, I custom designed the font for the record box column textual content.
Segment Box Wrapper
The segment box wrapper settings permit you to trade the margin, padding, and border backside colour. I added a piece to my shape and added a most sensible margin and adjusted the border backside colour.
Segment Box Name
To customise the segment box name, I changed the font, font weight, font taste, textual content colour, and letter spacing right here.
Segment Box Description
On this instance, I added an outline to the segment and changed the font. I additionally added some backside padding so as to add area between the outline and the road.
Consent Checkbox
The design settings for the consent checkbox permit you to regulate the margin, padding, and font settings. Right here I changed the font.
Consent Description
Identical with the consent description settings, you’ll regulate the margin and padding and customise the font. On this instance, I modified the font.
Date Drop Down & Date Box
Right here you’ll trade the best margin.
Time Box
Within the time box settings, you’ll customise the AM/PM drop-down margin-left and the Time (HH/MM) Box Minimal Width.
Asterisk
Underneath the asterisk settings, you’ll trade the font colour.
Asterisk Textual content Legend
The usage of the asterisk textual content legend settings, you’ll customise the asterisk textual content legend font, dimension, spacing, and extra. On this instance, I changed the font.
Validation Error Heading
Right here you’ll customise the background colour, margin and padding, and font design for the validation error heading. This is the custom designed validation error heading, with changed padding, a special font, and a bigger font dimension.
Box Validation Error
And right here you’ll customise the sphere validation error in the similar means because the validation error heading. I added some padding to the highest, backside, and left, and changed the font. This is the outcome at the entrance finish.
Footer
With those settings, you’ll trade the footer margin and padding.
Development Bar Name
Right here you’ll regulate the development bar margin and padding in addition to the font design.
Development Bar
Within the development bar settings, you’ll regulate the development bar colour and textual content colour. I modified the development bar colour to inexperienced.
Button
Subsequent, the button settings permit you to practice customizes kinds to the shape submission button. You’ll be able to additionally trade the button alignment. Right here I modified the textual content colour, background, font, font weight, border radius, and letter spacing to taste the button.
Affirmation Message
Within the affirmation message settings, you’ll regulate how the affirmation message seems after the shape is submitted. I modified the background colour, font, and textual content colour on this instance.
And here’s the affirmation message.
Gf_left_half – CSS In a position Elegance and Gf_left_third & gf_middle_third – CSS In a position Elegance
You’ll be able to practice those CSS categories to a Gravity Paperwork box with a purpose to create extra complex layouts. Those design settings permit you to customise the best padding for the fields with those CSS categories.
Spacing
The spacing settings permit you to customise the margin and padding for all the shape. Right here I added some interior padding to all 4 facets of my shape.
Border
Within the border settings, you’ll upload a border in your shape, trade the border colour and dimension, upload rounded corners, and extra. For this situation, I added a border with rounded corners to the shape.
Field Shadow
You’ll be able to upload a field shadow in your shape with this surroundings.
Filters
The filters settings permit you to regulate the colour of your design via including a clear out.
Turn out to be
In spite of everything, the turn into settings make it easier to regulate the location of the shape at the web page.
Complicated Settings
Transferring over to the complex tab, you’ll see that the default complex sections are indexed.
If you choose the Customized CSS tab, you’ll upload customized CSS to the other components of the Gravity Shape, together with the name, description, label, textual content box, choose box, checkbox/radio box, consent checkbox label, validation error heading, button, and a lot more.
This permits you to totally customise your shape, even past the choices that Divi Gravity Paperwork provides to the Divi Builder.
Divi Gravity Paperwork Instance
This is the general results of the Gravity Shape custom designed with Divi Gravity Paperwork.
Web page 1
Web page 2
Affirmation Message
Validation Error Message
Acquire Divi Gravity Paperwork
Divi Gravity Paperwork is to be had within the Divi Marketplace. It prices $69 for limitless web site utilization and 1 yr of beef up and updates. The fee additionally features a 30-day money-back ensure.
Ultimate Ideas
Divi Gravity Paperwork makes it simple to fully design your shape inside the Divi Builder. The plugin robotically refreshes your shape after each trade you are making to be able to see probably the most up-to-date preview, proper inside the Divi Builder. Should you’re a Gravity Paperwork person designing internet sites with Divi, this can be the very best device that can assist you design and customise your paperwork with the convenience and comfort of the Divi Builder.
We would like to listen to from you! Have you ever attempted Divi Gravity Paperwork? Tell us what you take into accounts it within the feedback!
The put up Divi Plugin Highlight: Divi Gravity Forms seemed first on Elegant Themes Blog.
0 Comments