Listdom Template Builder Documentation
Este conteúdo não está disponível em sua língua ainda.
Listdom Template Builder provides a visual editor for creating reusable Listdom layouts without editing theme template files. It supports full single-listing layouts, listing-card layouts, and compact map info-window layouts used by compatible Listdom views.
Go to Listdom > Template Builder to create and manage templates.
Template types
Section titled “Template types”Choose the correct type when creating a template:
- Single Listing: A full-page layout for an individual listing.
- Listing Card: A card layout for listing grids, archives, and compatible shortcode skins.
- Info Window: A compact layout for map info windows.
Elements are filtered by template type. If an element is not supported by the selected type, the editor prevents it from being used in that template. Changing a template’s type can make existing elements incompatible, so review the entire layout after changing it.
Creating a template
Section titled “Creating a template”- Go to Listdom > Template Builder.
- Select Add Template.
- Enter a template name.
- Select Single Listing, Listing Card, or Info Window.
- Create the template to open the visual editor.
- Choose a Preview Listing so real listing data appears in the preview.
- Build the structure, configure the elements, and check desktop, tablet, and mobile views.
- Select Save Draft while the layout is in progress.
- Select Publish when it is ready for use.
Only users with permission to manage Listdom templates can create, edit, publish, or delete them.
Editor layout
Section titled “Editor layout”The editor contains four main areas:
- Elements: Browse the elements available for the selected template type.
- Canvas: Build the layout and see a frontend preview powered by the selected listing.
- Content, Style, and Advanced settings: Configure the selected element or container.
- Structure: Review and reorganize the nested layout as a tree.
The top bar also provides template settings, save and publish actions, and responsive preview controls.
Building the structure
Section titled “Building the structure”Drag a Container to the canvas to create a layout region. Add elements inside containers, then nest or reorder containers when the design needs columns or grouped sections.
You can:
- Drag an element from the Elements panel to a precise position.
- Drag elements and containers within the canvas.
- Use the Structure panel to understand nested items and move them more safely.
- Select an element on the canvas or in Structure to open its settings.
- Reorder elements without recreating their settings.
- Duplicate or remove elements using their element controls.
- Add Heading and Spacer elements for content hierarchy and spacing.
The editor displays borders and controls when an item is selected or hovered so that nested elements remain identifiable.
Element settings
Section titled “Element settings”Settings are organized into these tabs:
- Content: The data, label, behavior, source, or display option used by the element.
- Style: Typography, colors, backgrounds, borders, spacing, alignment, and other visual controls supported by the element.
- Advanced: Layout and visibility controls shared by compatible elements.
Available controls vary by element. Responsive controls can store different values for desktop, tablet, and mobile where supported. Leaving a style control empty normally allows the active Listdom style or site CSS to provide its default value.
Element reference
Section titled “Element reference”The exact list depends on the template type, Listdom version, and active add-ons. Most core elements can be used in Single Listing, Listing Card, and Info Window templates. Some elements are limited to a smaller context, and add-on elements appear only when the related add-on is active.
| Element | Template types | Content tab options | Style tab options |
|---|---|---|---|
| Container | Layout container | Direction, Justify Content, Align Items, Wrap, Gap | Background, Border, Padding |
| Heading | Single Listing, Listing Card, Info Window | Text, Tag | Color, Background, Border, Padding, Typography |
| Spacer | Single Listing, Listing Card, Info Window | Height | No element-specific Style controls |
| Listing Title | Single Listing, Listing Card, Info Window | Title Tag, Link Method | Normal and hover Color, Background, Border, Padding, Typography |
| Listing Image | Single Listing, Listing Card, Info Window | Link Method, overlay positions, Default Colors, Image Resolution | Width, Height, Object Fit, Border |
| Listing Gallery | Single Listing, Listing Card, Info Window | Layout, Include Featured Image, Image Lightbox, Link Method, Number of Images, Autoplay, Auto-height, Loop, Thumbnails, Navigation Method | Background, Padding and image/gallery styling controls |
| Listing Content | Single Listing, Listing Card, Info Window | Content Length | Typography, Text Color |
| Listing Excerpt | Single Listing, Listing Card, Info Window | Excerpt Length, Read More Link, Use Full Content, Auto Paragraph | Typography, Text Color |
| Listing Address | Single Listing, Listing Card, Info Window | Show Icon | Alignment, Typography, Text Color, Icon Color, Background, Border, Padding, Link Hover Color |
| Listing Price | Single Listing, Listing Card, Info Window | Minimized Price, Link Price, Price Link URL, Open in New Tab, Nofollow | Background Color, Text Color, Padding, Border, Price Typography |
| Listing Categories | Single Listing, Listing Card, Info Window | Default Colors, Color Method, Layout, Category Name, Category Icon, Enable Archive Links | Show, Background, Border, Padding, Gap Between Items, Color, hover and typography controls |
| Listing Locations | Single Listing, Listing Card, Info Window | Link to Location Archive, Icon, Layout | Typography, Text Color, Icon Color, Padding, Gap Between Items, Background Color, Border, Item Gap |
| Listing Tags | Single Listing, Listing Card, Info Window | Layout, Enable Archive Links | Background Color, Border, Padding, Gap Between Items, Typography, Color and hover controls |
| Listing Labels | Single Listing, Listing Card, Info Window | Layout, Link to Label Archive | Background Color, Border, Padding, Gap Between Items, Typography, Color and hover controls |
| Listing Features | Single Listing, Listing Card, Info Window | Layout, List Style, Link to Features Archive, Show Icon | Background Color, Border, Padding, Gap Between Items, Typography, Color, hover colors |
| Listing Custom Fields | Single Listing, Listing Card, Info Window | Layout, Show Icons, Show Custom Field Title, Fields | Icon Scale, Typography, Value Item Typography, Value Item Color, Value Item Background, Padding, Border |
| ACF Addon ACF | Single Listing, Listing Card, Info Window | Field, Label | Label and value Typography, Text Color |
| Listing Map | Single Listing, Listing Card, Info Window | Map Provider, Infowindow, Zoom Level, Map Height, Google Map controls | No separate Style controls; map appearance is configured from Content controls and map provider settings |
| Listing Owner | Single Listing, Listing Card, Info Window | Show Avatar, avatar/name author links, Show Name, Show Job Title, Show Bio, Show Social Networks, Show Telephone, Show Email, Show Mobile, Show Website, Show Fax | Owner profile, spacing, text, icon, and form styling controls |
| Contact Info | Single Listing, Listing Card, Info Window | Style Type, Show Email, Show Phone, Show Website, Show Address, Show Socials, Display Icon, Display Label, Fields | Layout, Social Icons Layout, Gap, spacing, icon, label, value, and social styling controls |
| Listing Working Hours | Single Listing, Listing Card, Info Window | Type, Display Icon | Typography, Text Color, Off Text Color, Icon Color, Icon Gap, Weekday Typography, Weekday Text Color, Hour Typography, Hour Text Color |
| Listing Breadcrumb | Single Listing, Listing Card, Info Window | Show Home Icon, Second Layer | Item Gap, Text Color, Icon and Text Gap, Typography, Icon Color, Icon Size |
| Listing FAQs | Single Listing, Listing Card, Info Window | Question Count | FAQ item background, border, padding, text color, and typography controls |
| Listing Share | Single Listing, Listing Card, Info Window | Layout | Background Color, Text Color, Padding, Border, Icon Size, Icon Color, Icon Hover Color, Title Color, Title Typography, Title Alignment |
| Favorite Button | Single Listing, Listing Card, Info Window | No element-specific Content controls | Alignment, Padding, normal and active Color, Background Color, Border |
| Compare Button | Single Listing, Listing Card, Info Window | No element-specific Content controls | Alignment, Padding, normal and active Color, Background Color, Border |
| Back Button | Single Listing | Button Label, Back Page Option, Selected Page, Fallback Page, Button Style | Typography, Text Color, Background, Border, Padding |
| Related Listings | Single Listing | Category, Location, Label, Tag, Feature, Radius (m), Shortcode | No element-specific Style controls |
| Listing Embeds | Single Listing, Listing Card, Info Window | No element-specific Content controls | No element-specific Style controls |
| Listing Video | Single Listing, Listing Card, Info Window | No element-specific Content controls | No element-specific Style controls |
| Listing Remark | Single Listing, Listing Card, Info Window | Auto Paragraph | Typography, Text Color, Background Color, Border, Padding |
| Report Abuse | Single Listing, Listing Card, Info Window | Name Field, Phone Field, Privacy Consent, Consent Label | Background, Border, Padding, Row Gap, Typography, Text Color |
| Call to Action | Single Listing, Listing Card, Info Window | Button Text, Button Action, Custom Link, Popup Content, Popup Width | Alignment, Background, Padding, Margin, Border, Typography, Text Color |
| Listing Review Form Reviews | Single Listing, Listing Card, Info Window | No element-specific Content controls | Typography, Text Color, Background, Border, Padding |
| Ads Addon Ads | Single Listing, Listing Card, Info Window | No element-specific Content controls | Typography, Text Color, Background, Border, Padding |
| Auction Addon Auction | Single Listing, Listing Card, Info Window | No element-specific Content controls | Typography, Text Color, Background, Border, Padding |
| Booking Addon Booking | Single Listing, Listing Card, Info Window | No element-specific Content controls | Typography, Text Color, Background, Border, Padding |
| Franchise Addon Franchise | Single Listing, Listing Card, Info Window | Show Headings, Parent, Sub Listings Heading, Listdom Shortcode | Typography, Heading Color |
| Jobs Addon Jobs | Single Listing, Listing Card, Info Window | No element-specific Content controls | Typography, Text Color, Background, Border, Padding |
| Stats Addon Stats | Single Listing, Listing Card, Info Window | Display Zero Values, Display Visits, Display Contacts, Display Offers, Display Bookings, Display Reviews, Display Comments | Layout, List Gap, Item Gap, Typography, Text Color |
| Team Addon Team | Single Listing, Listing Card, Info Window | Tel, Email, Mobile, Website, Fax, Avatar, Job Title, Social Networks, Biography | Background, Border, Padding |
Active add-ons can register additional elements or remove their elements when the add-on is deactivated. Reactivate the required add-on or remove the unsupported element from the template.
Advanced tab
Section titled “Advanced tab”The Advanced tab is shared by Template Builder elements. Use it to control responsive visibility:
| Option | What it does |
|---|---|
| Hide on Desktop | Hides the selected element on desktop views. |
| Hide on Tablet | Hides the selected element on tablet views. |
| Hide on Mobile | Hides the selected element on mobile views. |
These controls affect whether the element renders for the selected device range. They do not change the element’s Content or Style settings.
Using the live preview
Section titled “Using the live preview”Open template settings and select a Preview Listing. The editor uses that listing’s data to render the preview.
Choose a listing that contains the fields and add-on data the template is designed to show. For example, use a bookable listing when designing a template with the Booking element Booking.
The preview is intended to match the frontend closely. Theme CSS, page context, cached assets, and data that depends on the current visitor can still produce small differences. Always verify the published template on a real public page.
Responsive design
Section titled “Responsive design”Use the Desktop, Tablet, and Mobile controls above the canvas to inspect the layout at each breakpoint.
When a control supports responsive values, set the desktop value first, then adjust tablet and mobile only where necessary. Check nested containers, long titles, galleries, maps, tables, action buttons, and add-on forms at every size.
Responsive preview changes the editing viewport. It does not create a separate template for each device.
Saving, autosave, and publishing
Section titled “Saving, autosave, and publishing”- Save Draft stores an unpublished template.
- Publish makes the template available for selection.
- Update saves changes to a previously saved or published template.
- Auto Save can preserve layout revisions while editing. Its status appears in the editor.
- Last Saved indicates when the current template was last stored.
Saving a template does not automatically assign it to every listing view. Publish it, then select it in the appropriate Listdom single-listing or shortcode style setting.
Assigning a template
Section titled “Assigning a template”Single Listing template
Section titled “Single Listing template”Publish a Single Listing template, then open the Listdom single-listing or details-page settings and select the template as the layout. Visit several listings to verify listings with different categories, fields, and add-on data.
Listing Card template
Section titled “Listing Card template”Publish a Listing Card template, then edit a compatible Listdom shortcode or archive configuration and select the template as its style. Check that the selected skin supports the intended card context.
Info Window template
Section titled “Info Window template”Publish an Info Window template, then select it in the map or shortcode context that controls map info-window output. Info Window templates are compact by design, so test them with long titles, multiple locations, prices, images, and any add-on elements you include.
A published template only renders in a compatible context. A Single Listing template cannot be used as a Listing Card or Info Window, and a compact template cannot replace a full single-listing page.
For shortcode display settings, see Skin Shortcodes. For custom-field output in Listdom-managed layouts and builder integrations, see Custom Fields.
Recommended publishing checklist
Section titled “Recommended publishing checklist”- Confirm the template type.
- Select a representative Preview Listing.
- Check every dynamic element with populated and empty data.
- Check nested containers in the Structure panel.
- Review Desktop, Tablet, and Mobile previews.
- Save and publish the template.
- Assign it to the intended Listdom setting or shortcode.
- Test the public page while logged out.
- Test listings from different categories and with different add-ons enabled.
- Clear frontend and CDN caches after major template changes.
Builder integrations
Section titled “Builder integrations”Listdom’s dedicated builder add-ons can provide their own elements, widgets, or modules for the same listing data:
Use Template Builder when you want the native Listdom template workflow. Use a builder integration when the site already standardizes single-listing, listing-card, or info-window layouts in that builder.
Troubleshooting
Section titled “Troubleshooting”An element is missing
Section titled “An element is missing”Confirm that the template type supports the element and that the required add-on is active.
The preview is empty
Section titled “The preview is empty”Select a Preview Listing with the data needed by the template. For add-on elements, choose a listing that actually uses that add-on feature.
The frontend does not show the template
Section titled “The frontend does not show the template”Confirm that the template is published and assigned in the correct single-listing or shortcode style setting. Clear caches after changing assignments.
An add-on element stopped rendering
Section titled “An add-on element stopped rendering”Confirm that the add-on is installed, active, licensed where required, and compatible with the current Listdom version. Remove unsupported elements from the template if the add-on is no longer used.
A responsive value is not applied
Section titled “A responsive value is not applied”Confirm that the specific control supports responsive values and that the value was set while the intended Desktop, Tablet, or Mobile mode was active.
Can one template be used for Single Listing, Listing Card, and Info Window output?
Section titled “Can one template be used for Single Listing, Listing Card, and Info Window output?”No. Create the template with the type required by its destination.
Why did an add-on element disappear?
Section titled “Why did an add-on element disappear?”The corresponding add-on may be inactive, or the element may not support the current template type.
Does publishing assign the template automatically?
Section titled “Does publishing assign the template automatically?”No. Publish the template, then select it in the relevant single-listing, shortcode, or archive setting.