Designing with Elementor

Hi,

You can add a custom class to custom fields for the login and registration forms from the form builder. The buttons and input fields are using the bootstrap class which depends on your theme CSS and if you think it’s still not matching with the design then you might have to apply the CSS. If you can provide a screenshot or small video or site link to check where you need to apply custom CSS then we can provide a solution for that if any. Regarding flexibility in the profile page, we have different shortcodes which can be used to create the profile page via elementor. In the majority case, it will not require more CSS work if you are using the theme which supports bootstrap and you are using the bootstrap layout for UsersWP.

Regards,
Patrik

Dear Patrik,

Thank you for your message. Let me briefly explain in to you, what I am trying to achieve. Maybe we will find a good solution.

Here is the original page of the users profile:
https://whomade.me/profile/suzette/

Here is the layout I would like to achieve. Thia is a template made by elementor.
https://www.loom.com/share/20db6e944bdc4b0fa396f0c5796c926e

Since the layout is really different comparing to the plugin ones I think CSS customisation will take a pretty long time. Does your plugin support dynamic tags/shortcodes? If yes, I could theoretically assign a dynamic tag to every dynamic element such: user nickname, name, about info, social links, map and made the Elementor render this information in this template. Hope you know what I mean. it should be pretty understandable from the examples which content is static and which dynamic.

Thank you very much in advance!

PS: More about dynamic tags: https://elementor.com/help/dynamic-tags-pro/

• This reply was modified 3 years, 11 months ago by micwie.
• This reply was modified 3 years, 11 months ago by micwie.

Hi,

We do have a list of shortcodes that can be used to create the different parts of the profile page if you don’t want to use the [uwp_profile] which displays the full profile page. You can get them at the link https://docs.userswp.io/category/476-core-widgets. You might get most of the data about users from the User Meta widget or shortcode Let me know if this helps or not.

Regards,
Patrik

You can use the User Meta shortcode to get all the user meta saved by UsersWP or WP or other plugins by prefixing the key with “uwp_meta_”. Here is the example for your reference:

[uwp_user_meta key=bio show=’value’ user_id=""] for getting meta stored by the UsersWP while creating account form via form builder. If you keep the user_id blank then it will fetch the data of the displayed user of the profile.

Or you can use the Author meta dynamic tag to get the same bio by adding the prefix like “uwp_meta_bio” but this will not work on the profile page as this fetches the post author and not the displayed user of the profile.

Regards,
Patrik

Hi Patrik,

Thank for your info. I think the meta shortcodes should do the job. Could please help me with figuring out the shortcodes of my fields? Here is the screenshot of my forms:

https://ibb.co/NsCYkMQ

Or maybe you do have the complete list of this meta shortcodes somewhere? Just want to quickly test, if every field works as expected. Thank you!

PS – I also need meta shortcode of the users profile image

• This reply was modified 3 years, 11 months ago by micwie.
• This reply was modified 3 years, 11 months ago by micwie.

Instead of using the shortcodes, with Elementor is better to use the widgets, which will give you the key options as a select field.

https://paste.pics/a4d81803654bd71fe4038ae8ba17e2c0

The profile image has its own widget: UWP > User Avatar

Thanks,

Hi Paolo,

Thank you for your message.

I have already tried this UWP widget, but the problem is that you cannot style it in any way. I have recorded a short video where I have utilised both UWP widget and default Heading block from Elementor with the meta shortcode suggested by Patrik. As you can see, styling with the shortcode method is possible = much easier for me in terms of designing the things the way I want to. The only problem is that meta shortcode also renders “label”. I just want to render “values”. In this case BIo text should be hidden. Tried different methas it works, so the only problem is the label, which should be hidden.

Do you have any suggestion here?

Thank you!

https://www.loom.com/share/1d9b841d746e483c93ed14580a4b89c2

try adding this parameter:

[uwp_user_meta key=”bio” show=”value”]
or
[uwp_user_meta key=”bio” show=”value-strip”]

Which will strip html tags too.

If you open a page with the classic editor (or any CPT not using Gutenberg), you will find the shortcode builder.

https://paste.pics/d762f63dde3b7204ec1f52c6dd065548

Let me know how that goes.

Thanks

Hi,

thank you for your quick message. Tried both variants, but none of them work live. Check the video:

https://www.loom.com/share/a660fe6d1ced42028c9de4fedba20b4f?from_recorder=1&focus_title=1

Am I missing something?

Hi,

Can you try without a quote like [uwp_user_meta key=bio show=value] and let us know if it works for you or not? If not then please create a support ticket on our site https://userswp.io/support/

Regards,
Patrik

Hi,

This code worked like a charm. Thank you. May I ask you, if your plugin also generates the Google Map feature? If yes, what meta shortcode I can use in this case?

https://whomade.me/profile/silver-rose/

Thank you!

Best,
Micha?

Hi,

No, we don’t have such a feature for google map. Can you explain a bit so we can get an idea if we can add it as a feature if possible?

Regards,
Patrik

As you can see in the last link I have sent you, each user who fills in his/hers location, the google map will show below the address.

Here is what inspector says:
https://ibb.co/93wKcS7

I have also an issue of how to implement my Elementors design into current clients setup. Maybe you could help me with this:

Current/original user page was made by WP Bakery
(this page is assigned within the UsersWP setup)

https://ibb.co/xfy9w3T
(I’ve simply changed the page “The Who, Where…” with mine, which is published)

I have created new page fully made by Elementor and assigned it within UsersWP settings. Unfortunately, when I replace this page with the original one and then visit some profiles of the users, WP says that page was not found.

What am I doing wrong? I would like to test this design live, but somehow I cannot find a way.

Ideally I would like to preserve original page and just change the linking within your setup to my new design, so the user still can revert to their original setup if needed.

Thank you!

• This reply was modified 3 years, 11 months ago by micwie.

Hi,

I would suggest you create a support ticket on our site https://userswp.io/support for this.

Regards,
Patrik