Divi 5: Single-Property Modules

WP-ImmoMakler includes native Divi 5 modules designed specifically for property detail pages (single templates) and archive pages. You build the template block by block and can freely determine the appearance and order of the content.

Note

These modules require Divi 5. They are not visible in Divi 4. For Divi 4, the classic Divi 4 modules are available.

Requirements

• Divi 5 (Divi 5 engine enabled)
• WP-ImmoMakler (any edition)

Quick start: creating a template with single-property modules

In the backend of your website (wp-admin), navigate to Divi → Theme Builder and create a template for All “Property” Posts (or open an existing one). In the Visual Builder, you will find all the modules listed below by searching for WP-ImmoMakler.

Available single-property modules

Photo gallery

Module	Description
WP-ImmoMakler Photo Gallery	Full photo gallery with Slideshow, Lightbox, and all Customizer options per instance
WP-ImmoMakler Photo Gallery Grid	Grid view without Slideshow. This module is no longer being developed further

Note

For new templates, use the Photo Gallery module with the Static presentation and the Mosaic layout instead of Photo Gallery Grid. It offers the same display and all further gallery settings. Existing templates using the Grid module continue to work unchanged.

Description texts

The WP-ImmoMakler Description Text module displays one of the free-text fields:

Field	Description
“Summary”	The property’s excerpt text, e.g. as an introduction below the title
Short description (three-liner)	Brief introductory text
Property description (standard)	Detailed description
Features	Features description
Location	Location description
Other information	Additional notes

Each instance of the module displays exactly one text field. To display multiple fields, insert the module multiple times and select a different field each time.

Further options of the module:

Option	Description
Heading	Free-text heading (default: name of the selected field)
Heading tag	h1–h4

The text is automatically cleaned up: HTML is restricted to permitted tags, bullet points are converted to lists, phone numbers are linked, and URLs are made clickable.

Property data

Module	Description
WP-ImmoMakler Property Data	All data fields (general + prices) as a definition list
WP-ImmoMakler Areas	Area fields only as a definition list
WP-ImmoMakler Prices	Price fields only as a definition list
WP-ImmoMakler Key Data Boxes	Selected fields as a responsive box grid with SVG icons
WP-ImmoMakler Key Data Icon List	All visible fields as a horizontal icon list with SVG icons

The three definition list modules (Property Data, Areas, Prices) only display fields for which a value has been entered in the CRM software.

The Key Data Boxes and the Key Data Icon List are suitable for compact summaries of the most important key data directly below the gallery.

In the Key Data Boxes, you choose under Entries which of all the property data fields appear as a box. The defaults are the most important key data such as object number, prices, areas, rooms and parking spaces; switch on any further fields as needed. The boxes appear in the order of the list.

The Key Data Boxes module has the following additional options:

Option	Description
Use abbreviations	Shortens selected labels: Living area → “Wlf. ca.”, Plot area → “Grd.”, the purchase price label is hidden, apartment type value → “Whg.”
Divider	Vertical divider line between the boxes, with adjustable width, colour, and line style
Show icons	SVG icon before each key data field

Energy certificate

The WP-ImmoMakler Energy Certificate Values module displays the energy certificate data as a definition list. It supports the regional formats:

• Germany (heating energy demand, efficiency class, etc.)
• Austria (HWB and fGEE)
• Spain (Certificado Energético)
• Italy (APE)

As with the other data lists, you hide individual fields in the Content tab. With the Show diagram option PLUS, the graphical energy certificate scale also appears below the values, provided the energy certificate feature is enabled. Modules that the Divi 5 Migrator has converted from the Divi 4 module WP-ImmoMakler Energy Certificate show the scale this way, as before.

The WP-ImmoMakler Energy Certificate Diagram PLUS module displays only the graphical energy certificate scale without the data list, so that you can position the scale and the values separately.

Contact

Module	Description
WP-ImmoMakler Contact Person: Photo	Profile photo of the contact person
WP-ImmoMakler Contact Person: Details	Contact details (name, telephone, email, address …) as a definition list
WP-ImmoMakler Contact Form	Contact form for property enquiries
WP-ImmoMakler Downloads & Links	File downloads and external links

The Contact Person: Photo module displays the profile photo stored for the contact person in WP-ImmoMakler. If no photo is available, the module outputs no content. In the Design tab you can set aspect ratio, inner and outer padding, corner radius, and border (width, colour, style).

The WP-ImmoMakler PDF Exposé Button PLUS module inserts a link button that opens the property’s PDF exposé directly. In the Content tab you can freely enter the link text and toggle whether it opens in a new tab. In the Design tab, the font (colour, size, weight, family) and width of the button are adjustable.

Note

The PDF exposé must be enabled (in the backend of your website (wp-admin) under WP-ImmoMakler → Settings → PDF Print View) for the button to work on the live page. In the Visual Builder, the module displays a placeholder link.

Features and amenities

The WP-ImmoMakler Features/Amenities module displays the property’s features as a list.

Option	Description
Layout	Standard (stacked) or Inline (side by side)
Show icon	On/Off — shows an arrow icon before each entry
Icon colour	Colour of the icon (only when Show icon = On)
Icon size	Size of the icon (only when Show icon = On)
Text colour	Colour of the entry text
Spacing between entries	Vertical spacing

Map and videos

Module	Description
WP-ImmoMakler Location Map	Location map using the map provider selected in the Customizer; height and map settings adjustable per module
WP-ImmoMakler Videos	Embedded YouTube/Vimeo videos. Aspect ratio of the embed is adjustable in the Design tab. With Hide column if no videos are available, the entire module column disappears for properties without videos
WP-ImmoMakler Virtual Tour PLUS	Virtual tours of the property. If the settings have the preview image with lightbox and consent prompt enabled, that also applies here. Aspect ratio and corner radius are adjustable in the Design tab

Archive modules (for list view templates)

These modules are intended for archive templates (e.g. the property overview page):

Module	Description
WP-ImmoMakler 1-Click: List View	Complete property list including search form, pagination, and all list options. Minimum height adjustable in the Design tab
WP-ImmoMakler Property Search Form PLUS	Search form only — ideal when the form and list view need to be positioned separately. Number of columns is adjustable
WP-ImmoMakler Property Results List	The results list only, without search form, map, and heading — for templates where you place the search form as its own module
WP-ImmoMakler Map Property List PLUS	Map showing all properties in the current search query as a cluster view
WP-ImmoMakler Location	Postcode and city of the property with a map icon, e.g. for the cards of a Divi Loop. With Display property type, the property type follows, and in the detail view the marketing type as well
WP-ImmoMakler Page Navigation	Page numbers and result count below a Divi Loop of the property overview (see Modules in a Divi Loop)

Similar Properties

The WP-ImmoMakler Similar Properties module PLUS shows properties with the same property type and marketing type near the property being viewed. For details on how properties are selected, see Similar Properties.

Cancellation

These two modules are not tied to a property. You can use them on any page, for example in the footer or on a dedicated cancellation page.

Module	Description
WP-ImmoMakler Cancellation Button	Button for cancelling a contract. It links to your cancellation page, opens the form in an overlay, or acts as a trigger for your page builder’s popup. Label, cancellation page, custom link, and an additional CSS class are adjustable, the button’s font in the Design tab
WP-ImmoMakler Cancellation Form	Form for cancelling a contract, with automatic confirmation of receipt. Optionally pre-fill the property description via a property ID

The Divi 5 Migrator automatically converts layouts using the Divi 4 Cancellation Button and Cancellation Form modules into the native modules.

Modules in a Divi Loop

The detail view modules also work inside a Divi Loop. Each loop entry then shows the data of its own property — for example, you can build property cards yourself from Photo Gallery, Location, and Key Data Boxes.

If the loop is in a template for the property overview, it takes the search form selection and chosen sorting into account.

Pagination and lazy loading

In the property overview, the loop paginates with the page: under /immobilien/page/2/ it shows the second page of results. You set how many properties a page shows in the backend of your website (wp-admin) under Appearance → Customizer → WP-ImmoMakler → Property List View with Number of properties per page; this number then applies instead of the loop’s own Posts Per Page. Add the page numbers with the WP-ImmoMakler Page Navigation module below the loop.

PLUS Give the section or row containing the loop the CSS ID properties under Advanced → Attributes. The property overview then loads results without reloading the page: a change in the search form updates the list immediately, and depending on the setting the page numbers page through the list, or further properties are loaded on scroll or via a button.

Linking entries

For a click on the entry to lead to the property:

• Enter a link as the title of the Heading module whose address and text are dynamic content: “Link zur Immobilie” from the WP-ImmoMakler group as the address, Loop Post Title as the text. This makes the title a real link that keyboards and screen readers can reach too. In the Visual Builder, Divi shows a title linked this way as the placeholder $variable(…)$; on the website, each entry shows the property’s title with its link.
• If the entire card should be clickable, give the heading module the CSS class immomakler-card-link under Advanced → Attributes. The title’s link then extends across the whole column; the photo gallery and other links and buttons in the card remain operable.
• In the Photo Gallery, set the Click on a photo option to View property. A click on a photo will then open the property instead of the lightbox.

Caution

The Link → Module Link URL option is not suitable for entries of a loop: Divi links these links via script when the page loads. Properties that the overview loads afterwards then remain without a link.

Tip

For the property title in the loop, use a Heading module with the Loop Post Title dynamic content. Divi’s own Post Title module shows the title of the overview page on an overview page, not the title of the loop entry.

Show sections only where content is available

Not every property has videos, a virtual tour, or a description of its features. So no heading ends up sitting above an empty section, show sections, rows, columns, and modules only when needed, using the Property content condition:

1. Open the settings of the element that contains the section together with its heading — usually the row.
2. Under Advanced → Conditions → Add condition, choose the entry Property content from the WP-ImmoMakler group.
3. Under Property content choose the content, and under Only show if choose available.

Available options:

Property content	available when …
Pictures, Floor plans	at least one photo or floor plan (image or PDF) is stored
Videos, Virtual tours PLUS	at least one video or tour is stored
Documents for download, Links	at least one document or link is stored
PDF document	at least one of the documents is a PDF file
Summary, Brief description, Property description, Equipment description, Location description, Additional information	the text is not empty
Equipment features	at least one equipment feature is set
Energy certificate	energy certificate data is available
Map	a map service is set up and a location is specified
Contact person	contact data for the property is available
Photo of the contact person	the contact person has a photo

Use not available to show a fallback instead — for example a note when no floor plan is available. Multiple conditions can be combined: show the Location section, for instance, when either Location description or Map is available.

Outside a property — on a normal page, or in the list view outside a loop — every content kind counts as not available.

The same WP-ImmoMakler group also offers three further conditions:

Condition	Settings	Example
Property data	a data field of the property or the contact person; has a value / has no value	Show a note about additional costs only when Base rent has a value
Property category	a category (property type, marketing type, usage type, status, location, features, country), is / is not, and a value; [set] matches any value	Show the rent index notice only for the Rental marketing type
Reference object	is a reference property / is not a reference property	Hide the enquiry button on reference objects

WP-ImmoMakler offers the same conditions with the same checks in Elementor Pro and Bricks.

Preview in the Visual Builder

All modules display a preview in the Divi Visual Builder using a sample property. The sample property shown is the one WP-ImmoMakler uses as its preview record — the same one used in other previews (Elementor, Gutenberg).

Tip

If the preview appears empty or incomplete, the sample property may not have values entered for the relevant fields (e.g. no energy certificate). On the front end, the actual data of the property being viewed is displayed.

Recommended template structure

A typical single-property template might look like this:

1. Photo gallery (Photo Gallery or Photo Grid Gallery) — full width
2. Key Data Icon List — narrow row with the most important key data
3. Two columns: description text on the left, location map on the right
4. Property Data or Areas + Prices side by side
5. Energy Certificate (if data is available)
6. Two columns: contact form on the left, contact person on the right

Tip

For search engines and screen readers, a clean structure pays off: the property title is the only heading at level H1, and the sections beneath it (property description, key data, location …) are H2. Set the level in the Heading module, in the Design tab under Headings → Heading Level — independently of the font size. Under Advanced → HTML → Element Type you can also set the HTML element: rows containing a section become section, the column with the contact data becomes aside, and in the list view loop, each entry becomes article.

You might also be interested in

• Divi Theme Builder: Create Single Template — Step-by-step guide to building the template
• Divi 5: Creating Archive and Single Templates — Build templates with the native modules
• Divi 5: Migrating from Divi 4 — How existing Divi 4 layouts are migrated on upgrade
• Image Gallery: Slideshow with Thumbnails — Settings for the Swiper gallery
• Image Gallery: Static Image — Settings for the static gallery