The default Ultimate Member login page works, but it rarely matches a branded site. It is usually a plain form on a white page, powered by a [ultimatemember] shortcode that Ultimate Member creates automatically.
This guide shows the current workflow with Elementor Widgets for Ultimate Member: use the Elementor Setup dashboard, swap the shortcode for the Login & Register Form widget, then style everything visually in Elementor, no CSS or child theme required.
What You’ll Need
- WordPress
- Ultimate Member
- Elementor
- Elementor Widgets for Ultimate Member — free plugin, includes the Login Page Styler
The login styler is included in the free plugin. Pro adds profile builder, account page, member directory styler, and more.
What the Default Login Page Looks Like
When you install Ultimate Member, it creates a Login page automatically and assigns the [ultimatemember form=ID] shortcode to it. The result is a centered form with the Ultimate Member default styling functional, but completely generic.
There’s no brand identity. No logo. No background. The button uses UM’s default blue. The form container has a thin border and minimal padding. On a professionally designed site, this page stands out in the wrong way.
Step-by-Step: Styling the Ultimate Member Login Page
Step 1: Install the Plugin
Install and activate Ultimate Member, Elementor, and Elementor Widgets for Ultimate Member from Plugins → Add New.
Step 2: Open Elementor Setup
Go to Ultimate Member → Elementor Setup.
You’ll see a checklist and a table of UM core pages: Page, Status, What to do, and Action. For Login, if status is UM shortcode, the action button reads Swap in Elementor.
Step 3: Click “Swap in Elementor”
Click Swap in Elementor on the Login row. Elementor opens the login page. On first open you may see a toast at the top with swap instructions. If the page still has the old shortcode, a dark notice bar appears on the canvas above the shortcode output:
UM shortcode – replace with Elementor widget
Delete this block, then add “Login & Register Form” from UM Member Pages.
Step 4: Delete the shortcode block
Click the shortcode output on the canvas (or the Shortcode widget in the structure panel). Press Delete or right-click → Delete.
Do not try to style the shortcode in the sidebar “Enter your shortcode” field — remove the whole block.
Step 5: Add the Login & Register Form widget
In the left panel, open Widgets and find UM Member Pages (not the generic Elementor widgets list).
Drag Login & Register Form onto the canvas.
In the widget Content tab, set Form Type to Login.
The widget renders the real UM login form in the editor. If you’re logged in as admin, you’ll see an editor notice like:
Editor preview — this form is shown to guests on the live site.
That’s expected — guests see the login form on the live page.
Step 9: Style the button and fields
In Style:
- Set the button to your brand primary color with a darker hover
- Match border radius to the rest of your site
- Tune input borders and focus colors
Consistency in radius and button style across login, register, and account pages makes the site feel intentional.
What You Can Style with Elementor
Once you drop the Login Page Styler widget onto an Elementor page, every visual element of the login form becomes configurable from the Elementor panel:
- Form container – background, border, radius, padding, shadow, max width
- Logo – upload your site mark above the form
- Heading & subheading – welcome text with full typography
- Input fields – background, borders, focus color, placeholder styling
- Labels – size, weight, color, spacing
- Login button – colors, hover, radius, padding, typography
- Remember me & Forgot password – link colors and visibility
- Page background – section-level color, gradient, or image
- Layout – centered card, full-width mobile, split-screen sections
- Logged-in state (login mode) – customize what members see when already signed in
Style the rest of your member flow
A polished login page next to a bare register or profile page feels broken. Use the same setup workflow for:
| Page | Widget (UM Member Pages) |
|---|---|
| Register | Login & Register Form (Form Type: Register) |
| User Profile | Profile Page Builder (Pro) |
| Account | Account Page (Pro) |
| Password Reset | Password Reset |
| Members Directory | Member Directory (Pro) |
After login, set Ultimate Member → Settings → General → Login redirect so users land on your member home or dashboard, not back on the login page.
Frequently asked questions
Does this change how Ultimate Member handles login?
No. UM still handles authentication, sessions, validation, and redirects. The widget only controls presentation.
Can I keep the shortcode and add CSS instead?
You can target .um-form with CSS, but you won’t get Elementor controls, logos, backgrounds, or the setup dashboard tracking. The recommended path is shortcode → widget.
Do I need Elementor Pro?
No. The Login & Register Form widget works with free Elementor.
Why don’t I see the widget?
Confirm Ultimate Member, Elementor, and Elementor Widgets for Ultimate Member are active. Hard-refresh the editor. Look under UM Member Pages, not “General” widgets.
Why does the editor show something different from the live login page?
If you’re logged in, the login widget may show a logged-in welcome or preview notice. Use incognito to preview the guest login form.
What’s the difference between free and Pro?
Free includes login/register styling and member directory widgets. Pro adds Profile Page Builder, Account Page, advanced directory styling, and more. Login styling is free.
Download Elementor Widgets for Ultimate Member — free on WordPress.org →
Related Guides
- How to Customize the Ultimate Member Profile Page (Elementor & PHP Methods)
- How to Customize the Ultimate Member Registration Page with Elementor
- How to Make Ultimate Member User Profiles Private by Default
- The Complete List of Ultimate Member Shortcodes
- How to Build an Ultimate Member Member Directory with Elementor
