Help Center

Profile Menu Widget Overview for Elementor

Profile Menu Widget Overview for Elementor

This tutorial will describe how the Profile Menu widget works and how to customize it to display different content on the WordPress Account and User page with the Elementor editor.

Before you start, check the tutorial requirements:

  • Elementor (Free version)

  • JetEngine plugin installed and activated

Account Page

Profile Builder dashboard

Proceed to the JetEngine > Profile Builder tab.

Warning

Since I want to place the Profile Menu widget on the Account page, I selected the “Content” Template Mode to be able to edit this page. If you set the “Rewrite” Template Mode, you can place the widget on the subpage templates with which you build the Account page.

If you changed some settings, hit the “Save” button.

user profile builder dashboard

Open the Account Page tab and ensure you have added several subpages. As for the subpage templates, you can use the Elementor templates and JetEngine listing items. Note that the Profile Menu will show the subpages’ titles.

After the subpages creating, click the “Save” button.

subpages for the account page
Warning

If you do not see some menu items in the Profile Menu widget, check if the Hide from menu option for the subpage is disabled.

hide from menu

Account page in Elementor and the Profile Menu widget settings

Proceed to the Account page or one of the subpage templates.

Drag-n-drop the Profile Menu widget to the Elementor editing page.

profile menu widget

This widget has such options:

  • Context. Here you can define if menu items will be shown from the Account Page or User Page tab from the Profile Builder dashboard. For now, select the “Account” option;
  • Show menu for the role. Here you can select user roles for which the menu will be visible;
  • Add subpage slug to the first page URL. The subpage slug is not included in the URL of the first page on the menu unless you specifically enable this option. If you enable it, the subpage slug will be added to all URLs on the menu, including the first page;
  • Menu Layout. Here, you can select:
    • Horizontal layout;
horizontal menu layout
  • Vertical layout.
vertical menu layout

You can set different Menu Layouts for the Desktop, Tablet, and Mobile devices view.

profile menu tablet portrait

You can set the Style settings as well.

profile menu widget style settings

After you customize the Profile Menu settings, drag-n-drop the Profile Subpage Content widget.

Warning

If you added the Profile Menu widget on the template subpage, you don’t need to use the Profile Subpage Content widget.

profile subpage content widget

This widget will show the content of every subpage when users will click on the corresponding menu item.

edit profile subpage content

Hit the “Update” button.

If you set the “Rewrite” Template Mode, add the Profile Menu widget to every subpage template where required.

Account page on the front end

Finally, proceed to the Account page on the front end.

Now, users can click on the menu items in the Profile Menu, and the Profile Subpage Content shows the corresponding subpage content.

account page on the front end

I pushed another menu item, and now the page shows the content from another subpage template.

profile menu on the front end

User Page

Profile Builder dashboard

Proceed to the JetEngine > Profile Builder tab.

Ensure you enable the Single user page option and set the previously created page as the Single User Page (in my case, that’s the “Profile” page).

Warning

I selected the “Content” Template Mode to be able to edit the User (Profile) page and place the Profile Menu widget on it. If you set the “Rewrite” Template Mode, you can place the widget on the subpage templates with which you build the User page.

If you changed some settings, hit the “Save” button.

single user page option

Open the User Page tab and ensure you have added several subpages. Note that the Profile Menu will show the subpages’ titles.

After the subpages creating, click the “Save” button.

subpages for the user page
Warning

If you don’t see some menu items in the Profile Menu widget, check if the Hide from menu option for the subpage is disabled.

hide from menu toggle

User Profile page in Elementor

Navigate to the User (Profile) page or one of the subpage templates.

Drag-n-drop the Profile Menu widget to the Elementor editing page.

Set the “Single User Page” Context and customize the widget according to your needs.

single user page context

Then, drag-n-drop the Profile Subpage Content widget to display the content of every subpage when users click on the menu item.

Warning

If you added the Profile Menu widget on the template subpage, you don’t need to use the Profile Subpage Content widget.

profile subpage content

Hit the “Update” button.

If you set the “Rewrite” Template Mode, add the Profile Menu widget to every subpage template where required.

User Profile page on the front end

Finally, proceed to the front end and open any user’s Profile page.

user page with the profile menu on the front end

That’s all. Now you know how to display the submenu templates on the Account and User pages using the Profile Menu widget.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.