Add Labels Above Fields In The Divi Login Module

Jan 15, 2021 | 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 *

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month