Create Single Template

With WPBakery Page Builder you can design the detail view of every property individually. WP-ImmoMakler provides specialized WPBakery elements for this purpose that cover all aspects of a property — from the image gallery and data sheets to the contact form.

Requirements

• WPBakery Page Builder
• WP-ImmoMakler (any edition)

How your layout gets onto the property detail pages

WPBakery has no theme builder: you can design individual pages with it, but you cannot store a layout as a template for all properties. A template page takes care of this: you design a completely normal WordPress page with WPBakery and register it with WP-ImmoMakler as the detail view. WP-ImmoMakler then displays this page on every property detail page — with the data of the property being viewed.

You can leave the Plugin handles list and detail views option enabled: a template page takes precedence.

Note

Don’t edit an individual property with WPBakery. Imported properties are overwritten by the next import from your CRM software, and you would have to design every property separately.

Impreza and Salient

Impreza comes with its own template system in the form of its page templates, which you can use as an alternative. How to proceed with Impreza and Salient is described under Impreza and Salient.

Option A: Property Detail View (quick start)

The complete element renders the entire detail page — including the gallery, data, map, contact form, and everything else that belongs to a full detail view.

1. Create a template page

   Create a new page under Pages → Add New, for example with the title “Template: Property Detail View”, and open it in the WPBakery editor.

2. Insert the element

   Click Add Element and search for Property details. Add the element to the page.

3. Configure options

   Optional: Disable the display of the page title if your theme already outputs it. The Show Image Gallery option also lets you hide the built-in gallery.

4. Register as the detail view

   In the WP-ImmoMakler Template panel, select Detail view (property) under Use as and publish the page.

5. Test

   Open a property on the frontend.

Use your own page title

The Property details element 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 Property details element 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 Property: Photo gallery element) above the title.

Option B: Custom template

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

1. Set up the page layout

   Create a template page as in Option A and build the desired page structure in the WPBakery editor with rows and columns — for example, a main area with gallery and data on the left, contact details on the right.

2. Add the gallery

   Add the Property: Photo gallery element. It displays the property photos using the same gallery engine as the Customizer’s Gallery section — all options are configurable per element instance. See Configure gallery below.

3. Add property data

   Add the desired data elements:

   Element	Description
   All real estate data	Data table as a definition list — individual fields can be shown/hidden via checkboxes. Label column width, borders, and spacing are configurable.
   Energy certificate	Energy certificate data with country-specific support (DE, AT, ES, IT). The same styling options as the data table.

4. Insert description texts

   Add the Property description element. It offers extensive options:

   • Selection of the text field (property description, features, additional information, location, short description)
   • Automatic HTML cleanup and typographic corrections
   • URL and phone number detection
   • Bullet point conversion to HTML lists
   • Optional list indentation

   Add a separate element for each description text — this lets you distribute them freely on the page.

5. Add the map

   Add the Property: Location map element. It displays the property’s location with the map provider you selected in the Customizer under WP-ImmoMakler → Maps. The map height is configurable (e.g., 350px, 50vh, 100%).

6. Design the contact area

   Element	Description
   Real estate contact form	Inquiry form with automatic property assignment
   Contact details	Name, phone, email of the contact person as a definition list
   Contact person photo	Photo of the contact person with aspect ratio (3:2, 4:3, 1:1, etc.), border, spacing, and border radius

7. Insert videos

   Add the Property: Videos element to display all videos associated with the property. This element does not output virtual tours — they only appear in the complete Property details element.

8. Register as the detail view and test

   In the WP-ImmoMakler Template panel, select Detail view (property) under Use as, publish the page and open a property on the frontend.

Available single elements

Element	Description
Property details	Complete detail view with WP-ImmoMakler HTML template
All real estate data	Data table as a definition list with styling options
Key data boxes	Selected property data as boxes with a label and a value
Property description	Free-text description fields with formatting
Energy certificate	Energy certificate data with country support
Property: Photo gallery	Full image gallery with slideshow/static mode, all Customizer options per instance
Property: Location map	Map showing the property’s location
Property: Videos	Embedded videos
Real estate contact form	Contact form with property assignment
Contact details	Contact person data as a definition list
Contact person photo	Photo with aspect ratio and styling

Configure gallery

The Property: Photo gallery element provides the same options per 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 WPBakery element.

Tip

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

Note

Conditional display (e.g. static options disappear in slideshow mode) follows WPBakery’s dependency system, which can only check a direct parent parameter. In some configurations, fields may therefore remain visible even though they have no effect in the currently active mode — the renderer filters out such values when displaying.

Styling options

Data tables (All Property Data, Energy Certificate, Contact Details)

All definition list elements share the same styling options:

• Left column width — Width of the label column
• Border — Dividing lines between rows
• Spacing — Inner padding of cells
• CSS editor — Custom CSS rules directly on the element

Contact Person Photo

The photo element offers extended design options:

• Aspect ratio — Original, 3:2, 4:3, 1:1, 3:4, 2:3
• Spacing — Margin and padding (all four sides independently)
• Border radius — All four corners independently configurable
• Border — Color, width, and style (solid, dashed, dotted, double)

Preview and testing

WPBakery’s backend editor shows a simplified preview of the elements. To test the template page with real property data:

1. Save the template page.
2. Open a property on the frontend.
3. Verify that all elements are rendered correctly and the property data is displayed.

The template page’s own address is not suitable for this: there is no property in context there, and visitors are redirected to the property list view.

With conditions on the template page, you use different layouts for different properties — for example one for houses and one for apartments. See Different templates for different properties.

Tip

Recommended approach: Start with the complete Property details element to familiarize yourself with the available data. Then gradually build a custom layout by replacing individual sections with specialized elements.

You might also be interested in

• Template Pages
• Create Archive Template
• Impreza and Salient
• Image Gallery: Slideshow with Thumbnails — Customizer configuration options for the Swiper gallery