The Divi Touch Shape Module makes it simple for site guests to get in contact with you and so that you can gather knowledge out of your guests.
Via default, the Divi Touch Shape Module box labels are displayed within the enter fields. Alternatively, on occasion, you may need to show the labels above the touch shape fields. On this educational, we’ll display you easy methods to do so with slightly little bit of CSS.
What We’ll Accomplish
Our function lately is to head from this:
To this:
Let’s get to paintings!
Easy methods to Upload Labels Above the Fields in Divi’s Touch Shape Module
For this demonstration, we can use the Touch web page design from the Loose Whiskey Distillery Format Pack. If you happen to’re unfamiliar with easy methods to load premade structure packs, take a look at this weblog submit: Easy methods to Use a Premade Format Pack on Your Divi Website online.
There are two tactics we will enter customized CSS in your Divi site: by the use of the Theme Customizer, which is able to impact all touch bureaucracy throughout your site, or according to web page within the web page’s settings which is able to impact person touch bureaucracy. First, we’ll take a look at the per-page way, after which I’ll display you easy methods to upload the CSS globally.
Navigate to Your Web page
First, navigate in your touch shape web page and permit the Visible Builder.
Increase the Divi toolbar on the backside of the web page and click on the tools icon to carry up the web page’s settings. Then navigate to Complex > Customized CSS and duplicate and paste the CSS code.
That is the CSS code you’ll have to duplicate and paste into the Customized CSS field:
/* Presentations titles above the fields */
.et_pb_contact_form_label {
show: block;
}
/* Hides placeholder textual content */
.et_pb_contact_form_container .enter::placeholder {
colour: clear;
}
/* Hides replica titles on checkboxes and radios */
.et_pb_contact_field_options_title {
show: none;
}
Right here’s what we were given up to now. You’ll realize that our font styling doesn’t raise over, and there’s now a reproduction name above the dropdown box.
With the intention to repair that, we’ll upload some font styling CSS to the code and a couple of extra traces of code to take away the replica name above the dropdown box.
Right here’s the up to date ultimate code:
/* Presentations titles above the fields */
.et_pb_contact_form_label {
show: block;
font-family: 'Playfair Show';
colour: #E7E2BC;
font-size: 15pt;
font-style: italic;
margin-bottom: 15px;
}
/* Hides placeholder textual content */
.et_pb_contact_form_container .enter::placeholder {
colour: clear;
}
/* Hides replica titles on checkboxes and radios */
.et_pb_contact_field_options_title {
show: none;
}
/* Take away name above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
show: none;
}
And this is the overall consequence!
Doing This Globally
Including the code globally will impact all touch bureaucracy in your site. If you need the adjustments to use to a particular touch shape simplest, you’ll wish to upload a CSS ID to the module within the complicated tab. After doing so, position the “#” + your CSS ID in entrance of each and every CSS elegance you’re focused on within the code.
There are 3 puts you’ll be able to upload the CSS code to take impact globally. For your kid theme’s genre.css stylesheet:
Or the Customized CSS block in Divi > Theme Choices:
Or to the Theme Customizer:
And that’s it!
Extra Assets
There are such a lot of tactics you’ll be able to genre the touch shape module to make it all of your personal. Take a look at those different tutorials at the touch shape to get began!
- 5 Distinctive Techniques to Taste Divi’s Touch Shape Module
- Easy methods to Disclose an Choices Dropdown After Checking a Field in Your Divi Touch Shape
- Easy methods to Upload a Sticky Touch Shape to Your Web page
The submit Easy methods to Upload Labels Above the Fields in Divi’s Touch Shape Module seemed first on Chic Topics Weblog.
WordPress Web Design