Let’s see how to import and use the Elementor dashboard templates.
1- Preliminary steps
There are some things you need to do before you import the templates:
- Download, install, and activate the Elementor Header, Footer & Blocks Template plugin on your multisite network. It allows you to use nav menus and other nice elements in Elementor free.
- Download, install, and activate the WP Menu Icons plugin on your multisite network. It will help you add icons to your menu items.
- Download, install, and activate the Shortcode in Menus plugin on your multisite network. It will help you add shortcodes to menu items to display the “View my Site” and the “Log Out” buttons in some templates. Besides, it will make shortcodes work as button links in Elementor.
After installing the required plugins, you need to set up the dashboard site logo and title because our Elementor templates inherit the logo from the customizer settings:
- Open the frontend dashboard site on your multisite network.
- Go to Appearance > Customize to open your theme’s customizer.
- Select the site’s logo using the Customizer of your theme. Normally, the site logo settings are under Site Identity or under Header.
2- Import the template you’ll use
You need to download the template you’ll use to create the dashboard pages, and import it into your dashboard site:
- Open your frontend dashboard site.
- Go to Templates > Saved Templates in wp-admin.
- Click Import Templates.
- Choose the File from your computer and click Import Now.
3- Set up the template and create the dashboard pages
Once you import the frontend dashboard template, you need to create the dashboard pages one by one using the template you imported.
Here we show you how to create one page as an example to set up the template:
- On your dashboard site, go to Pages > Add New.
- Enter the page title.
- Click Edit with Elementor.
Once you’re in the Elementor editor, you need to change the page template:
- Click Settings.
- Select Elementor Canvas in Page Layout.
After changing the page layout, you need to add the template you have imported. For this, just click Add Template.
The Elementor library will show you Blocks, Pages, and Templates, so you need to:
- Head to My Templates.
- Select the template you’ll import.
- Click Insert.
- Click Yes to import the template settings into the page.
Once the template is added to the new page, you can start configuring the page. In this example, we’re using Template 1.
a) Set up the Site Logo
We’ve added a Site Logo element using the Header, Footer & Blocks Template plugin. If you have already selected the site logo on the theme’s customizer, the logo will load automatically.
However, you can upload your own custom image. You just need to click on the Site Logo element’s settings, select Custom Image = Yes, and upload the image.
Note. If you use the custom image option, you will need to manually upload the image on each page of the dashboard, while if you use the customizer you only need to configure it once globally.
- Template 2 and Template 8 don’t use the Site Logo element.
b) Set up the dashboard Menu
The Menu element has also been added to the templates using the Header, Footer, & Blocks Template plugin.
You need to first create a menu under Appearance > Menus so that the menu element loads it automatically. You can click the Menu element settings to select which menu you want to display on this element.
- If this is your first page, you won’t see any items on the menu.
- Once you finish creating all the pages, you need to add icons to the menu items using the WP Menu Items plugin at wp-admin > Appearance > Menus. Here’s how you can add menu icons and set submenu items.
- If you’re using Template 4 or Template 10, you don’t need to add menu icons.
- If you’re using Template 8, you need to select Hide Label = Yes for all the menu items because only includes icons without labels.
- In Editor mode, Elementor doesn’t display the menu icons, but you can see how they look when you click Preview.
At this point, you could save this page as an Elementor template so that all the future pages have the same logo and menu automatically:
- Click Save Options.
- Click Save as Template.
c) Set up the frontend admin page content
On the content area of the template, you need to enter the following WP Frontend Admin shortcode:
[vg_display_admin_page page_url="wp-admin URL"]
Just replace the wp-admin URL text with the URL of the wp-admin page you’ll display on the frontend. For example, we can create the WooCommerce products frontend page by using this shortcode:
Once you enter the WP Frontend Admin shortcode, you need to click Preview to see the page on the frontend and configure it live using the WP Frontend Admin quick settings.
Note. While you are editing the page in the frontend, the Quick Settings panel will be shown on the left side of the screen over the vertical menu of the templates containing the side menu. This won’t happen with templates with top menu.
You can select the dashboard page’s general information using the following fields:
- Page title: The title will be inherited from the page though you can change it.
- URL slug: Enter a friendly URL slug here including keywords only.
- Page template: Elementor Canvas
- Add page to this menu: Select the dashboard menu you created in the sections above.
Also, you can hide any unnecessary elements from the page to simplify it and make it look elegant:
- Click Hide Element.
- Click the element you want to hide.
- Repeat both steps with every element you want to remove from your page.
Besides, you can hide elements that might pop up in the future on your screen:
- Tick the Hide notices added by other plugins or themes checkbox.
WP Frontend Admin allows you to edit the texts from your admin pages to customize them even more:
- Click Edit texts.
- Edit all the texts you want.
- Click Stop editing texts.
If your frontend page is a list of posts, products, or any post types, you can disable unnecessary columns. Just tick the columns you want to hide in the Disabled columns section of the Quick Settings pannel.
If you’re using WP Ultimo to manage memberships in your multisite network, you can restrict dashboard features based on the users’ WP Ultimo plan. Just select the plans that will have access to the current page in the section This page is available for these WP Ultimo plans.
Users on pages that list products, posts, pages, or any type of post on the frontend can view their own posts only, or they can view the posts of other users on the same site.
Finally, you can hit Save to publish the page.
- The Hide element button allows you to simplify any page. For example, if you’re showing the Posts admin page on the frontend, you can then open the Add New post form and remove all the non-essential fields and metaboxes.
- You can Edit texts in other pages as well. For example, you can edit texts on the Add New post form.
- You need to repeat the same steps to create the other frontend admin pages.
4- Optional. Display multiple admin content in Elementor pages
If you want to display more than one admin page in the frontend, you can easily do it using a Tabs element instead of a Text Editor element in Elementor.
- Enter the tab title.
- Enter the WP Frontend Admin shortcode in the tab’s description.
- Do this in all the tabs you’re creating.
- Click Preview to see how the page looks in the frontend and configure it using the Quick Settings panel.
5- Add menu icons to your dashboard menu
After creating all the frontend dashboard pages using your favorite Elementor template, you can add icons to your dashboard menu to make it more beautiful and intuitive.
- Go to Appearance > Menus on your dashboard site.
- Select a menu item and open the icon settings.
Now just select the icon and hit Save.
- There are some dashboard templates that don’t require menu icons.
- There are some dashboard templates that need to have the menu item labels hidden. In this case, you can select the menu item’s logo and select Hide Label = Yes.
- You can also edit the menu icons’ size using the Size field in the menu icon settings.
6- How to add “View User Site” and “Log Out” buttons to dashboard menus
WP Frontend Admin allows you to easily add the View User Site and Log Out buttons to your dashboard menus.
- Go to Appearance > Menus.
- Add a new Custom Link.
- Enter the shortcode in the URL field.
- Enter the menu item label in Link Text.
- Click Add to Menu.
- Do that with both the View User Site and the Log Oug buttons.
Here are the two shortcodes you need to use:
- View My Site: [wp_frontend_admin_my_site_url]
- Log Out: [vg_display_logout_url]
Here’s how our dashboard looks once it’s been configured:
7- How to create a custom login page with Elementor and redirect users to it
In addition to setting up a beautiful frontend dashboard with Elementor, you can also create custom login pages easily in Elementor. WP Frontend Admin allows you to display the login form on any element with a simple shortcode.
Just create a page with your own design and colors. Then, add a Shortcode element in the section or column where you want to display the login form.
Paste this shortcode to display the login form:
Note. You won’t see the login form while you’re logged in, but this is how your page could look.
Now you need to make sure users will be redirected to this page every time they try to see the frontend dashboard pages:
- Go to your network admin.
- Go to WP Frontend Admin > Settings > Login.
- Paste the login page URL in the Login Page URL field.
- Scroll down and Save.
This is how you can set up your frontend dashboard templates with Elementor. In fact, you can create a complete dashboard with the steps explained in this tutorial.