How to Create a Directory Website With Divi

Divi is one of the most widely used WordPress themes and page builders, and it’s a natural choice if you already design in it and want to build a directory website, a business directory, real estate listings, a job board, or classifieds, without switching tools. This guide walks through what you actually need, how a directory plugin and Divi divide the work between them, and how to build both the archive page and the single listing page visitors will spend most of their time on.

Can You Create a Directory Website With Divi?

Yes, but Divi alone doesn’t get you there. Divi is a design and layout tool: it controls how a page looks, its typography, spacing, columns, and responsive behavior. It has no concept of a “listing,” a category filter, a submission form, or a payment gateway. For that, you need a dedicated directory plugin running underneath it.

That’s where Directorist comes in. Directorist handles everything for creating a directory website that Divi doesn’t: the listing data structure, custom fields, category and location taxonomies, frontend submission, search and filtering logic, and monetization. On its own, Directorist ships working pages built from shortcodes, functional also its own built niche directory themes and extensions but you design something cool with Divi.

The piece that connects the two is the Directorist Divi Builder Integration, a dedicated extension built for Divi 5 that replaces those shortcodes with real, styleable Divi modules, Listing Loop, Search, Listing Card Template, and more, so you design your directory the same way you’d design any other Divi page: Content tab, Design tab, Advanced tab, full typography and spacing control. Without this integration, you can still run a Directorist site on a Divi-powered theme, but the listing pages themselves stay locked inside static shortcode output that Divi can’t touch.

What You Need

Before you start, make sure you have:

• WordPress, version 6.9 or higher.
• Divi, either the Divi theme, a Divi child theme, or the Divi Builder plugin, built for Divi 5 specifically.
• A directory plugin, Directorist, plus the Directorist Divi Builder Integration extension, which is what actually adds Directorist’s modules to the Divi builder.
• Hosting with PHP 7.4 or higher that can handle a growing listings database as your directory scales.
• A domain name, registered through any registrar.
• SSL, since a directory site collects user submissions, logins, and often payments, all of which need HTTPS.
• Maps, if your directory is location-based, Directorist supports Google Maps or the free OpenStreetMap for listing search and single listing pages.

One prerequisite that’s easy to skip: get your directory itself into working order before installing the Divi integration. Create at least one directory type, add real categories and locations, publish a few real test listings (not blank placeholders), and set up any custom fields you plan to show. The Divi builder pulls its field options directly from what’s already configured in Directorist, so designing against real data from the start saves you from re-checking your layout later.

Divi vs Directory Plugin: What Does Each Do?

It helps to think of these as two separate layers doing two separate jobs. Directorist is the data and functionality layer: it defines what a listing is, stores submissions in your WordPress database, runs your search and filter logic, manages users and their dashboards, and processes payments. Divi is the presentation layer: once the Divi integration is active, it controls how that same data is displayed, styled, and arranged on the page.

Without the integration extension, this separation breaks down in one specific way: Directorist’s default pages render as shortcode output, which Divi can preview but not restyle module by module. With the integration active, each piece of listing data (title, price, image, address) becomes its own Divi module, fully stylable, while Directorist still owns the underlying logic behind it. Neither tool replaces the other; the integration exists specifically to let them work together without you writing custom code to bridge them.

Choose Your Directory Plugin

There are a handful of WordPress directory plugins on the market, but if you’re building specifically with Divi, the deciding factor is whether a plugin has a real, purpose-built Divi integration rather than generic shortcode compatibility. Directorist ships a dedicated Directorist Divi Builder Integration extension, built for Divi 5, that adds native modules (Listing Loop, Search, Listing Card Template, Map, and more) directly into the Divi builder and element panel, alongside a Dynamic Tags provider for pulling listing field values into other parts of your design.

That native integration is the reason this guide builds around Directorist rather than a general-purpose custom fields plugin: the modules, conditions, and Theme Builder templates covered below are specific to how Directorist and Divi connect, not something you’d get from a generic post-type builder without additional custom development.

Plan Your Directory Structure

Before installing anything, sketch out how your directory will actually be organized:

• Listings: what is a single entry in your directory, a business, a property, a job, a classified ad? This decides your directory type in Directorist.
• Categories: the primary way visitors will browse (Restaurants, Real Estate, Legal Services). Keep categories mutually exclusive where possible so listings aren’t duplicated across several.
• Locations: if your directory is geographic, decide how granular location needs to be, city-level, neighborhood-level, or radius-based search.
• Custom fields: what information does each listing actually need to show? A restaurant directory needs cuisine type and price range; a job board needs salary range and remote/on-site status. Directorist’s Directory Builder lets you define these per directory type, and whatever you set up here is exactly what becomes available as Divi field modules later.
• Users: decide upfront whether listings come from guest submissions, registered users, or admin-only entry, since this affects your submission form and dashboard setup.

Getting this structure right before you open the Divi builder matters more than it might seem: every field module you’ll place on your archive and single listing pages later comes directly from what you define here.

Install WordPress, Divi and Your Directory Plugin

With WordPress installed and hosting in place, install the three pieces in this order:

1. Install and activate Directorist from the WordPress plugin repository, then run its setup wizard. This creates your core pages (Add Listing, All Listings, Search Result, Single Listing) automatically.
2. Install and activate Divi, as your active theme, a child theme, or the Divi Builder plugin.
3. Install and activate the Directorist Divi Builder Integration extension.

If either Directorist or Divi is missing when you activate the integration, WordPress shows an admin notice telling you exactly which one to install; there’s no separate settings screen or API key to configure. Once all three are active, Directorist’s modules simply appear inside the Divi builder.

(This section covers the setup order; for the full prerequisites table and what to configure in Directorist before you start designing, see Getting Started with Divi Integration Extension.)

Configure Categories and Locations

Once Directorist is active, go to Directorist → Categories to add the categories your directory needs, and Directorist → Locations to add the areas listings should be searchable by. Both let you attach a description and image to each entry, which shows up automatically if you display category or location archives on your site. Do this before building any Divi pages, since both the Search module and the Listing Card Template pull their category and location options from what’s already set up here.

If you faces any problem on creating Categories or Locations, you can follow the step by step guide on “Create categories, tags, and locations for your directory website” section.

Create the Directory Homepage

Your homepage is typically where visitors start searching, so the minimum functional homepage needs a working Search module. Open the page in the Divi Visual Builder, and add Directorist’s Search module (part of the same module set the Divi integration adds), which includes keyword, location, and category fields out of the box. You can place it inside a hero section, style it to match your site, and pair it with the All Categories or All Locations modules, both of which can be placed anywhere on any page, independent of the listing archive itself, to give visitors a browsing shortcut straight from the homepage.

Design the Single Listing Template With Divi

The single listing page, what a visitor sees when they open one specific listing, works differently from your archive page. Because it only ever needs to show one listing at a time, it’s built through the Divi Theme Builder, not the Visual Builder, and it uses a template that Divi automatically fills with each listing’s own data.

The short version: go to Divi → Theme Builder, add a new template, and under Template Settings, apply it either to All Listings (every individual listing, regardless of type) or to a specific directory type if you want a different design per type. Build the custom body by inserting a row and adding listing field modules directly, Listing Image Slider, Title, Description, Address, Phone, Map, and any custom fields specific to your directory type. Each module pulls its value from whichever listing the visitor is currently viewing, with nothing extra to configure. For any optional field, set its Advanced tab Conditions to hide the module when that field has no saved value, so listings without every field filled in don’t show empty gaps.

Save the template, then verify it against at least two different real listings on the frontend, not the builder preview, to confirm the layout adapts correctly to each one’s data.

(For the full walkthrough with screenshots, every available field module, and troubleshooting for template conditions, see Designing Single Listing Page with Divi.)

Design Search Results

Your archive, or All Listings, page is where the majority of your traffic will actually browse, search, and filter, so it’s worth the most design attention. You can either edit the page Directorist’s setup wizard already created (open it in the Divi Builder, delete the Text module holding the shortcode, and insert the Listing Loop module in its place) or start from a blank page and build the archive from scratch. Either path lands you in the same structure.

The Listing Loop module is the foundation: it runs the listing query and makes results available to everything placed inside it, including Search, the Listing Header (result count, grid/list/map view switcher, sort dropdown), the Listing Card Template, and Pagination. Configure the Loop’s Content tab to set which directory types it shows, the default view, listings per page, and any pre-filtering by category, location, or tag.

Most of the actual design work happens on the Listing Card Template, where individual field modules (Title, Rating, Price, Address, and so on) are already placed and independently stylable. Click Add Element to pull in additional fields directly from your directory type’s custom fields, cuisine type for a restaurant directory, bedrooms for real estate, whatever you defined during planning. As with the single listing page, use each field module’s Conditions setting to hide it when a listing has no value, so cards stay clean regardless of how completely each listing owner filled out their submission.

Before calling this page done, verify on the live frontend (not just the builder preview) that listings display, directory type switching and search return correct results, all enabled views render, sorting and pagination work, and the mobile layout holds up.

(For the full breakdown of every Listing Loop setting and troubleshooting for search and filtering, see Designing All Listing Page with Divi.)

Add Frontend Listing Submission

Frontend submission is core to Directorist, not an add-on: visitors fill out a listing form directly on your site without ever seeing the WordPress dashboard, and the fields on that form come from the same custom fields you defined in the Directory Builder. Directorist also supports guest submission, letting a visitor submit a listing with just an email address rather than requiring a full account first, which reduces the friction that causes people to abandon a submission partway through. Once you know your submission flow (guest, registered-only, or admin-approved), configure it in Directorist’s listing settings; the Add Listing page itself doesn’t need any special Divi design work beyond matching your site’s general styling.

Configure Maps

If your directory is location-based, configure your maps provider (Google Maps or the free OpenStreetMap) in Directorist’s map settings first, since this is what powers both location-based search and the Map field module. Once configured, the Map module becomes available to place inside your single listing template, alongside your other field modules, and pulls each listing’s saved address automatically, the same way the Title or Description modules do.

Add Reviews and User Profiles

Directorist’s review system lets visitors rate and leave feedback on listings directly, which both builds visitor trust and gives listing owners a reason to keep their information current. User profiles and author pages show a listing owner’s public-facing information and their other published listings; both are available as Divi field modules and can be placed on your single listing template or a dedicated author page, styled the same way as any other module on the page.

Monetize Your Directory

Directorist supports paid listings, featured placements, and subscription-based pricing plans through its Pricing Plans and payment gateway extensions (PayPal and Stripe are the built-in options). None of this requires custom Divi work beyond styling the checkout and payment pages; the monetization logic itself lives entirely in Directorist’s settings, not in the page builder. Decide on your pricing model, paid submissions, featured listing upsells, or a subscription tier for ongoing access, before you open submissions publicly, since retrofitting monetization onto listings that are already live is more disruptive than building it in from the start.

To monetize your directory, you first need to enable the monetization feature. With Directorist, it’s very easy to activate monetization feature and earn money. Follow this step by step guide to activate monetization feature and apply multiple ways to earn from your directory website.

Optimize Your Directory for SEO

A few things matter specifically for a Divi-built directory site’s SEO. First, make sure your Listing Card Template and single listing template both include proper heading structure, the listing Title module should render as an actual heading tag, not styled text, so search engines can parse your page hierarchy correctly. Second, Directorist includes built-in Schema markup support for listings, which helps qualify pages for rich results (star ratings, price, location) in search, independent of whatever theme or builder renders the page. Third, keep an eye on page weight: Divi’s flexibility makes it easy to stack modules and background images that slow down a listing archive with hundreds of cards, so compress listing images and avoid unnecessary nested sections on your archive page specifically, since that’s the page most likely to carry real traffic.

To get most potential from Directorist, you can follow these SEO techniques to increase visibility of your directory site on SERP. To make your SEO process more easier, you can choose from our handpicked WordPress SEO tools, they are easy to set up and use.

Test Before Launch

Before opening your directory publicly, verify:

• Listings display correctly on both the archive and single listing pages, using real published listings, not placeholder previews.
• Search, filters, sorting, and pagination all return correct, updated results.
• Frontend submission works end to end, including guest submission if you’re using it, and listings route to the right approval flow.
• Payment and checkout pages process correctly if you’ve enabled monetization.
• Every optional field’s Conditions setting hides cleanly when a listing has no value, tested against at least two listings with different fields filled in.
• Mobile layout holds up, checked in Divi’s responsive preview and on an actual device, not just a resized browser window.

Common Problems

A page looks “already built” but Divi won’t let you style it. This usually means you’re looking at a page Directorist’s setup wizard created before the Divi integration was installed, one still running on a shortcode rather than Divi modules. Open it in the Divi Builder, remove the Text module holding the shortcode, and replace it with the matching Directorist module.

A field module “won’t move” where you drag it. Field modules like Title or Price have no listing to pull data from unless they’re inside a Listing Card Template (on the archive page) or a Theme Builder custom body (on the single listing page). Divi blocks you from dragging them outside that structure for exactly this reason.

Search or filters stop updating. The archive relies on AJAX for search and filtering. If results stop refreshing, clear your page and browser cache first, then confirm every archive module (Search, Listing Header, Listing Card Template, Pagination) is still nested inside the same Listing Loop; moving one outside the loop breaks the connection between them.

A custom field shows no value. Confirm the field actually belongs to the directory type you’re designing for, and that you’re testing against a real, published listing rather than the builder’s placeholder preview.

The single listing template doesn’t seem to apply. Check the condition you assigned it. If you used “Listings with Specific Directory Type,” the template only applies to that type; other directory types fall back to the default output unless they have their own assigned template.

FAQ

``