Support » Plugin: UsersWP - User Profile & Registration » Designing with Elementor

  • Resolved micwie

    (@micwie)


    Hello,

    I design my pages with Elementor. I would like to know, how can I change the look and style of the UsersWP elements (login forms, users grid, buttons, text, etc) to match my websites look using Elementor?

    When open some UsersWP page (for example “Profile”) with Elementor, I would expect to be able to edit anything regarding users profile. This goes for fonts, button colours, tabs and more. It looks that now I can only place plugins blocks to different places , but cannot edit their content aesthetically. Most of the UsersWP Elementor blocks are just showing as shortcodes and the others do not have any additional styling options. Am I missing something here?

    Based on your plugin description I was expecting to have a 100% flexibility with Elementor, but it seems I cannot figure it out. Looks more like a lot of custom CSS styling to me…

    Thank you!

    • This topic was modified 2 months, 1 week ago by micwie.
    • This topic was modified 2 months, 1 week ago by micwie.
Viewing 15 replies - 1 through 15 (of 25 total)
  • Plugin Author Patrik

    (@wpdev10)

    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

    Thread Starter micwie

    (@micwie)

    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.

    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 2 months, 1 week ago by micwie.
    • This reply was modified 2 months, 1 week ago by micwie.
    Plugin Author Patrik

    (@wpdev10)

    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

    Plugin Author Patrik

    (@wpdev10)

    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

    Thread Starter micwie

    (@micwie)

    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 2 months, 1 week ago by micwie.
    • This reply was modified 2 months, 1 week ago by micwie.
    Plugin Contributor Paolo

    (@paoltaia)

    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,

    Thread Starter micwie

    (@micwie)

    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!

    Plugin Contributor Paolo

    (@paoltaia)

    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

    Thread Starter micwie

    (@micwie)

    Hi,

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

    Am I missing something?

    Plugin Author Patrik

    (@wpdev10)

    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

    Thread Starter micwie

    (@micwie)

    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ł

    Plugin Author Patrik

    (@wpdev10)

    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

    Thread Starter micwie

    (@micwie)

    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

    Thread Starter micwie

    (@micwie)

    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 2 months, 1 week ago by micwie.
    Plugin Author Patrik

    (@wpdev10)

    Hi,

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

    Regards,
    Patrik

Viewing 15 replies - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.