Divi 4: Create Single Template

With the Divi Theme Builder you can design the detail view of every property individually. WP-ImmoMakler provides specialized Divi modules for this purpose, covering all aspects of a property — from the image gallery and data sheets to the contact details.

Note

This guide applies to Divi 4. For Divi 5, read Divi 5: Create Archive and Single Templates.

Requirements

• Divi Theme or Divi Builder Plugin (version 4.x)
• WP-ImmoMakler (any edition)

Tip

In your website’s backend (wp-admin), disable the Plugin handles list and detail views option under WP-ImmoMakler → Settings → Theme Builder if you want the Divi Theme Builder to fully control the presentation.

Option A: 1-Click HTML version (quick start)

The one-click module displays WP-ImmoMakler’s proven detail view — including the gallery, data, map, contact form, and everything else that belongs to a complete detail page.

1. Open the Theme Builder

   Navigate to Divi → Theme Builder in your website’s backend (wp-admin).

   

2. Create a new template

   Click Add New Template and select Create New Template. In the Template Settings panel on the Use On tab, scroll to the Properties section and enable All Properties.

   

   Click Create Template.

   

3. Create the body layout

   Click Add Custom Body in the new template and select Create Custom Body.

   

4. Add a row and insert the module

   The Visual Builder opens. Click +, select the single-column layout, then search for the module WP-ImmoMakler 1-Click: Detailed view.

   

5. Save and test

   Save the template and open any property on the frontend.

Use your own page title

The WP-ImmoMakler 1-Click: Detailed view module offers a Show heading option (default: on). Turn it off to hide the heading (h1) output by the HTML template — for example when you want to design the page title yourself or your theme already outputs it.

Use your own gallery

The 1-Click: Detailed view module offers a Show image gallery option (default: on). Turn it off to hide the gallery built into the HTML template — for example when you want to place your own gallery (such as the WP-ImmoMakler Image Gallery module) above the title.

Option B: Custom template

For full design freedom, build the detail view from individual WP-ImmoMakler modules. Each module represents a specific aspect of the property and can be freely positioned and styled.

1. Open the Theme Builder

   Navigate to Divi → Theme Builder in your website’s backend (wp-admin).

2. Create a new template

   Click Add New Template and select All Properties as the assignment under Properties.

3. Create the body layout

   Click Add Custom Body and select Create Custom Body. Create the desired page structure with rows and columns — for example, a main area with gallery and data on the left, contact details on the right.

4. Add the gallery

   Add the WP-ImmoMakler Image Gallery module: the full image gallery with slideshow and static mode, lightbox, and all Customizer options configurable per module instance.

   The Image Gallery module provides the same options you know from the Customizer — on a per-module-instance basis. This is useful when a template needs a different gallery form than the Customizer default (e.g. a cinemascope hero image in a premium template while the standard template uses the usual slideshow), or when multiple galleries with different settings should appear on one page (photos above as a slideshow, floor plans further down as a static grid).

   See Configure gallery below for a detailed description of the options.

5. Add property data

   Add the desired data modules:

   Module	Description
   WP-ImmoMakler data table	Data table as a definition list with configurable fields, column width, row dividers, and alternating background colours
   WP-ImmoMakler data boxes	Key figures as a responsive CSS grid with configurable box width and spacing
   WP-ImmoMakler Energy Performance Certificate	Energy certificate data with regional support (Germany, Austria, Spain, Italy) and energy diagram

6. Insert description texts

   Use the WP-ImmoMakler description text module. It offers extensive options:

   • Selection of the text field (short description, property description, features, location, additional information)
   • Automatic HTML cleanup and typographic corrections
   • URL and phone number detection
   • Bullet point conversion to lists
   • Responsive column layout (desktop, tablet, mobile)
   • “Show more/Show less” toggle with configurable height
   • Custom heading with selectable HTML tag

7. Add the map

   Add the WP-ImmoMakler location map module. It displays the property’s location with the map provider you selected in the Customizer under WP-ImmoMakler → Maps. The map height is configurable.

8. Insert contact details

   The WP-ImmoMakler contact details module displays the contact person’s information — with photo, name, phone, email, etc. You can show/hide individual labels and adjust the spacing between photo and data.

9. Videos and virtual tours

   Module	Description
   WP-ImmoMakler Videos	Embedded YouTube/Vimeo videos
   WP-ImmoMakler Virtual Tour PLUS	360-degree tours with configurable aspect ratio

10. Save and test

    Save the template in the Theme Builder and open a property on the frontend.

Available single modules

Module	Description
WP-ImmoMakler 1-Click: Detailed view	Complete detail view with WP-ImmoMakler HTML template
WP-ImmoMakler contact details	Contact person with photo and data
WP-ImmoMakler description text	Free-text description fields with formatting
WP-ImmoMakler data table	Data table as a definition list
WP-ImmoMakler data boxes	Key figures as a responsive grid
WP-ImmoMakler Energy Performance Certificate	Energy certificate data with diagram
WP-ImmoMakler Image Gallery	Full image gallery with slideshow/static mode, all Customizer options per instance
WP-ImmoMakler location map	Map showing the property’s location
WP-ImmoMakler Videos	Embedded videos
WP-ImmoMakler Virtual Tour PLUS	360-degree tours

Configure gallery

The WP-ImmoMakler Image Gallery module provides the same options per module instance as the Customizer’s Gallery section. An overview of the main groups:

Area	Options
Image selection	All images, floor plans only, without floor plans
Gallery type	Slideshow (Swiper-based gallery with lightbox) or Static (image grid without slider, lightbox on click)
Slideshow layout	Vertical (thumbnail strip below), Horizontal (thumbnail strip right), Without thumbnails, Carousel
Static layout	Vertical (thumbnail strip below), Horizontal (thumbnail grid right), Without thumbnails, Grid (all images as equally sized tiles, no main image), Mosaic (blocks of 4 photos with alternating large and small tiles, no main image)
Transition effect	Slide (default), Fade or “Aus- und Einblenden” — see Image Gallery: Slideshow
Transition duration	100–2000 ms (default 400 ms)
Autoplay	Automatic advancing with configurable second delay
Aspect ratios	Main and thumbnail images independently configurable (16:9, 3:2, 4:3, 1:1, Golden Ratio, Original; static additionally 2:1 and 3:1)
Thumbnail size	40–400 px width (controls number of simultaneously visible thumbnails)
Mobile thumbnails	Show or hide on devices ≤ 768 px
Carousel height	Pixel or viewport unit (px, vw, vh, svh, lvh, dvh)
Static grid	Rows and columns independently configurable per layout variant
Gallery height (static)	Automatic or fixed
More photos indicator	Counter overlay on the last thumbnail (+N) or button below the gallery (“Show all N photos”)
Hover animation (static)	None / Gentle zoom-in (default) / Brighten — visual feedback when hovering over images with the mouse
Grid options	Only in the “Grid” static layout: columns (maximum, 1–6), minimum tile width (below which a column drops automatically), tile aspect ratio, image fit (Crop for photos or Show in full for floor plans) and image title as caption. Combined with the “floor plans only” image selection, this produces a floor plans box like the WP-ImmoMakler skin’s
Mosaic options	Only in the “Mosaic” static layout: block aspect ratio, row height distribution (1:1, 2:1 or golden ratio) and limit number of images (4, 8, 12 or 16 images)
Spacing + rounding	Gap between images, border radius (each image individually or only gallery outer edges)
Navigation colour	Colour picker for arrow buttons and pagination dots (slideshow mode)

Descriptions of the individual values can be found in the Customizer documentation for the slideshow and static gallery — the same terminology applies to the Divi module.

Tip

If the module should display exactly the Customizer default without further configuration, simply leave the module options at their default values — these match the Customizer default.

Using Dynamic Content

In addition to the specialized modules, you can use Divi’s Dynamic Content in any standard module. WP-ImmoMakler registers fields in the WP-ImmoMakler group:

Field	Description
Property title	Property title from the real estate software
Subtitle	Postcode, city, property type
Price	Formatted price
Short description	Brief description
Property description	Detailed description
Features/description	Features description
Location	Location description
Additional information	Supplementary information
Featured image of the property	Featured image of the property, for image modules and backgrounds
First PDF attachment	URL of the first PDF attached to the property
First PDF attachment with “floor plan” in the title or file name	URL of the first PDF attachment whose title or file name contains “floor plan”
Link back to list view (to the property’s card)	For your own “Back to the overview” button: leads back to the list the visitor came from and scrolls there to the property’s card — even with a caching plugin

The text fields support an optional icon display, individual prefix/suffix text, and (for description fields) automatic formatting.

Preview and testing

Because Divi’s Theme Builder does not offer a live preview mode with real property data, it is best to test the template directly on the frontend:

1. Save the template in the Theme Builder.
2. Open any property on the frontend.
3. Check that all modules are rendered correctly and the property data is displayed.

Tip

Recommended approach: Start with the 1-Click HTML version to familiarize yourself with the available data. Then gradually build a custom template by replacing individual sections with specialized modules.

You might also be interested in

• Divi Theme Builder Overview
• Create Archive Template
• Gallery: Configure slideshow
• Gallery: Static view