Are you a fan of the Elementor page builder?
It makes WordPress websites much easier to build. But what about using Elementor for business directory sites? Is it possible?
You better believe it is! And all you need is a WordPress directory plugin for Elementor! So, we'll show you how to use Business Directory Plugin and Elementor to create a directory in Elementor & WordPress.
So, let's get started!
Is Business Directory Plugin compatible with Elementor?
Yes, Business Directory Plugin and Elementor are perfectly compatible!
Business Directory Plugin is the oldest and most used plugin for WordPress. Want some specifics?
Here you go:
- Create local directory sites with store locations and much more.
- Create business directories, city directory sites, real estate listings, and any type of directory listing site you can imagine.
- Build WordPress directory sites for local businesses, including Google Maps
- Optimize your listing pages for paid listings, free listings, or a combination of both.
- Update the look of your directory elements with built-in directory theme templates.
So as you see, it's one of the best WordPress business directory plugins for more reasons than we can list!
So, let's show you how you can customize a single listing page even further with Elementor.
How to create a business directory with Elementor and Business Directory Plugin
To get started, there are a few things you need:
The next thing we need to do is get Business Directory Plugin installed. We actually have a complete guide in the following article: How to Create a Business Directory in WordPress.
1. Set up your Business Directory
First, install the Business Directory Plugin.
Go to WordPress.org or Plugins → Add New and search for Business Directory for the Lite Version of the Business Directory WordPress plugin.
Next, we need to activate Business Directory Premium.
Go to your downloads page and click the big download button. Next, go to your WordPress admin, click Plugins → Add New, and click the Upload button. Then, click Browse and find the ZIP file you downloaded from the Business directory.
Install and activate the plugin, then head to Directory → Settings → General and enter the license key from your downloads page.
Also, there's a small notification in the bottom-right corner.
This notification asks if you want the plugin to create a Business Directory page. You can let the plugin do this because it's required for the plugin to work.
So feel free to click the Create required pages for me button.
The next step is to create your directory.
With that in mind, go to your WordPress admin and go to Pages → Business Directory.
Here you can change your directory name and slug. Make sure these match for search results.
There are a few quick steps to follow here:
- Name your directory. This name should stay the same to avoid hurting search rankings. So choose wisely.
- Add categories. Categories are the entire organization of your directory. Make your categories optimized for search engines and easy for users to find.
- Add/Edit fields. Customize your fields so they fit your audience. If you have a directory of concert venues, you don't want to include fields for dentists.
- Add payment options. This is entirely optional. But if you want to monetize your directory website in the future, you need a way to get paid.
It may seem like a lot. But it's actually quite simple.
In a nutshell, you need to install the plugin, configure some settings, and create your main directory listings pages.
2. Install Elementor for WordPress
Next up, let's get Elementor installed.
Find it in the WordPress.org directory. Or, go to Plugins → Add New and search for it in the WordPress plugins.
Elementor handles your listing website's WordPress theme and overall page-building experience.
Once installed and activated, you go through a quick setup process. Then, we're ready to move on to the next step.
3. Create your directory pages
Luckily, Business Directory does the work for you here!
These are the main pages you need:
- Directory listings page: this is where all your listings are shown.
- Listing submission page: this is where you people add listings to your site.
- Listing pages: these are automatically created when the listings form is submitted. These are the pages we'll customize in this tutorial.
The above pages are created automatically with the Business Directory Plugin. The listing pages are customizable using Elementor templates or the Elementor page builder, which we'll do in the next step!
4. Customize your pages for your business directory with Elementor
We gave you a sneak peek in the above section. But now we will show you how to make these two plugins work together.
And here's the best part: it's simple!
If you've ever used shortcodes, you'll be right at home with this solution. Let's take a look at how easy it is to edit your listing pages within Elementor:
First things first, find the Templates section in your WordPress admin panel:
From there, click on the Theme Builder menu item and choose Single Page (note: the template theme requires Elementor Pro).
Now, let's edit the page template. First, define a layout for the page. This can look however you want. And you can create a custom design for custom post types in this menu, too.
Remember, it can include any Elementor elements and Business Directory widgets.
Here's a list of the main widgets you can drag and drop into your page:
You can adjust the above widgets using a couple of settings.
For example, the Details widget includes an option to exclude sections of content. Adding ‘social' in the Fields to Exclude settings box allows you to display all the details in a listing, except for socials. Then you can freely place the social links elsewhere on the page.
Now you can design your images, default fields, and custom fields how you'd like and save your template.
It's easiest to see how it looks by clicking the settings gear in the screen's bottom left corner.
Under the Preview Settings, you can choose a listing for the preview.
After that, there is just one more thing to do. In the bottom left corner of the Elementor window, click Display Conditions.
Then, include the Listing → Directory page to apply this template to all listings pages in the pop-up.
And you're done!
Ready to create a business directory with Elementor?
Now with our Business Directory plugin and Elementor, you can customize everything to your heart's content.
Remember, it's not all or nothing, though. You can add as little or as much customization as you want.
So, if you're ready, grab a premium plan to Business Directory Plugin and get started now!