IMPORTANT: ELEMENTOR DASHBOARD DESIGNS
- We have created frontend dashboard templates for the OceanWP theme and for the Elementor free plugin. You can use either of the two options.
- You will notice that throughout the course, we use OceanWP to create and configure the frontend dashboard pages, but if you prefer, you can perfectly use Elementor.
- Here is a tutorial where you can learn how to import and configure Elementor templates to create a much more customized frontend dashboard.
We’ve already configured the global settings for our front-end dashboard with WP Frontend Admin.
In this section, we’ll show you how to configure the theme for the new dashboard and define the dashboard’s architecture.
Just follow these simple steps:
1- DEFINE THE ARCHITECTURE OF THE FRONT-END DASHBOARD
To define the architecture of the front-end dashboard, just think about the features you want to display and how you want to distribute the features in the pages.
- TIP: Think of a logical ordering of the admin pages on the front-end dashboard menu.
We suggest a schema like this:
- Reports (homepage of the dashboard)
- Settings (Site General Settings)
- Store Settings (WooCommerce settings)
- Customize Store (customizer)
- Account (WP Ultimo)
- Membership (WP Ultimo)
- View my site (Shortcode)
- Logout (Shortcode)
This schema is simple and logical, and this is how our menu looks:
2- CREATE A NEW NAVIGATION MENU ON THE DASHBOARD SITE
Go to Admin Network > Sites and open the wp-admin of the dashboard site.
Go to Appearance > Menus.
Once there, enter the name of the new menu in Menu Name and click Create Menu.
We will leave the menu empty (without pages) because WP Frontend Admin will add the menu items automatically when we create each dashboard page.
Now we’ll configure the OceanWP theme in just a few steps.
3- CONFIGURE THE THEME FOR THE FRONT-END DASHBOARD
By default, OceanWP has a different look than what we need, so you’d have to manually customize the theme in the customizer. Basically, we need to change the logo, header style, etc.
So we have prepared a file that you can import into your site to make it look exactly as our dashboard.
Use the button below to download the “OceanWP 1” template.
Once you download the file to your computer and unzipped the file, you will have a .dat file and you can import it to your site.
- Go to Theme Panel > Import/Export.
- Click Choose File and select the file from your computer.
- Click Import Settings.
All the settings will be imported, so the theme will look just as we have shown you. These are some characteristics that you’ll notice once the file is imported:
- Vertical menu at the left side
- No cart button
- No search form
- No page titles
- Montserrat typography
- Content separate from the menu
- Content background
- No theme credits
Important. If you use a template with a logo, like the one we have shared above, you need to go to Appearance > Customize and select the logo.
After that, you are free to customize the dashboard layout and color scheme however you want.
WHAT IF YOU DON’T WANT TO USE THIS DASHBOARD DESIGN?
We have created many dashboard designs that you can import to your dashboard. Some designs are created using OceanWP or Elementor.
You can view the full library of designs and download them.
Here’s a quick preview of the designs available that you can download and import on your dashboard site.