User Login Element
The User Login Element places a login form on any page, so members, customers or staff can sign in without seeing the standard WordPress login screen. It asks for the username or email address and the password, and can show a Remember Me checkbox and links to register or reset a lost password.
Once a visitor is logged in, the same element shows a welcome line with their name and avatar and links to the Dashboard, their Profile and Logout. One element therefore serves as both the login form and a small account box.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The User Login Element
Add the User Login Element to any column. Enter a Heading and a Caption to explain who can log in, and set their colors. Text Align centers all parts or lets them follow the text flow, and Form Field Layout stacks the fields at full width or places them side by side.
Decide with Show Labels and Show Placeholders how the fields are named, and turn on Show Password Reveal Icon and Show Remember Me Checkbox if you want them. Button Span makes the Log in button full width. Form Background Color and Link Color style the form box and its links.
Enter a Redirection Link to send users to a specific page after they log in; leave it empty to return them to the same page. Add a Register Link and a Lost Password Link to show those links under the button; each link only appears when you fill it in. Failed logins return to the form with a message.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → User Login. Change them there to style every User Login at once.
General
| Heading | Description |
|---|---|
| Text Align | Choose the alignment of all content parts. “Text Flow” follows the default text align of the site. “Center” will center all elements. |
| Form Field Layout | Choose if form fields should be stacked and full width, or if they should be floated. |
| Heading | Choose a heading text. |
| Heading Color | Choose a heading color. |
| Caption | Choose a caption text. |
| Caption Color | Choose a caption color. |
| Show Labels | Controls if the form field labels should be shown. |
| Show Placeholders | Controls if the form field placeholders should be shown. |
| Button Span | Choose to have the button span the full width. |
| Form Background Color | Choose a background color for the form wrapping box. |
| Link Color | Choose a link color. |
| Show Password Reveal Icon | Controls if the password reveal icon should be displayed in the login form. |
| Show Remember Me Checkbox | Controls if the remember me checkbox should be displayed in the login form. |
| Redirection Link | Add the url to which a user should redirected after form submission. Leave empty to use the same page. |
| Register Link | Add the url the “Register” link should open. |
| Lost Password Link | Add the url the “Lost Password” link should open. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Point the Lost Password Link to a page with the User Lost Password Element and the Register Link to a page with the User Register Element, so the whole account flow stays in your design.
- When you hide the labels, keep the placeholders on. Hidden labels are still read by screen readers, but sighted visitors need the placeholders to know which field is which.
- The form fetches its security token after the page has loaded, so it keeps working when the page is served from a page cache.
- When reCAPTCHA is enabled for login forms in Global Options, the element adds it automatically.
- Options left on Default follow the User Login settings in Global Options, so all login, register and lost password forms can share one look.