🎁 Don't miss Divi's Limited Time Deal! Get 10% off Get Deal

Add Labels Above Fields In The Divi Login Module

Blog, Divi Tutorial | 0 comments

This article has the steps to show labels above fields of the Login module in Divi theme.

Like the contact form module the Login module does not show labels above the fields by default. There is only placeholder text inside the fields of the login form.

The labels are present in the login form they are just hidden by default. We can use custom css to show the labels above fields.

The steps and the code below will only work for the login module. If you want to show labels on contact form module then check the article how to add label above input fields in contact form module.

1. Add CSS Class To Show Labels In Login Module

The first step is to add a custom CSS Class to the Login module. This is so we can catch separately and not affect any other modules on the website.

Open the Login Module Settings. Then go to Advanced > CSS ID & Classes > CSS Class and the class lwp-login-label.

If you are not sure where to add the class then here is a screenshot to help.

Login form custom css class to show labels

2. Add CSS Code To Show Labels in Theme Options

The second step after adding the CSS Class in the module is to add custom css code in the theme options.

Go to your WordPress Dashboard > Divi > Theme Options > General > Custom CSS and then add the following code.

.lwp-login-label label.et_pb_contact_form_label {
    display: block!important;
}

If you are not sure where to add the code then please check the screenshot below.

Custom CSS show labels above input field

That’s it, you should see the labels above the login for now.

3. Hide Placeholder Text Inside Fields (Optional)

If you would like to hide the placeholder text that you see inside the fields. Then you can do so by updating the module settings.

Open Login Module Settings > Design > Fields > Fields Text Color and then set the color to transparent.

Here is a screenshot of where you can find the option to change Field Text Color.

Login module field text color

Here are a few other Divi tutorials that you might like to read.

Leave a comment below if you have any questions. Subscribe to the Newsletter to receive the latest tutorials in your inbox.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Check out this Amazing Divi Plugin Bundle

Save 25% by Purchasing the Bundle instead of Each Plugin Individually.

Learn More!

Divi Hosting Recommended By Elegant Themes

Get Started From Just $1.99 Per Month