00 Days
00 Hrs
00 Mins
00 Secs
Expired
Get a flat 19% discount today. Use Coupon Code
OFFEREND19

How to create a User Profile using Elementor?

It’s quite similar to Registration and Login Action. There is an Edit Profile Action. Please follow the below steps to create a user profile page for your customers.

  1. Create a page e.g yoursite.com/profile and edit it with Elementor
  2. Drag and drop the form widget to the page
  3. Create the form fields e.g First Name, Last Name, Mobile Number, Email, Password
  4. In the Actions after submit select Edit Profile
  5. Map the appropriate form fields with the available user metas inside the Edit Profile Action. If any meta is not available you can select Custom Meta andput a meta name as you wish
  6. Save and publish the page
  7. Logout from your Admin user and login from a normal subscriber then visit yoursite.com/profile

Glossary

Editable : If you disable it, a user won’t be able to edit that field. This is helpful for some fields e.g if you don’t want your user to edit their username.

Require User Approval : This option force users to approve any profile changes by clicking on a confirmation link sent to their Email. Changes in the respective field won’t be visible on the user profile until it is approved by the user.

Require Admin Approval : If you enable this option for any field and the field was updated or changed by the user, an approval link is sent to the admin’s email. The changes on the user’s profile won’t be visible until it is approved by the admin.

Approval Settings : Here you can edit the email template that is sent to the users or admin for approval on pending changes.

Screenshots

( Click on the images to zoom-in )

FAQ

How can I allow users to update their profile Picture?

You can add a form field of type file Upload and in advanced section enable the file Preview option. So that when a user upload an image it will be previewed instantly like we change our profile picture in Facebook or Linkedin. Then you need to create a custom meta and map the respective form field with it.

How to style user profile picture?

Go to Style tab => Additional Style => File Preview

How can I create public profile page for my users?

You need to create an archive template for that. Go to Elementor’s template section and create one archive template. Here you can drag and drop Heading Widget then set its value to Dynamic Tag -> Archive Meta. In the meta field you should enter the exact meta key that you had entered while creating the Profile Page initially. While publishing the page set it’s display condition to Author only. Now navigate to yoursites.com/authors/username. Similarly to display the profile image you can drag and drop an image widget and set its dynamic value.

Table of Contents

Leave a Reply

Your email address will not be published. Required fields are marked *