How to Use User Elements on Your Website

The User Elements feature allows you to display user-related content dynamically, similar to the Assets or Posts elements. It is useful for member-based sites, user directories, or personalized content.

1. Adding the User Elements

Step 1: Insert the User Elements Block

1. Open your website builder.
2. Go to Add Elements → Scroll to CMS.
3. Select User Elements and drag and drop it onto your page.

By default, it will display user-related data such as names, profile pictures, and roles.

2. Configuring the User List Layout

Step 2: Adjust Columns, Rows, and Spacing

1. Click on the User Elements block to open settings.
2. Adjust the number of columns (e.g., 1, 2, or 3 users per row).
3. Modify rows to control how many users appear at once.
4. Change spacing between user cards for a structured layout.

3. Customizing User Data Display

Step 3: Add or Remove User Fields

• Profile Picture: Click on the default image to modify it.

1. Username:Click on Add Text Element.
2. Select the server icon and choose Username.
3. Align and style it as needed.

• User Role:Add text and select User Role from the dynamic data options.
• Other Custom Fields:If your CMS allows custom fields, you can display extra user info (e.g., bio, location, or social links).

4. Filtering and Sorting Users

Step 4: Apply User Filters

Under Filter Options, choose:

• A specific user role (e.g., Admins, Subscribers, Members).
• Include or exclude specific users.
• Use offset to skip certain users (e.g., skip the first 2).

Under Order Direction, set:

• Newest Users First (default).
• Alphabetical Order (A-Z or Z-A).

5. Adding Pagination for Large User Lists

Step 5: Enable Pagination

1. If you have many users, enable pagination for better navigation.
2. Choose between numeric pagination or "Load More" buttons.

6. Styling the User Elements Section

Step 6: Customize Appearance

• Click on Settings to modify:
• Padding and Margins for spacing.
• Font Styles and Colors for usernames and user roles.
• Background and Border Effects for profile cards.

You can also duplicate a user card and modify the styling before applying it to all users.

Optimizing for Mobile & Tablet

Step 7: Ensure Responsive Design

• Switch to Tablet View and Mobile View.
• Adjust columns per row (e.g., 1 user per row on mobile).
• Resize profile pictures and text to fit smaller screens.

Why Use User Elements?

• Dynamic User Display – Easily showcase users based on CMS data.
• Customizable Layout – Fully adjustable to match your website’s design.
• Better Navigation – Filters and pagination improve user browsing.
• Personalized Content – Useful for memberships, teams, or author listings.

By following these steps, you can add, organize, and style the User Elements effectively, making your site engaging and user-friendly.