Divi 5: Creating Archive and Single Templates

This guide shows how to create an archive template for the property list view and a single template for the property detail view in Divi 5. Both templates use the native WP-ImmoMakler one-click modules, which display a live preview with real property data in the Divi 5 Visual Builder.

Note

This guide applies to Divi 5. For Divi 4, read the guides Divi 4: Creating an archive template and Divi 4: Creating a single template.

Tip

WP-ImmoMakler detects your templates automatically: as soon as a Divi Theme Builder template applies to a property page, the page is rendered with it. Pages without a matching template are still rendered with WP-ImmoMakler’s own templates. You don’t need to change any setting.

Archive template (list view)

The archive template controls how the property overview page is displayed — that is, the page on which all properties appear as a list or tiles.

1. Open the Theme Builder

   In the backend of your website (wp-admin), navigate to Divi → Theme Builder.

   

2. Create a new template

   Click + Add New Template and choose Build New Template in the dropdown.

   

3. Configure the assignment

   The Template Settings dialog opens on the Use On tab. Enable the following checkboxes:

   • In the Archive Pages section: all 7 property taxonomy archives — All Property Features Pages, All Property Countries Pages, All Property Usage Types Pages, All Property Types Pages, All Property Location Pages, All Property Status Pages, and All Property Marketing Types Pages
   • In the Properties section: Property Archive Page
   

   Caution

   Be sure to enable all 7 taxonomy archives in the Archive Pages section. Without these assignments, the template does not apply on filtered archive pages — for example when visitors filter by property type, location, or marketing type.

   Then click Create Template.

4. Add the main content

   The new template appears in the Theme Builder with the label Property Archive Page. Hover over the middle area of the template and click Add Custom Body. In the dropdown, choose Build Custom Body.

   

5. Add a row

   The Visual Builder opens. Click Add Row and choose the single-column layout.

   

6. Insert the module

   In the new row, click Add Module. In the Insert Module Or Row dialog, search for List view and click WP-ImmoMakler 1-Click: List view.

   

   The module is inserted and immediately shows a live preview with your properties in the Visual Builder.

   

7. Save

   Click Save in the top right. The archive template is now active.

Single template (detail view)

The single template controls how the detail page of an individual property is displayed.

1. Open the Theme Builder

   In the backend of your website (wp-admin), navigate to Divi → Theme Builder.

2. Create a new template

   Click + Add New Template and choose Build New Template.

3. Configure the assignment

   In the Template Settings dialog on the Use On tab, scroll to the Properties section and tick All Properties. Click Create Template.

   

   For a dedicated detail view for development projects or reference objects, create another template: in the Properties section, tick Projects (WP-ImmoMakler) or Reference objects (WP-ImmoMakler). For those properties, this template takes precedence over the one for all properties; a template for individual properties still wins. The same entries are also available on the exclusion tab, to take projects or reference objects out of a template.

4. Add the main content

   In the new template, click Add Custom Body and choose Build Custom Body.

5. Add a row

   In the Visual Builder, click Add Row and choose the single-column layout.

6. Insert the module

   Click Add Module, search for Detail view, and choose WP-ImmoMakler 1-Click: Detailed view.

   

7. Save

   Click Save. The single template is now active.

Adding similar properties

PLUS Below the detail view you can show properties with similar characteristics (same property type, same marketing type, nearby). To do so, you build a Divi Loop as in the property overview and switch on one setting — you design the card yourself.

1. Create the loop

   In the single template, add a row, design the property card in it (for example with the Gallery and Location modules, a heading with the title as dynamic content, and Key data boxes), and enable the Loop in the row settings. Choose post types as the query type and Properties as the post type.

2. Only similar properties

   In the same group, switch on Only similar properties. Under Posts Per Page, set how many appear, for example 3.

   

   The Visual Builder shows the properties similar to the preview property in the preview.

3. Grid and heading

   For a grid with three columns, set the section around the row to Grid display with three columns (two on tablet, one on smartphone). Add a heading such as “Similar properties” as a separate Heading module above it — as an h2, with the card titles below it as h3.

4. Save

   Click Save.

Note

This setting only exists in Divi 5. On Divi 4, use the shortcode instead.

Preview property per template

In the Divi 5 Visual Builder, the WP-ImmoMakler modules show a live preview with real property data. You can set a separate preview property for each template — for example a house for the house template and a commercial property for the commercial template.

1. Open the page settings

   In the Visual Builder, click the gear icon at the top left and choose Page Settings in the page menu.

   

2. Select the Content tab and choose a preview property

   In the page settings window, switch to the Content tab. In the Preview property field, enter a search term (property no. or title) and select the desired property from the list.

   

   The preview of all WP-ImmoMakler modules in the canvas updates immediately — without saving.

3. Save

   Click Save. The selection is now assigned to this template.

Tip

As long as no template-specific selection has been made, the global preview property from WP-ImmoMakler → Settings → Theme Builder applies. The template-specific selection always takes precedence.

Customisation options

Both one-click modules show the proven WP-ImmoMakler HTML display. For further customisations:

• WP-ImmoMakler Customizer: Adjust colours, fonts, and spacing via Appearance → Customizer → WP-ImmoMakler
• Module settings: In the Visual Builder, open the module to show or hide individual sections such as the image gallery or heading
• CSS: Enter your own styles in the module’s Advanced tab or via a child skin plugin

For the detail view, Divi 5 also offers specialised individual modules alongside the one-click module — image gallery, property data, area and price lists, location map, contact details, and more. Which modules your Divi version offers is listed in the Divi Theme Builder overview. Build an individual layout the way Divi 4: Creating a single template shows step by step — though under Divi 5 some modules go by different names, for example property data instead of data table.

You might also be interested in

• Divi Theme Builder overview — An overview of all available WP-ImmoMakler Divi modules
• Settings: Theme Builder — Global preview property and an overview of all builder overrides
• Migrating to Divi 5 — How existing Divi 4 layouts are carried over when migrating
• Divi 4: Creating a single template — Design the detail view with specialised modules individually (guide written for Divi 4, the approach is the same under Divi 5)