---
title: "Ultimate Member Elementor Tutorial: Create a WordPress Membership Directory"
date: 2022-09-19
modified: 2026-05-11
author: "userelements_wh8sr3"
url: "https://www.userelements.com/create-user-directory-elementor/"
markdown_url: "https://www.userelements.com/create-user-directory-elementor.md"
type: post
excerpt: "Ultimate Member gives you a complete membership system. Elementor gives you a visual page builder. On their own, each is […]"
categories:
- "Ultimate Member"
---
Ultimate Member gives you a complete membership system. Elementor gives you a visual page builder. On their own, each is powerful. Together with the right addon you can build a professional membership site with a branded login page, a searchable member directory, and custom profile pages without writing a line of code.
This tutorial covers everything: setting up Ultimate Member, styling your login and register forms in Elementor, building a member directory, and using Pro widgets like the sortable table, user carousel, and profile page builder.
**Plugins used in this tutorial:**
- [Ultimate Member](https://wordpress.org/plugins/ultimate-member/) (free)
- [Elementor](https://wordpress.org/plugins/elementor/) (free version is sufficient)
- [Ultimate Member Widgets for Elementor](https://wordpress.org/plugins/ultimate-member-widgets-for-elementor/) (free + Pro)
You can preview all widgets live at [demo.userelements.com](https://demo.userelements.com/).
## What You Can Build
#### Ultimate Member Examples
Before diving into setup, here is what the plugin gives you at each tier:
### Free Widgets (8 total)
WidgetWhat It Does**UM Login Form Styler**Style the UM login form visually inside Elementor**UM Register Form Styler**Style the UM register form inside Elementor**UM Password Reset Styler**Style the password reset page to complete the auth flow**UM User Directory Grid**Searchable, filterable member directory with AJAX search**WordPress User Directory**Works without Ultimate Member — any registered WP users**User Profile Flip Cards**Hover-to-flip cards for team pages and showcases**User Avatar Display**Standalone avatar widget for profile page templates**User Meta Fields**Display any UM profile field on a member’s profile page**User Profile Name**Display name in any format with full typography controls### Pro Widgets
WidgetWhat It Does**Sortable User Table**DataTable with clickable column sort and CSV export**User Carousel**Touch-friendly Swiper slider for featured members**Advanced Filter Widget**Standalone sidebar filter panel, unlimited fields**Live Search Widget**AJAX search you can place anywhere, independent of the grid**Faceted Search Directory**Multi-criteria live filtering with real-time AJAX refresh**2-Column / 3-Column Layouts**Multi-column directory layouts**Zigzag Layout**Alternating editorial-style member layout**Account Page Styler**Style the UM account page tabs in Elementor**Profile Page Builder**9 widgets for a fully custom UM profile page in Elementor**Native UM Directory Styler**Visual control over the default UM member directory shortcode
## Step-by-Step Installation Guide
### Part 1: Setting Up Ultimate Member
First, you need to install the Ultimate Member WordPress plugin.
1. Log in to your site and go to the WordPress Dashboard
2. Go to **Plugins > Add new**
3. Search for “ultimate member”
4. Please install and activate it
On first activation, Ultimate Member will prompt you to create its default pages.
Click Create Pages. This generates seven pages automatically:
When you activate Ultimate Member, it will install 7 default pages ( Login, Register, User, Account, Member, Logout & Password Reset pages). Follow this [tutorial ](https://www.userelements.com/ultimate-member-missing-pages/)if you don’t see the page creation modal.
Click **Create Pages**. This generates seven pages automatically:
**Page****What It Does****Shortcode****Account Page**Allows users to reset passwords \[ultimatemember\_account\]**Password Reset Page**Allows members to log in\[\[ultimatemember\_password\]**Logout Page**Allows logged-in users to log out of the website.N/A**Register Page**Allows visitors to registerShortcode found on Ultimate Member > Forms**Login Page**Displays a list of usersShortcode found on Ultimate Member > Forms**User Page**Outputs user profile with avatar, profile cover, and other custom fields.Shortcode found on Ultimate Member > Forms**Members Page**Displays list of usersShortcode found on Ultimate Member > Member Directory.Ultimate Member pages & shortcodes***Important:** Exclude these pages from your caching plugin. Cached UM pages break login redirects, form submissions, and directory queries.*
### Step 2 – Create Your Registration Form
Now you have to select a default role for newly registered users. For example, when someone registers to your directory or membership site, what access do you want to give to them?
#### Creating a Registration Form
Ultimate Member creates a “Default Registration” form automatically. To create a custom form with specific fields:
1. Go to **Ultimate Member → Forms → Add New**
2. Set Form Type to **Registration Form**
3. Click **+** in the Form Builder to add fields
4. Choose from 23 field types: text, dropdown, multi-select, image upload, file upload, date, URL, and more
5. Save and copy the shortcode (e.g. `[ultimatemember form_id="123"]`)
**Default role on registration:** Go to **Ultimate Member → Settings → Appearance → Registration Form** and set the Registration Default Role. This role is assigned to every new registrant automatically.
### Step 3 – Configure the Member Directory
- Go to **Ultimate Member → Member Directories → Edit → Members**
- Under General Options, set which **User Roles to Display**
- Set **Profiles per page** (default is 12)
- Make sure “Enable Members Directory” is checked under **Settings → General → Users**
- Save
The default directory uses UM’s own shortcode. The Elementor directory widget (covered below) is a separate, more powerful version.
### Step 4 – Configure User Roles
Ultimate Member lets you create custom roles with specific permissions:
1. Go to **Ultimate Member → User Roles → Add New**
2. Set the role title and priority
3. Configure permissions per role:
Permission AreaOptionsAdminWP admin access, edit/delete other accountsProfileEdit own profile, delete own accountProfile AccessView others’ profiles, private profilesRegistrationStatus after registration (auto-approve, pending review, email verification)LoginRedirect after loginContentRole-based content restriction**Content restriction** is one of Ultimate Member’s strongest features. You can restrict entire pages, individual posts, or specific sections using the shortcode:
```php
[um_show_content roles="member"]
This content is only visible to members.
[/um_show_content]
```
## Part 2: Styling Your Login Page in Elementor (Free)
This is the most impactful thing you can do with the plugin. The default Ultimate Member login page is completely unstyled. The **UM Login Form Styler** widget replaces it with a fully branded, visually designed login form — in under five minutes.
### Step 1 – Open Your Login Page in Elementor
Navigate to the login page Ultimate Member created, and click **Edit with Elementor**.
### Step 2 – Add the Login Form Styler Widget
In the Elementor widget panel, search for **UM Login Form Styler**. Drag it onto the canvas. The live Ultimate Member login form renders immediately inside the editor.
### Step 3 – Style Every Element Visually
From the **Style** tab, you have full control over:
- **Form wrapper** — background color or image, padding, border radius, box shadow
- **Input fields** — border, background, text color (Normal and Focus states separately)
- **Field labels** — typography, color, spacing
- **Submit button** — background, text, border, radius, hover state
- **Secondary button** (Register / Forgot password links) — full independent styling
- **Error and notice messages** — color, background, border
- **Footer links** — typography and color
From the **Content** tab, you can:
- Switch between the Login form and Register form with one click
- Choose which specific UM form to display (if you have multiple)
- Set redirect URL after login
### Step 4 – Style the Register Form
Add the **UM Register Form Styler** widget to your registration page. The same style controls are available. Style both pages to match, and your members experience a consistent, branded flow from registration through to login.
### Step 5 – Style the Password Reset Page
Add the **UM Password Reset Styler** to your password reset page. This completes the authentication flow. All three pages — login, register, password reset — can be styled to match perfectly.
> **Result:** A cohesive, branded authentication experience that matches your site design — no CSS file, no child theme.
## Part 3: Building a Member Directory in Elementor (Free)
### Step 1 – Install the Widgets Plugin
Go to **Plugins → Add New**, search for “Ultimate Member Widgets for Elementor”, and activate it. Widgets appear in the Elementor panel under two categories: **User Directory** and **UM Profile Forms**.
### Step 2 – Add the User Directory Grid Widget
Open any Elementor page and drag the **UM User Directory Grid** widget onto the canvas. You immediately see a live preview of your members.
### Step 3 – Configure the Query (Content Tab)
SettingDescriptionUser RolesWhich roles to include in the directoryShow Only Approved UsersSkips pending and rejected UM accountsUsers Per PageHow many cards to show per page/loadOrder ByDisplay name, registration date, last login, post count, or any custom meta fieldOrderAscending or descending### Step 4 – Choose a Layout
**Free layouts:**
- **Card Grid** — responsive photo grid, 1 to 6 columns
- **List** — horizontal rows, better for data-heavy directories
**Pro layouts:**
- **Sortable Table** — column-sortable DataTable with global search
- **Carousel** — Swiper-powered slider
- **2-Column** — balanced two-column layout
- **3-Column** — dense three-column grid
- **Zigzag** — alternating left-right editorial layout
### Step 5 – Configure Fields and Filters
In the **Fields** section, select which user meta fields appear on each card: name, avatar, bio, role, location, social links, phone — any UM profile field.
In the **Filters** section:
- Enable **AJAX live search** — results update as visitors type, no page reload
- Enable **meta field filters** — visitors can filter by role or any custom field (up to 2 filter fields in the free version, unlimited in Pro)
- Enable **Filter Persistence** — filter state is saved in localStorage, so refreshing the page keeps the current filter active
- Enable **URL Parameters** — filter state is reflected in the URL, making filtered directory views shareable
### Step 6 – Set Pagination
Three options are available:
- **Numbered Pages** — traditional page numbers
- **Load More Button** — appends next page below current results on click
- **Infinite Scroll** — loads next page automatically as visitors scroll
### Step 7 – Style the Directory (Style Tab)
Style controls cover every element:
- Card background, border, border radius, shadow
- Avatar size, border, radius
- Name typography and color
- Meta field labels and values — size, color, spacing
- Pagination buttons — background, color, hover states
- Search input and filter buttons
## Part 4: Pro Widgets Overview
### Sortable User Table
[Demo](https://demo.userelements.com/sortable-user-table/)
The table widget displays your members in a DataTables-powered grid. Visitors click any column header to sort — by name, registration date, role, or any custom meta field. A global search bar filters across all visible columns simultaneously. One-click CSV export downloads the current filtered member list.
Ideal for: HR directories, association member lists, admin-facing member management pages.
### User Carousel
[Demo](https://demo.userelements.com/user-carousel-or-slider/)
Swiper.js-powered slider for your members. Touch-friendly on mobile. Supports auto-play, loop, and any combination of profile fields per slide. Great for homepage featured members, alumni spotlights, and testimonial sections.
### Advanced Filter Widget
[Demo](https://demo.userelements.com/users-list-with-filter-buttons/)
A standalone filter panel you can place anywhere on the page — in a sidebar, above the directory, or in a separate Elementor column. Supports dropdowns, checkboxes, and radio buttons. Unlimited filter fields. Connects to any directory grid widget on the same page.
### Faceted Search Directory
[Demo](https://demo.userelements.com/ultimate-member-faceted-search/)
Multi-criteria live filtering with real-time AJAX refresh. When visitors select multiple filter values simultaneously, the directory updates instantly. The most powerful search experience for complex member communities with many filterable attributes.
### Multi-Column and Zigzag Layouts
[2-column demo](https://demo.userelements.com/2-column-user-list/) | [3-column demo](https://demo.userelements.com/3-column-user-list/) | [Zigzag demo](https://demo.userelements.com/zigzag-user-list/)
Three additional directory layouts for full design flexibility. The zigzag alternates image and text left-right for an editorial, magazine-style look. Two-column and three-column layouts give more horizontal density than the standard card grid.
### Account Page Styler (Pro)
Style the Ultimate Member account page directly inside Elementor. The account page has four tabs — General, Password, Privacy, and Notifications — and all four are styleable independently. Every member visits this page when they manage their profile, making it high-impact for brand consistency.
### Profile Page Builder (Pro)
The most advanced Pro feature. Nine dedicated Elementor widgets replace the default Ultimate Member profile template entirely:
WidgetWhat It RendersProfile Cover PhotoFull-width cover image with upload controlsProfile HeaderAvatar, name, role, action buttonsProfile BioMember’s bio/description fieldProfile Meta FieldsSelected custom UM fields in label+value formatProfile Social LinksSocial media icons linking to UM social fieldsAction BarFollow, message, and connect buttonsProfile Completion BarProgress indicator for profile completenessProfile TabsCustom tab navigation for profile sectionsProfile BodyThe main UM profile form content areaYou build the profile page exactly like any other Elementor page — drag, drop, configure, style. This is the only plugin that gives you full drag-and-drop control over the Ultimate Member profile page layout without overriding PHP templates.
## Part 5: Building a Custom Profile Page in Elementor (Pro)
### Step 1 – Create a New Elementor Template
Go to **Templates → Add New** in Elementor and choose **Single Page**. This template will be applied to all UM user profile pages.
### Step 2 – Build the Profile Layout
Drag profile widgets from the **UM Profile Forms** panel category:
1. Add a full-width section for the **Profile Cover Photo** widget
2. Below it, add a section with the **Profile Header** widget — this renders the avatar, display name, role badge, and action buttons
3. Add a two-column section: **Profile Bio** on the left, **Profile Meta Fields** on the right
4. Add **Profile Social Links** below
5. Add **Profile Tabs** for any additional profile sections
6. Add **Profile Body** to render the main UM profile form
### Step 3 – Style Each Widget
Every profile widget has full Elementor Style tab controls. Colors, typography, spacing, border radius, and background are all configurable visually.
### Step 4 – Set the Template Conditions
In Elementor, set the template to apply to **Ultimate Member → User Profile pages**. All profile pages site-wide now use your custom layout.
## Part 6: Performance Tips
**Enable the UM custom meta table.** Go to **Ultimate Member → Settings → Misc** and enable “Enable custom table for usermeta.” This significantly speeds up member directory queries on large sites.
**Exclude UM pages from caching.** Exclude the login, register, account, password reset, and member directory pages from your cache plugin (WP Rocket, LiteSpeed Cache, etc.).
**Exclude the plugin JS from minification.** If you see broken directory behavior after minification, exclude `wp-content/plugins/ultimate-member-widgets-for-elementor/assets/js/` from your caching plugin’s JS processing.
**Limit images for large directories.** On directories with many members, disable cover photos on cards and use avatars only. This reduces image load significantly on the initial page render.
## Part 7: Hiding Member Profiles from Search Engines
If you are building a private membership site and do not want member profile pages indexed:
1. Go to **Ultimate Member → Settings → General → Users**
2. Enable “Avoid indexing profile by search engines”
You can also set this per user role from **Ultimate Member → User Roles**, giving you granular control — public members can be indexed while private or premium roles are not.
## Summary: What Each Plugin Does
TaskPluginUser registration, login, profiles, member directoryUltimate Member (free)Visual page builderElementor (free)Style login, register, password reset forms in ElementorUltimate Member Widgets for Elementor (free)Searchable member directory grid in ElementorUltimate Member Widgets for Elementor (free)Sortable table, carousel, advanced filters, profile builderUltimate Member Widgets for Elementor (Pro)### Why Build a Membership Website
An easily searchable WordPress user directory may significantly enhance the user experience. Allowing visitors to identify and connect with the people they are looking for. Membership sites offer an excellent opportunity to monetize your content, expertise, and even your time. By offering well-defined subscription plans at a fixed, recurring price, you can simplify billing processes and provide your customers with convenient access to your products and services on an ongoing basis. With Elementor, you can create a membership site for virtually any niche or purpose.
## Live Demos
See every widget working live at [demo.userelements.com](https://demo.userelements.com/):
- [User Directory Grid](https://demo.userelements.com/user-directory-grid/)
- [User Profile Flip Cards](https://demo.userelements.com/users-flipbox/)
- [Sortable User Table](https://demo.userelements.com/sortable-user-table/)
- [User Carousel](https://demo.userelements.com/user-carousel-or-slider/)
- [Zigzag Layout](https://demo.userelements.com/zigzag-user-list/)
- [2-Column Layout](https://demo.userelements.com/2-column-user-list/)
- [3-Column Layout](https://demo.userelements.com/3-column-user-list/)
- [Live Search](https://demo.userelements.com/user-search-bar/)
- [Filter Buttons](https://demo.userelements.com/users-list-with-filter-buttons/)
- [Faceted Search](https://demo.userelements.com/ultimate-member-faceted-search/)
[Download free on WordPress.org](https://wordpress.org/plugins/ultimate-member-widgets-for-elementor/) | [Get Pro](https://userelements.com/ultimate-member-elementor/)
### What is a WordPress Member Website
A WordPress membership site allows you to restrict access to some or all of your site’s content. Consider the scenario where you want only certain users to access your website. There won’t be a public entrance. Users typically have to register in order to access a member website or a particular section of it. Only users who have registered are able to log in, read the website’s content, and leave comments.
The advanced member website includes robust features such as setting a user profile photo, sending messages between members, push notifications, and many more.
### What Types of WordPress Membership Sites Can You Build?
Here are some examples of Membership or user directories you can create:
1. **Alumni Directory** – Make an alumni directory for the school that is only accessible to former students, staff, and professors.
2. **Church Directory** – A directory of all the church’s members..
3. **Contractor Listings** – Directory of independent or 3rd party contractors.
4. **Expert Directory** – Directory for legal professionals, journalists, and conferences
5. **Corporate Directory** – Developing a corporate team directory.
6. **Sports Directory** – Directory of local high school basketball teams.
7. **Interest-based Community** – Create a directory of Texas Mercedes-Benz owners.
### Functionalities a WordPress user directory plugin offers
Good dynamic user directory WordPress plugins offer:
1. User registration features
2. User login features
3. Individual User profile page
4. User directory listings page
5. Advanced user search features
6. Custom fields for user info
7. Let users send messages to each other
8. Restrict content based on the member’s role