The World’s Most Advanced And Scalable WordPress Directory Plugin

Recently we built Blockstrap, which is both a plugin (providing the page building blocks) and a block theme (FSE – Full Site Editing) that combines the power of WordPress’s new Site Editor and Bootstrap 5.

We built Blockstrap as the framework for our new wave of Directory Themes, which soon will include a Generic Business Directory and Events Theme, a Real Estate Theme, a Job Board Theme a Classified theme, and many more Directory Templates for WordPress,

All these themes are specifically designed to create a pixel-perfect Directory site using Geodirectory.

In this tutorial, you will find a step-by-step guide to building a Directory Website using the Blockstrap Theme, the Directory Child Theme, and our Geodirectory plugin:

1. Install the Blockstrap/Directory Theme
2. Install and setup GeoDirectory
3. Design the Directory Website using the Block theme Builder

In this guide, we’ll show you how to make a cool online directory using the Directory Theme and the GeoDirectory Plugin.

With this setup, you can easily add features based on location, make your site look awesome, and add different kinds of content that changes dynamically.

But for now, we’re going to keep things simple and easy to understand.

In this tutorial, we’ll cover:

• Install and setup the theme and plugins
  1. Install the Blockstrap/Directory Theme
  2. Install GeoDirectory
  3. GeoDirectory Install Wizard
     • Choosing the Map System
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the Blockstrap/Directory Directory Website
  1. The Logo
  2. The Home page design
     • The Header
     • The Content
  3. The Listings and Search page design
  4. The single Listing page design

Installing Theme and Plugins.

1. Install the Blockstrap Theme and its Directory Child Theme

First, Let’s Install the Directory theme. Since it’s a child theme of Blockstrap it will automatically install the main theme too.

Installing the Blockstrap theme will also prompt you to install the Blockstrap plugin.

the Blockstrap plugin is our page builder, needed to add the collection of Blockstrap blocks to enhance the design of your directory website.

If you’re curious about the three 1-star reviews for the Theme, please note that these reviews are actually for a very old version of this theme built by other developers, not the current one. We acquired the original “Directory” Theme and its URL (wordpress.org/themes/directory/) because we appreciated its concept and wanted it for our new product. Unfortunately, this meant inheriting its past negative reviews.

You can go to your WordPress website and from 

WP-Admin >> Appearance >> Themes >> Add New: Search Directory and install the first theme option.

2. Install GeoDirectory

Here’s what to do:

1. Go to “Plugins” and then “Add new”.
2. Search for GeoDirectory.
3. Install and activate it.

That’s it! The plugins are all set up now.

3. GeoDirectory Install Wizard

For GeoDirectory, you must complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

In the first step of the setup, you choose between two map systems: Google Maps and OpenStreetMaps. For this guide, we’re going with OpenStreetMaps.

If you prefer Google Maps, there are a few extra steps:

1. Click on the “Generate Key” button and follow the instructions provided here to create a valid API key.
2. These are the important steps:
   • Activate the Keys.
   • Create a new project or select an existing one.
   • Obtain the Key.
   • Set up a billing account.
   • Limit the API key (so it only works from your website’s URL).

Step four is essential, but you only pay if you exceed $200 a month. However, the free credit usually covers the needs of most directories.

Now, let’s move on to setting the default city.

Setting the default city

Afterward, you’ll select the default location, which is the main city featured in the directory.

We’ve decided on Philadelphia as the default city, but you’re free to choose any location you prefer.

If you’re creating a directory covering multiple cities, you’ll require the Location Manager add-on.

Adding extra features

In this step, we’ll set up UsersWP, a plugin for user registration. This allows users to sign up and log in to your website.

UsersWP is essential for users to manage their listings, create profiles, and access features like reviews.

Additionally, we’ll install Ninja Forms, which adds contact forms to all listings. These forms send emails directly to the listing owners. (NOTE: BlockStrap has a simple contact form that can be used for this, Ninja forms is useful for more advanced forms)

Note that AyeCode Connect isn’t required for this tutorial unless you want to add premium GeoDirectory add-ons directly from your WordPress Dashboard.

Adding Dummy Data

The last thing to do in the installation wizard is to add some sample listings. This also creates categories for the listings, but you can always change them later if you want.

Design the Blockstrap/Directory Theme Directory Website

Now that we have installed the theme and plugins, and completed the preliminary setup of GeoDirectory, we can begin designing our directory website.

Our Blockstrap’s child theme called the Directory theme, already provides a prebuilt block template for Geodirectory pages.

In this article, we will customize these prebuilt templates directly.

1. Blockstrap/Directory Home page design

To customize the homepage design.
Go to Appearance >> Editor >> Click Templates

Now select the Front page template and click the edit icon.

before editing the homepage template let’s first create a Logo for the website.

1. The Logo

First things first, we need a logo for our website.

You don’t have to hire a designer to create the first version of your logo.

One of the biggest mistakes you can make when starting a new directory is spending too much time and money before testing if people need what you intend to build.

You can make a logo in just five minutes using an app like Canva, which is amazing and free (or cheap for what it offers if you choose a premium plan).

For a basic version of your product (called MVP, or minimum viable product), a logo made with Canva will do just fine.

There are lots of logo templates to pick from, and it’s okay if your first logo isn’t perfect or super unique.

If your project starts to do well, you can always work on improving or completely changing the logo later on.

A regular logo usually isn’t why a project fails.

We’ll use this logo when we create the header for the website.

The Header

Now let’s add this logo image by selecting the proper block from the left side as mentioned in the below screenshot.

Now Let’s add a few required menu items. Like Home, Places, and Blogs, Contact, and About in our case.

You can use the BS > Nav item block to add the new menu item.

PRO TIP: If you decide to use the transparent header for the home page, you’ll need to add the logo to both the regular header and the transparent header.

The Content

This is how the default homepage looks with the Blockstrap’s Directory Child Theme.

It already seems complete in itself but we will make some minor changes to it.

The gd_location shortcodes belong to the Geodirectory Location Manager addon. since we are not using this addon at the moment I am removing these shortcodes that you see in below screensort.

Now this is how our homepage looks now.

If you want to add a new section or make any changes to any page content. You can use the Blockstrap theme inbuilt blocks that start with BS >

2. Blockstrap/Directory Website Listings and Search page design

As mentioned earlier Blockstrap and Directory themes already have prebuilt templates for GD Pages.

All these templates are complete in themselves so we aren’t required to make any changes to them.

Since inner pages use a hero header. we have to customize the Archive page header section and update it with the new logo and menu items.

Let’s Go to Appearance >> Editor >> Click Templates >> Select GD Archive for Archive page layout.

Similar to the homepage we will upload the new logo and menu items here on the GD Archive page header.

This is how the GD Archive page looks with the default design.

similarly, for the GD Search page select the GD Search Archive template and make the necessary changes in it.

I am keeping the layout to default for this article.

3. Blockstrap/Directory Website single Listing page design

To customise the GD Detail page select the GD Single page template and make the necessary changes in it.

This is how the default template of the GD Details page looks. which seems complete and contains all the required elements. So I am not going to edit it.

Adding Premium Features to your Blockstrap/Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, You get to choose how much it costs to add a listing. You can set different prices for different options. For instance, you might offer more features for paid listings, like allowing more pictures, while limiting features for free ones. You can also decide which special fields are available and how long the descriptions can be.
2. Claim Listings: This feature is super important for a directory. Here’s how it works: First, the admin sets up the database. Then, they invite business owners to manage their free listings. If a business owner wants full control, they might need to upgrade to a paid listing first.
3. Advertising: selling ads is another form of monetizing an online directory. If your website has many visitors, you can use ad networks. But if it doesn’t, you can sell ads directly. This means businesses can pay to display banners in specific areas of your site, or their listings can appear as ads, such as at the top of search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a worldwide market for handmade items, sell tickets to events, or offer discount coupons.

If you’re interested in getting started, dive into this resource: How to create a directory website from scratch.

This tutorial is versatile and can be adjusted to work with any theme or page builder.

The options for what you can do with your website are endless.

Conclusion

We published a large number of tutorials, about building a Directory with the most prominent themes and page builders.

If you read any of them, you will notice that building with the Blockstrap framework and its directory child theme, is easier.

The result is way better looking.

And least but not last, if you test a Blockstrap Directory Website, you will also notice that it is a lot faster than any other we created tutorials for, up to now.

The best thing, both the Blockstrap Theme and Plugin and the Directory Child theme are 100% free!

So, what are you waiting for? Start your Directory Website with Blockstrap and the GeoDirectory Plugin and start making money online now!

How to build a directory website with Bricks Builder?

Here’s a step-by-step guide to building a Directory Website using the Bricks builder and Geodirectory plugin:

1. Install the Bricks theme
2. Install and setup GeoDirectory
3. Design the Directory Website using the Bricks Builder

Using the Bricks Builder alongside the GeoDirectory Plugin enables you to create an exceptionally sophisticated online directory.

This combination allows for effortless integration of location-based features, customization of aesthetics, and incorporation of dynamic content blocks, resulting in a user-friendly and engaging website experience.

However, in this tutorial, we will focus on simplicity and ease of use.

We will use the Bricks builder mainly with the GeoDirectory Shortcodes.

In the next few weeks, we will dig deeper and publish detailed tutorials on how to design each GD template mainly with Bricks Element and query loops (dynamic data).

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the Bricks Theme
  2. Install GeoDirectory
  3. GeoDirectory Install Wizard
     • Choosing the Map System
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data

• Design the Bricks Directory Website
  1. The Logo
  2. The Home page design
     • The Navigation Menu
     • The Header
     • The Content
     • The Footer
  3. The Listings and Search page design
  4. The single Listing page design

Installing Theme and Plugins.

1. Install the Bricks Theme

First, download the theme and child theme from the Bricks website.

Install the theme in your WordPress website from WP-Admin >> Appearance >> Themes

Activate the theme license.

2. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we finished installing the plugins.

3. GeoDirectory Install Wizard

For GeoDirectory, you will need to complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

On the first step of the wizard, you get to pick between two mapping systems: Google Maps and OpenStreetMaps.

For this guide, we’re picking OpenStreetMaps.

If you want to use Google Maps instead, you’ll need to do a few extra things:

• Click on the “Generate Key” button and follow the instructions in this guide to make a valid API key.
• Here are the important steps:
  1. Turn on the Keys.
  2. Make a new project or choose one you already have.
  3. Get the Key.
  4. Set up a billing account.
  5. Restrict the API key (so it only works from your website’s URL).

Point four is a must-do, but you only pay if you go over $200 a month.

This free credit is more than enough for 99% of directories.

Setting the default city

Next, you’ll choose the default location, which is the city the directory is all about.

We’re going with Philadelphia as the default city, but you can pick any place you want.

If you’re making a directory for multiple cities, you’ll need the Location Manager add-on.

Adding extra features

In this step, we will install our UsersWP, a user registration plugin that lets users register and log into your website.

This is needed to allow users to add and edit their listings. It will also create user profiles where they can find their listings, reviews, and so on.

We will also install Ninja Forms so that all listings have a contact form that sends emails directly to the listing owners.

You don’t have to use AyeCode Connect for this tutorial. It’s only necessary if you want to add premium GeoDirectory add-ons and install them right from your WordPress Dashboard.

Adding Dummy Data

The final step in finishing the installation wizard is to put in some dummy listings. This also sets up categories for listings, which you can change later as you like.

Right now, we won’t add any sidebar widgets or menu items. We’ll take care of that later.

Design the Bricks Directory Website

Now that we installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website.

1. The Logo

First things first, we need a logo for our website.

You don’t have to hire a designer to create the first version of your logo.

One of the biggest mistakes you can make when starting a new directory is spending too much time and money before testing if people want it.

You can make a logo in just five minutes using an app like Canva, which is inexpensive and really good.

For a basic version of your product (called MVP, or minimum viable product), a logo made with Canva will do just fine.

There are lots of logo templates to pick from, and it’s okay if your first logo isn’t perfect or super unique.

If your project starts to do well, you can always work on improving or completely changing the logo later on.

A regular logo usually isn’t why a project fails. We’ll use this logo when we create the header for the website.

1. Bricks Directory Home page design

You can create a new page or use one WordPress creates by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

You will have to set this page as the site Homepage for that go to wp-admin >> Settings >> Reading

Now let’s first set up the site Navigation menu.

The Navigation Menu

Go to Appearance > Menus, and create your menu.

Add the links needed (from the left column to the right column) and save. In the Menu Settings > Display location section, you can check the “Header menu – Logged in user and Header menu – Logged out user” options.

If you want, you can make the same menu appear on the mobile or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. Places and add places
3. Search
4. Blog
5. Account
6. Register & Login pages

The Header

To set the site header go to wp-admin >> Bricks >> Templates >> Add New

Create a Bricks template for the header.

we will select a two-column layout with a 30::70 ratio.

In the left column drag the Logo block and upload the site logo in it.

Let’s set the width:200px

In the right column drag the Nav menu in the right column.

with settings like
Algin main axis: center
Align cross axis: Right

Typography
Text Transform: Poppins 500

The Content

Now to design the homepage. we will edit the homepage by clicking on the edit with Bricks buttons.

We will add an empty container with following settings
Align self: Center
Align Main Axes: Center
Align cross axis: Center

In the Style tab of section

Padding: 50px (Top) 50px( bottom)
min Height: 500
Upload Background Image
Background position: Center Center
Background repeat: Repeat

Now let’s add a heading tag over this container.
Text: Find The Best Restaurant In Philadelphia

Now in the style tab of the heading tag add the following settings.
Typography:
Font size: 48px
Text align: Center
Text transform: Captalize
Font: Poppins

Now add a shortcode block below it and add the [gd_search mb=”3″] shortcode inside it.

Now let’s add one more empty container and add a shortcode block in it with the following shortcode.

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]

In the style tab of the category container. Go to Layout > Margin

Padding Top: 50px
Padding Bottom: 50px
Padding Left: 50px
Padding Right: 50px

Now we will add a section to display Recent business.

let’s add one more empty section with a Header tag and
Text: Recent Business Listing

with the following typographical like
Font Size: 32px

Now below it let’s add the following shortcode

[gd_listings post_type="gd_place" post_limit="8" add_location_filter="1" sort_by="latest" title_tag="h3" layout="4" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]

Now below it, we want to add a map that lists all the businesses.
For that, we will add an empty container and shortcode block inside it with the following shortcode.
with the following style for the container.
Padding top: 50px
Padding bottom: 50px

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

Now we want to add a CTA for that we will use a two-column layout.
With following settings
Direction: Horizontal(row)
Align self: Center
Align cross axis: Center
Column gap: 20
Row gap: 20

In the left column, we will drag an image and in the right column we will add some text and a button to add listing page.

The Footer

Now to design and create a footer go to wp-admin >> Bricks >> Templates >> Add New
and select the template tag as Footer and edit the template with Bricks.

Now let’s add an empty container with the Background color: #072027

Add the basic text block with some text and style Text Align: Center

After this our homepage is ready.

2. Bricks Directory Website Listings and Search page design

You have to make two important pages for a directory: one for listings (including an archive, categories, and tags) and another for search results.

GeoDirectory automatically sets them up with a basic design. This guide will help you tweak the look of these pages a little.

Since the listing and search pages are very similar, we’ll design them once and then use the same layout for both.

Our choice for the Listing page design is to have the listings on the left and a sticky map on the right, showing where each listing is located.

This is very easy.

Go to Geodirectory > Settings > General > Pages > Click on edit GD Archive page template

Remove all the content from this GD Archive page template and edit it with Bricks Builder.

Now we will add an empty section and inside it drag the Post Title block.

From the section style setting set
Background color: #072027
Padding: 30px 10px 30px 10px

For the post-title block set the Typography setting to
Font: Poppins
Color: #fffff

Now let’s add an empty section and two column container ( 50::50 ) in it.

Next, on the left container, we will add shortcode blocks with the GD Archive page-related shortcodes like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

[gd_search bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop_actions bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop layout='2'  row_gap=''  column_gap=''  card_border=''  card_shadow=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop_paging show_advanced=''  bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

We will add a Shortcode block with the GD > Map shortcode on the right column with the following setting.

[gd_map map_type="auto" post_settings="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]

We will also add a class scrolling-gd-loop to the left column for scrolling touch. You can check the option marked in the below screenshot.

Let’s add the following style to the theme customizer.

.scrolling-gd-loop{
    overflow-y: scroll !important;
    max-height: 1000px;
}

Now after this, our Archive page is ready.

To create the search page layout.

We will create the GD Search page template from Bricks >> Templates >> Add New. Make sure to select Select template type: GD Search Results

Copy all the content of the GD Archive Bricks template and paste it into the GD Search page Bricks template.

To do so, on the GD Archive Page, click the Copy (all) icon on the Bricks Builder right column (Structure)

Navigate to the Search Page, You can find the Search page from Geodirectory > Settings > General > Pages.

Edit it with Bricks. Click the Remove (all) icon on the Bricks Builder right column:

Finally, click the Paste (all) icon on the Bricks Builder right column:

This will make the search page and the Archive page identical, full width, with the results on the left column and the fixed map on the right column.

For the search page, we also need to instruct Bricks to show this template on the individual page.

To do this we need to click on the Gear Icon > Template Settings > Conditions > Individual > Search Page (Title of your search Page).

3. Bricks Directory Website single Listing page design

It’s time to create the detail page template. We will go and edit the GD Detail page template in Bricks.

You can go to Geodirectory > Settings > General > Pages > Click on edit GD Detail page template.

In this template, you will already find default content generated by Geodirectory.
we will remove all these default content and edit it using Bricks.

Let’s add an empty section and add a shortcode block inside it.

Let’s use the following shortcode to show the image slider.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide" image_size="large"]

Now with in an empty section let’s add a two-column container.

In the left container, we will add the following shortcodes.

Which includes GD > Post Title, GD > Single Taxonomies, and GD > Single Tabs.

[gd_page_title tag='h1'  no_wrap='false'  title_container='1'  strip_html=']
[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false']
[gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]

In the right column, we will add the 
GD > Author Action, and GD > Output Location block.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false']
[gd_output_location location="detail" list_style="wrap"]

After doing it, our Listing Detail page is complete.

Adding Premium Features to your Bricks Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, You can decide how much it costs to add a listing. For different price levels, you can choose what features are included or not. For example, you might allow more pictures for paid listings but limit them for free ones. You can also decide if certain custom fields are available or not, and if descriptions can be longer or shorter.

1. Claim Listings: This feature is really important for a directory. Here’s how it works: the admin sets up the database and then invites business owners to manage their free listings. When a business owner wants to take control of a listing, they might need to upgrade to a paid listing first.

1. Advertising: selling ads is another form of monetizing an online directory. If your website gets a lot of visitors, you can use ad networks. But if it doesn’t, you can sell ads directly. That means businesses can pay to put banners in certain parts of your site, or their listings can show up as ads, like at the top of search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

For those embarking on their first project, here’s your guide: Building your own directory website.

This generic tutorial can be adapted to any theme or page builder.

The possibilities are limitless.

Follow these steps to create a Directory Website using the BuddyBoss and Geodirectory plugin:

1. Install the BuddyBoss theme and the BuddyBoss Platform.
2. Set up GeoDirectory.
3. Install the Elementor plugin.
4. Design your Directory Website using the BuddyBoss theme and the Elementor.

By combining BuddyBoss with the GeoDirectory Plugin and the Elementor Plugin, you’ll have a versatile platform for crafting a polished online directory along with social networking features.

Utilizing this combination and following the mentioned steps in this article. One can easily create a user-friendly Directory site with Social Networking features.

Let’s explore the details of how this can be accomplished.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the BuddyBoss Theme and the BuddyBoss Platform
  2. Install Elementor plugin
  3. Install GeoDirectory
  4. GeoDirectory Install Wizard
     • Choosing the Map System
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
  5. GeoDirectory BuddyBoss Integration
• Design the BuddyBoss Directory Website
  1. The Home page design
     • The Logo
     • The Navigation Menu
     • The Content
  2. The Listings and Search page design
  3. The single Listing page design

Installing Theme and Plugins.

1. Install the BuddyBoss Theme and the BuddyBoss Platform

We need to install a Theme, and for this tutorial, you will install the BuddyBoss Theme.

Go to buddyboss.com, buy and download the BuddyBoss theme and BuddyBoss platform.

Go to Appearance >> Themes

Select Add New, Install, and Activate the BuddyBoss Theme.

Go to Plugins >> Add New

Select Upload, Install, and Activate the BuddyBoss platform plugin.

Now let’s configure BuddyBoss.

Go to BuddyBoss >> Components

I am enabling all the components, you can decide based on your needs.

Now let’s set up a few required pages for BuddyBoss from the BuddyBoss >> Pages

I will keep all settings to default but you can check them and make required changes if you want.
Now our site is ready with all Social networking features and BuddyBoss look and feel.

2. Install the Elementor plugin

To style the templates, we will install the Elementor plugin.

The Elementor plugin provides many customization features that are better than the default and will help you design the page templates.

There is an Elementor pro version that provides many features and Geodirectory is compatible with both of them.

We will use the Elementor free version for this Article.

Go to Plugins >> Add new.

Search for Elementor. Install it and Activate it.

3. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we finished installing the plugins.

4. GeoDirectory Install Wizard

For GeoDirectory, you will need to complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

You can choose between two mapping systems on the wizard’s first step. Google Maps and Open Street Maps (which doesn’t require an API key).

In this tutorial, we select OpenStreetMaps.

In case you wish to select Google Maps, do the following extra steps.

Click on the Generate Key button and follow the steps of this doc to generate a valid API key.

The essential steps are:

1. Enable the Keys.
2. Create or select an existing project.
3. Get the Key.
4. Activate a billing account.
5. Restrict the API key (so it can only be used from the URL of your website)

About point four: it is a requirement. However, you only get charged if you pass the threshold, which is $200/month.

This free credit is more than enough for 99% of directories.

Setting the default city

After that, you will set the default location. This is the city for which the directory is created.

We will set Philadelphia as the default city.

You can use whatever location you need.

If you need to add listings to more than one city, you will need the Location Manager add-on.

Adding extra features

In this step, we will install our UsersWP, a user registration plugin that lets users register and log into your website.

This is needed to allow users to add and edit their listings. It will also create user profiles where they can find their listings, reviews, and so on.

We will also install Ninja Forms so that all listings have a contact form that sends emails directly to the listing owners.

AyeCode Connect is not mandatory for this tutorial. It is mainly needed if you want to add GeoDirectory premium add-ons and install them directly from the WordPress Dashboard.

Adding Dummy Data

The last step to complete the installation wizard is adding some dummy listings. This will also add listing categories that you can edit later according to your needs.

You will not add sidebar widgets and menu items right now, as we will do that later.

5. GeoDirectory BuddyBoss Integration

To connect BuddyBoss with Geodirectory. we need the GeoDirectory BuddyBoss Integration which works for both BuddyBoss and BuddyPress integration.

Download this addon from the Geodirectory dashboard, upload and install this plugin.

from the Geodiectory >> Settings >> BuddyPress tab enable all settings mentioned in the below screenshot.

This plugin will allow users to maintain their listings from the BuddyBoss profile page.

Design the BuddyBoss Directory Website

Now that we installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website.

1. BuddyBoss Directory Home page design

You can create a new page or use one WordPress creates by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

The Logo

First thing first, we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

After designing your logo, go to BuddyBoss > Theme Options > Logo, and upload your PNG file.

Skip cropping (or crop the image as needed), in Logo Layout and click save change.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus, and create your menu.

Add the links needed (from the left column to the right column) and save. In the Menu Settings > Display location section, you can check the “Header menu – Logged in user and Header menu – Logged out user” option.

If you want, you can make the same menu appear on the mobile or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. Places and add places
3. Members
4. Blog
5. Contact Us

The Content

I will start building this page from scratch using the Elementor plugin.

We already have an article on How to Create a Directory Website with Elementor.

In this article, we will add BuddyBoss to the mix.

We need a hero header on the homepage for that, To do this, go to Pages > Home and click Edit with Elementor.

Add a section. (Click the plus button of the page builder where it says Drag widget here.)

Now you have a blank page with only one section of one column.

Let’s upload a background image from the container style section and also a few settings like
Position: Center Center
Repeat: No Repeat
Display Size: Cover
Background overlay: #000000
Opacity: 0.51

In the layout section of the container, we will have the following settings
Min Height: 500
Direction: Column vertical
Justify center: center
Align Item: Center

Then let’s add a header tag on top of it with the Text: Find The Best Restaurant In Philadelphia​ and the following settings
HTML Tag: H1
Alignment: Center
Text Color: #ffffff
Typography Size: 48px

Next, let’s draft the GD > Search block and blow it with default settings. In advance tab make width: Full Width(100%)

Let’s add one more empty container below it and drag GD > Categories block to display lists of categories.
Set the GD > Categories block settings to the following
Design type: Image Background
Row Items: 4
Enable the Use Category Image option

You can set the image to a category by editing the category from wp-admin -> places -> Place Categories.

Each category has an option to set a default image

Now, we will add an empty container with a Heading tag and
Text: Recent Business Listing​
Alignment: Center
Typography Size: 38px

Let’s add GD > Listings block blow it with the following settings
Sorting: recent
Grid: 4

Below, within an empty container drag the GD > Map shortcode.

With the following settings in the Elementor container
Content width: full width
Gap: 0
Margin: Top bottom 50px
Padding: 0px

Finally, we will add a CTA for redirecting users to the add listing page.

Add an empty container with two-column layout.

In the left container add an image box.

In the right container, we will drag the heading, text, and button to make it look like the below

After this, our Homepage is ready.

2. BuddyBoss Directory Website Listings and Search page design

You have to make two important pages for a directory: one for listings (including an archive, categories, and tags) and another for search results.

GeoDirectory automatically sets them up with a basic design. This guide will help you tweak the look of these pages a little.

Since the listing and search pages are very similar, we’ll design them once and then use the same layout for both.

Our choice for the Listing page design is to have the listings on the left and a sticky map on the right, showing where each listing is located.

This is very easy.

Go to Geodirectory > Settings > General > Pages > Click on edit GD Archive page template

Remove all the content from this GD Archive page template and edit it with Elementor.

From page settings set page layout to Elementor Full width.

Now let’s add an empty container with the following settings

Direction: Column vertical
Justify center: center
Align Item: Center
Background color: #2143D3

Now let’s drag the GD > page title block over it.

Now let’s add a two-column layout with the following settings.
Content width: full width
Gap: 0

Next, on the left container, we will add GD Archive page-related blocks like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

We will also add a class scrolling-gd-loop to this column for scrolling touch.

On the right column, we will drag the GD > Map block with the following setting.
Column setting
Padding: 0px
Margin: 0px

the GD > Map shortcode settings to default and
Height: 100%
Width: 100vh

Let’s add the following style to the theme customizer.

.scrolling-gd-loop{
    overflow-y: scroll !important;
    max-height: 1000px;
}

Now after this, our Archive page is ready.

To create the search page layout.

Copy all the content of the GD Archive Elementor template and paste it into the GD Search page Elementor template.

You can find the Search page from Geodirectory > Settings > General > Pages.

3. BuddyBoss Directory Website single Listing page design

It’s time to create the detail page template. We will go and edit the GD Detail page template in Elementor.

You can go to Geodirectory > Settings > General > Pages > Click on edit GD Detail page template.

In this template, you will already find default content generated by Geodirectory.
we will remove all these default content and edit it using Elementor.

Let’s add an empty container
Content width: full width
Gap: 0
Margin: Top bottom 50px
Padding: 0px
Direction: Column vertcal
Justify center: center
Align Item: Center

Let’s now drag the Gd > Post Images shortcode inside it with the following settings.
Image Limit: 10
Show limit: 3
Output Type: Slider
Auto Start: Enable

Make sure the container width: full width( 100%)

Let’s add a two-column column layout.

On the left column one by one.

Which includes GD > Post Title, GD > Single Taxonomies, and GD > Single Tabs.
On the right column, we will add the (BB) Post Author, GD > Author Action, and GD > Output Location block.

After doing it, our Listing Detail page is complete.

Adding Premium Features to your BuddyBoss Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as Restricting the number of pictures for free listings while allowing more images for paid listings and more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Discover the necessary steps for your next online venture here: Steps to create a successful directory website.

This generic tutorial can be adapted to any theme or page builder.

The possibilities are limitless.

Here’s a step-by-step guide to building a Directory Website using the Blocksy theme and Stackable – Page Builder Gutenberg Blocks plugin:

1. Install the Blocksy theme
2. Install the Stackable – Page Builder Gutenberg Blocks plugin
3. Install and setup GeoDirectory
4. Design the Directory Website using the Blocksy theme and the Stackable – Page Builder Gutenberg Blocks plugin

The Blocksy Theme, combined with the GeoDirectory Plugin and Stackable – Page Builder Gutenberg Blocks Plugin, creates a versatile and advanced platform for building a sophisticated online directory.

This integration allows users to seamlessly integrate location-based features, customize layout options, and introduce dynamic content blocks, ensuring a user-friendly and engaging interface.

This integrated system enables web developers and designers to create a premier directory website tailored to specific industry needs or broader community requirements.

Let’s explore the details of how to accomplish this.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the Blocksy Theme
  2. Install Stackable – Page Builder Gutenberg Blocks plugin
  3. Install GeoDirectory
  4. GeoDirectory Install Wizard
     • Choosing the Map System
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the Blocksy Directory Website
  1. The Logo
  2. The Home page design
     • The Navigation Menu
     • The Content
  3. The Listings and Search page design
  4. The single Listing page design

Installing Theme and Plugins.

1. Install the Blocksy Theme

We need to install a Theme, and for this tutorial, you will install the Blocksy Theme.

Go to Appearance >> Themes

Select Add New, Install, and Activate the Blocksy Theme.

2. Install the Stackable – Page Builder Gutenberg Blocks plugin

The default Gutenberg plugin is not enough to style a template so we will install the Stackable – Page Builder Gutenberg Blocks plugin.

This plugin provides customized blocks that are better than the default and will help you design the page templates.

Go to Plugins >> Add new.

Search for Stackable – Page Builder Gutenberg Blocks. Install it and Activate it.

You can Skip all steps of the Setup Wizard.

3. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it, and we finished installing the plugins.

4. GeoDirectory Install Wizard

For GeoDirectory, you will need to complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

You can choose between two mapping systems on the wizard’s first step. Google Maps and Open Street Maps (which doesn’t require an API key).

In this tutorial, we select OpenStreetMaps.

In case you wish to select Google Maps, do the following extra steps.

Click on the Generate Key button and follow the steps of this doc to generate a valid API key.

The essential steps are:

1. Enable the Keys.
2. Create or select an existing project.
3. Get the Key.
4. Activate a billing account.
5. Restrict the API key (so it can only be used from the URL of your website)

About point four: it is a requirement. However, you only get charged if you pass the threshold, which is $200/month.

This free credit is more than enough for 99% of directories.

Setting the default city

After that, you will set the default location. This is the city for which the directory is created.

We will set Philadelphia as the default city.

You can use whatever location you need.

If you need to add listings to more than one city, you will need the Location Manager add-on.

Adding extra features

In this step, we will install our UsersWP, a user registration plugin that lets users register and log into your website.

This is needed to allow users to add and edit their listings. It will also create user profiles where they can find their listings, reviews, and so on.

We will also install Ninja Forms so that all listings have a contact form that sends emails directly to the listing owners.

AyeCode Connect is not mandatory for this tutorial. It is mainly needed if you want to add GeoDirectory premium add-ons and install them directly from the WordPress Dashboard.

Adding Dummy Data

The last step to complete the installation wizard is adding some dummy listings. This will also add listing categories that you can edit later according to your needs.

You will not add sidebar widgets and menu items right now, as we will do that later.

Design the Blocksy Directory Website

Now that we have installed the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the Blocksy theme and Stackable – Page Builder Gutenberg Blocks plugin.

1. Design The Website Logo

First things first: we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

After designing your logo, go to Appearance > Customize > Header, click the Change logo link, and upload your PNG file. Skip cropping (or crop the image as needed), in Logo Layout select the option Logo and click publish.

2. Blocksy Directory Home page design

You can create a new page or use one WordPress makes by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus, and create your menu.

Add the links needed (from the left column to the right column) and save. In the Menu Settings > Display location section, you can check the “Main” option.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Profile
6. Login
7. Logout

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

Set the menu settings to Font: Default Font / 14px / Bold 700

The Content

I will start building this page from scratch using the Stackable – Page Builder Gutenberg Blocks plugin.

We need a hero header on the homepage for that, let’s add a column block provided by the Stackable – Page Builder Gutenberg Blocks plugin.

In Column layout setting
Block Width: Align Full
Content Width: Align Full
Content Max Width: 1200px

Next, check the block setting and set the Background image.

For the Hero Section, we will need an image, and we will download a free image from Pexels.com (Thanks, @rachel-claire).

Now let’s add a heading block over image with
Content: Find The Best Restaurant in Philadelphia
Title HTML tag: H1
Size: 48
Text Color: #000000

Now we will also add the GD > Search block below it.

Now let’s add one more empty column with padding 50px from top and bottom.

we will drag the GD > Categories block inside it to display list of categories.

Now let’s add one more empty container with following settings.

Block Width: Align Full
Content Width: Align Full
Content Max Width: 1200px
Color: #00000

Now, let’s proceed to add the third section to our website. we will call it “Recent Business Listing“.

Add a GD > Listing block by clicking on the plus icon and then accessing the block settings. Make sure to enable the Show Advanced Settings option.
In the block Style tab, please update the Layout: Grid View (Four Columns).

Change the number of posts to show: 8 and ensure that you check the Enable location filter option and set the Sort By: Latest.

Now let’s add one more empty container with following settings.

Block Width: Align Full
Content Width: Align Full

Add the GD > Map block to it and keep the settings to
Width: 100%
Height: 450px

At last we will add a CTA. we will use one of predefind template

Make sure to use following setting

Block Width: Align Full
Content Width: Align Full

Congratulations! Your homepage is Completed.

3. Blocksy Directory Website Listings and Search page design

Listings page

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will customize the layout of these pages a bit.

The listing and search pages are mostly identical so we create it once and just copy the layout on the other page.

We decided the Listing page layout would be the listings on the left, and on the right, a sticky map showing the listings’ precise location.

This is very easy.

Go to Geodirectory > Settings > General > Pages > Click on edit GD Archive page template

Remove all the content from this GD Archive page template.

Let’s add an empty column with following setting
Block Width: Align Full
Content Width: Align Full
Content Max Width: 1200px
Color: #00000
Padding: 30px

Let’s add the GD > post title shortcode in it.

Now, add a Column block with a 50:50 layout.

Now on the left container, we will drag GD Archive page-related widgets like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

In the right column, drag the GD > Map block, and we’ll leave all the settings at their default settings. However, we’ll set the height of the GD > Map block to 100vh.

To give it a final touch we will add the following CSS in the theme customizer from Appearance => Customize => Add CSS

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
	  height:100vh;
		padding-right:15px;
}

.breakdance .bde-column-111-108.bde-column{
	overflow:hidden;
}

After this, the Listing Archive page is now ready.

For the search page, we repeat the same process.

Search page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Search page template

Remove all the content from this GD Search page template.

Copy all the content of the GD Archive page and paste it into the GD Search page.

Finally, you will need this CSS to make the Search Page Full Width.

.geodir-page-search #main article {
max-width: 100%;
}

So now our GD Search and Archive pages are ready.

4. Blocksy Directory Website single Listing page design

First thing we will disable the default title from Appearance > Customize > Places > Single Place and disable title as mentioned below.

Now to edit and customize the GD Detail page, You can go to Geodirectory > Settings > General > Pages > Click on edit GD Detail page template.

In this template, you will already find default content generated by Geodirectory.
we will remove all these default content and add a new column block.

First, let’s add an image slider at the top of the Listing Details page.

we will drag the GD > Post Image block in this container with the following settings

Image Limit: 10
Show limit: 3
Output Type: Slider
Auto Start: Enable

Now we will add one more Section block below it with a 70/20 layout.

Now let’s add all the required GD Detail page shortcodes on the left column one by one.

Which includes GD > Post Title, GD > Single Taxonomies, and GD > Single Tabs.
On the right column, we will add GD > Author Action and GD > Output Location block.

After this, our Listing Details page has been completed.

Adding Premium Features to your BlocksyDirectory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as: Restricting the number of pictures for free listings while allowing more pictures for paid listings. Allowing more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

If you’re considering starting an online business, creating a directory website might be the easiest way to begin.

Unlock the secrets to an online directory with this guide: Guide to creating a directory website.

Here’s an easy-to-understand guide on how to develop a Directory Website using the Avada theme and Avada Builder plugin:

1. Install the Avada theme
2. Install and setup GeoDirectory
3. Design the Directory Website using the Avada Builder

The Avada Theme, when used with the GeoDirectory Plugin and Avada Builder Plugin, is an excellent way to create a flexible online directory.

This combination enables easy addition of location-based features, customization of the layout, and inclusion of dynamic content for a user-friendly experience.

It allows web developers and designers to build a high-quality directory website tailored for specific industries or broader community needs.

Let’s delve into the details of how to accomplish this.

In this tutorial, we will:

• Install and setup the theme and plugins
  1. Install the Avada Theme
  2. Install GeoDirectory
  3. GeoDirectory Install Wizard
     • Setting the default city
     • Adding extra features
     • Adding Dummy Data
• Design the Avada Directory Website
  1. Design The Website Logo
  2. The Home page design
     • The Navigation Menu
     • The Header
     • The Content
     • The Footer
  3. The Listings Archive and Search page design
  4. The single Listing page design

Installing Theme and Plugins.

1. Install the Avada Theme

Avada is a versatile and popular WordPress theme known for its flexibility and powerful features.

It is a multipurpose theme that can be customized to create a wide range of websites with a user-friendly drag-and-drop builder, allowing users to easily design and customize their websites without the need for coding.

To purchase the Avada theme and explore its extensive features, you can visit the official ThemeForest marketplace: Avada Theme Purchase Link.

You can follow this video to set up the Avada theme.

2. Install GeoDirectory

Finally, you need to install GeoDirectory.

Go to Plugins >> Add new, search GeoDirectory. Please install and activate it. We finished installing the plugins.

3. GeoDirectory Install Wizard

For the GeoDirectory plugin, you should complete the Setup Wizard to configure the Google Maps API key and import a few dummy listings.

Choosing the Map System (Google Maps or OpenStreetMap)

You can choose between two mapping systems on the wizard’s first step: Google Maps and OpenStreetMaps (which doesn’t require an API key).

In this tutorial, we select OpenStreetMaps.

If you wish to select Google Maps, do the following extra steps.

Click on the Generate Key button and follow the steps of this doc to generate a valid API key.

The essential steps are:

1. Enable the Keys.
2. Create or select an existing project.
3. Get the Key.
4. Activate a billing account.
5. Restrict the API key (so it can only be used from the URL of your website)

About point four: it is a requirement. However, you only get charged if you pass the threshold of $200/month.

This free credit is more than enough for 99% of directories.

Setting the default city

After that, you will set the default location. This is the city for which the directory is created.

We will set Philadelphia as the default city.

You can use whatever location you need.

If you need to add listings to multiple cities, you will need the Location Manager add-on.

Adding extra features

In this step, we will install our UsersWP, a user registration and login plugin that lets users register and log into your website.

This is needed to allow users to add and edit their listings. It will also create user profiles where they can find their listings, reviews, and so on.

We will also install Ninja Forms so that all listings have a contact form that sends emails directly to the listing owners.

AyeCode Connect is not mandatory for this tutorial. It is mainly needed if you want to add GeoDirectory premium add-ons and install them directly from the WordPress Dashboard.

Adding Dummy Data

The last step to complete the installation wizard is adding some dummy listings. This will also add listing categories that you can edit later according to your needs.

You will not add sidebar widgets and menu items right now; we will do that later.

Design the Avada Directory Website

Now that we have installed the theme and the plugins and done the preliminary setup of GeoDirectory, we can start designing our Directory Website with the Avada Suite of tools.

1. Design The Website Logo

First things first: we will need a logo for our website.

You don’t need to invest in a designer to sketch the 1st version of your logo.

One of the biggest mistakes you can make when starting a new directory is investing too much time and money before testing the product market fit.

You can design a logo in five minutes with an app like Canva, which is cheap and surprisingly good.

For an MVP (minimum viable product), a logo designed with Canva will be more than enough.

There are several logo templates to choose from, and it doesn’t matter if your initial logo is not as perfect and original as you believe it should be.

If your project gets traction, you can always invest in improving it or radically changing it later.

An average logo is never the leading cause of a failed project.

2. Avada Directory Home page design

You can create a new page or use one WordPress makes by default, like the Sample Page.

Go to Pages, edit the Sample page, and rename it Home or create a new page for this.

Next, go to Appearance > Customize > Homepage Settings and select your Home.

The Navigation Menu

After creating and adding the logo, go to Appearance > Menus and create your menu.

Add the links needed (from the left to the right column) and save.

In the Menu Settings > Display location section, you can check the “Main Navigation” option.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In this example, we’ll only have the header navigation menu.

We added seven main navigation links and a few sub-navigation links:

1. Home
2. About
3. Blog
4. Places and add places
5. Profile
6. Login
7. Logout

The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the log-out, account, and profile links will only appear for logged-in users.

Create Header Layout

Now let’s create a site header layout using Avada builder.
So we will go to Avada > Layout and select the header from Global Layout.

Click on the Create New Layout button.

Now let’s click on the Live Builder button.

It will open the Avada Builder Library in front of us.

You will see many prebuilt templates for different sections.

In this example, we will select a prebuilt Header Layout from the studio section.

Now we will replace our Logo by clicking on the logo section of the prebuilt Header.
We will set the Image Max Width to 150px from the logo setting.

From the header menu, we will select or change the menu we want to show in the site header.

we will make some style and Alignment changes as mentioned in the below screenshot.

Our site Header is ready now. Let’s focus on homepage content now.

The Content

We will edit the Home page in Live Builder.

Let’s add an empty container to it with the following settings
Interior Content Width: 100%
Height: Minimum Height
Minimum Height: 500
Row Alignment: Stretch
Column Alignment: Center
Column Justification: Center

From the Background setting, we will add an image.
Background Position: Center Center
Background Repeat: No Repeat
Background Size: Center
Pattern: Dot
Pattern Color: rgba(0,0,0,0.41)

Now let’s add a Header title tag on top of the image with
Text: Find The Best Restaurant In Philadelphia
Typography:
Font Family: Inter
Variant: Bolt 700
Font Size: 42px
Font Color: #ffffff

Now let’s add the GD > Search block and keep it with default settings.

Now let’s add an empty container with the GD > Category block inside.

Design type: Icon Left
Row Items: 4

Now let’s add one more empty container with the GD > Listing block inside it with the following settings.
Sorting: recent
Grid: 4
Post o show: 8

Now let’s add an empty container with the following settings.
Interior Content Width: 100% Width
Height: Auto

Content Spacing: Left, Right 0px

Now we will add a GD > Map inside it.

At last, it’s time to add a CTA section. we will add an empty container.
we will add a Heading tag to it.

With following settings
Alignment: Left
HTML Heading Tag: H3

Now let’s add a button block to it with a link to the Add listing page.

Create Footer Layout

Finally, we will create a global footer layout. In a similar manner as we did for the header section.

In this example, we will use a prebuilt Footer layout.

You can make the changes to this footer layout. For now, I am keeping it to default.

After this last step, our homepage is ready.

3. Avada Directory Website Listings and Search page design

Now, you need to design two essential pages for any directory.

The listings page (general archive, categories, tags) and the search results page.

GeoDirectory creates them by default with a general layout. In this tutorial, we will create and customize the layout of these pages using Avada Builder.

The listing and search pages are mostly identical so we create it once and just copy the layout on the other page.

We decided the Listing page layout would be the listings on the left, and on the right, a sticky map showing the listings’ precise location.

This is very easy.

Listings page

Go to Geodirectory > Settings > General > Pages > Click on edit GD Archive page template

Remove all the content from this GD Archive page template.

Now edit the page using the Live builder.

We will add an empty container with content padding 0 from the Top and Bottom.

Now lets add a column inside and we will drag GD > Page title inside it.

Let’s set
backgrond color: #f6f6f9
Padding: 50px 0px 50px 0px
Container Link Color: #efefef

Now lets add a two column container.

Next, on the left container, we will add GD Archive page-related blocks like GD > Loop Action, GD > Loop, GD > Loop Pagination, and GD > Search on top so the user can search from the Archive page.

On the right column, we will drag the GD > Map block.

Let’s set the map
Height: 150vh
Padding: 30px 0px 30px 0px
and lets keep settings to default.

we will add the gd-loop-column class to the left column.

we will add the following CSS snippet in the theme customizer.

.gd-loop-column .fusion-column-wrapper{
    overflow-y: scroll;
    padding-right: 17px;
    max-height: 960px;
}

Our Archive page is ready.

To create the search page layout.
We will assign the Global header and Footer to this layout.

we will go to Avada > Layouts
we will add this and assign this layout to the search page.

In the Search page now create a search content template

and copy all the sections from the GD > Archive page to this search page.
After this our search page template is ready.

4. Avada Directory Website single Listing page design

Now it’s time to create the detail page template. We will go and edit the GD Detail page template in Avada Builder.

We will add an empty container with
Interior Content Width: 100% Width

We will add GD > Post images block in it with the following settings.
Image Limit: 10
Show limit: 3
Output Type: Slider
Auto Start: Enable

In the GD Details page make sure to disable Show first featured image.

Now again we will add a container with a two-column layout like below.

Now, let’s individually add all required GD Detail page blocks on the left column.

Which includes GD > post Title, GD > Single Taxonomies, GD > Single Tabs, and GD > Single Next Prev.

We will add the GD > Author Action and GD > Output Location block on the right column.

After doing it, our Listing Detail page is complete.

Adding Premium Features to your Avada Directory Website

If you wish, now you can add premium features to your directory, such as:

1. Paid Listings: with the GeoDirectory Listing Price Manager add-on, you can set prices for listing submission. For each price tier, you can enable/disable features such as Restricting the number of pictures for free listings while allowing more images for paid listings and more or fewer tags and categories. Enabling or disabling specific custom fields. Submitting longer or shorter descriptions.
2. Claim Listings: This is a fundamental feature for a directory where the admin creates the database and invites business owners to take control of their free listings. The claim listing process may include forcing an upgrade to a paid listing to take over the listing’s ownership.
3. Advertising: selling ads is another form of monetizing an online directory. If you have a lot of traffic, you can use Ads networks. Otherwise, you may sell ads directly, allowing businesses to add banners in specific areas of your website or allowing for listings to appear as ads, for example, on top of organic search results.

These are just three examples. However, a directory website offers many ways to make money online.

You can create a global marketplace of handcrafted items, sell event tickets, or sell discount coupons.

Newcomers, start your journey here: Launching a directory website: A beginner’s guide.

This generic tutorial can be adapted to any theme or page builder.

The possibilities are limitless.