Listdom Timeline Skin Documentation

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

The Timeline skin presents listings along a time-based line, creating a visually engaging chronological layout. Items can appear in a vertical timeline (stacked events) or a horizontal timeline carousel. This format is ideal for showcasing listings or events in sequence (e.g. by date) with a connecting line and context of progression.

Skin

Select Timeline as the skin when creating or editing a Listdom shortcode to display listings in timeline format. The Timeline skin supports two modes: a Vertical Timeline (stacked entries down the page) and a Horizontal Timeline (a side-scrolling carousel of entries). You can switch between these modes via a setting in the Layout tab (detailed below). Use the Timeline skin to emphasize chronological order – for example, to show event listings over time or any listings where sequence matters.

Style

In the Style tab for the Timeline skin, choose a style preset and control which elements appear on each timeline entry. The Timeline skin offers Style 1 and Style 2, which differ in design details for the timeline cards and connector. You can also select template-based layouts using Elementor or Divi when those add-ons are active. When Elementor or Divi templates are used, the Elements section is hidden, and element toggles are only available for Style 1 and Style 2. Pick a Style from the dropdown to change the appearance of the timeline items (Style 1 is the default).

Listing Elements Visibility

After selecting a style, you can toggle the visibility of various elements on the timeline listing cards. Elements only render on the front end if the listing has data for them. For example, a listing with no price value will not show a price even when the Price element is enabled.

Image: Toggle to show or hide the listing’s featured image on each timeline card. If enabled, the card will display an image (or image slider); if disabled, no image is shown.
Image Method: If images are enabled, choose how to present them. Cover displays only the featured image as a static cover image. Slider displays all gallery images in an interactive slider within the card.
Image Fit: Determine how the image fills its container. Cover (default) will crop/zoom the image to cover the area (possibly cutting off parts of the image), while Contain fits the entire image within the area (showing blank space if the aspect ratio doesn’t match).

Contact Info: Display the listing’s full contact details (phone, email, and social icons, etc.). Social networks show when the Social Network component is enabled under Listdom → Settings → Advanced → Components (enabled by default).
Categories: Display the listing’s category labels on the timeline card (Style 1 only). This helps users quickly identify the type of each listing.
Share Buttons: Show social share buttons on each card, allowing users to share the listing to social media. This element is visible in the settings only when the Social Network component is enabled under Listdom → Settings → Advanced → Components (enabled by default).
Price: Display the listing’s price or price range on the card (if the pricing feature is in use). This element is visible in the settings only when the Pricing component is enabled under Listdom → Settings → Advanced → Components (enabled by default). For example, a listing could show a price like “$100” or a range like “From $50”.
Title: Toggle the listing title on or off. Generally, you will keep this on so that each timeline entry shows the listing’s name/title. If turned off, the cards will not show their titles, which is usually not recommended.
Claim Status: If the Claim add-on is active and listings can be claimed by their owners, toggle this to show a “claimed” indicator (such as a checkmark or label) on listings that have been claimed. (Requires the Claim add-on to be installed.)
Labels: Show any label taxonomies on the listing (like “Featured” or custom labels). Labels appear as small badges on the card. This toggle is on by default for styles that include label placement.
Favorite Icon: Display a heart (favorite) icon on each card, allowing logged-in users to save the listing as a favorite. (Requires the Favorite add-on.)
Compare Icon: Display a compare icon on each card so users can add the listing to a comparison list. (Requires the Compare add-on.)
Review Stars: Show star ratings on the card if the listing has reviews/ratings. This will display the average rating as stars. (Requires the Reviews add-on.)

(The Timeline skin’s styles focus on key information like title, date, and basic details. Unlike some other skins, timeline cards do not typically display a description excerpt or certain other fields to maintain a compact timeline appearance.)

Map

The Timeline skin can optionally include a map alongside or above/below the timeline. The Map section appears when the Map and Address component is enabled under Listdom → Settings → Advanced → Components (enabled by default). Configure map settings in the Map tab:

Map Structure

Map Provider: Choose the map service to use for displaying location markers. By default, this follows your global Listdom setting (e.g., Leaflet or Google Maps). If Google Maps is used, ensure you have set up a Google Maps API key in Listdom settings. (Leaflet is the default provider with no API key needed; Google Maps offers more features if configured.)
Map Position: Determine where the map will appear relative to the timeline listings. Options:
- Top: Show an interactive map above the timeline listings.
- Bottom: Show the map below the timeline listings.
- Left: Display the map on the left side of the page, with the timeline on the right.
- Right: Display the map on the right side of the page, with the timeline on the left.

For a vertical timeline, Top or Bottom placement will stack the map above or below the timeline. For a horizontal timeline, Left or Right placement can create a side-by-side layout (the map next to the horizontal timeline carousel). Choose the position that best fits your page design.

Map Style: (Google Maps only) If using Google Maps as the provider, you can select a custom map style theme here. This allows you to apply a pre-defined color/theme to the Google map (or leave it blank to use the standard map style). This option has no effect for OpenStreetMap/Leaflet maps.
Map Height: Set a custom height for the map area. Provide a value including units (for example, 400px for a fixed pixel height, or 100vh for full viewport height). If left blank, the map will use a default height. Adjust this if you need the map to be taller or shorter on the page.
Mouse Wheel Zoom: Choose whether the map should zoom in/out when users scroll over it with the mouse wheel. Enabled allows scroll-wheel zoom, Disabled (default) prevents the wheel from zooming (which can be preferable to avoid interfering with page scroll).

Google Maps Controls

When Google Maps is selected as the Map Provider, a Google Maps Controls tab appears next to Settings in the Map section. Use it to position or toggle Google Maps UI controls:

Zoom Control: Set the control position or disable it. Position options: Disabled, Top Left, Top Center, Top Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Bottom Left, Bottom Center, Bottom Right.
Map Type Control: Choose the position or disable it (same position options as above).
Street View Control: Choose the position or disable it (same position options as above).
Draw Controls Pro: Choose the position or disable it (same position options as above).
GPS Control Pro: Choose the position or disable it (same position options as above).
Scale Control: Enable or disable the scale display.
Camera Control: Enable or disable the camera control.
Fullscreen Control: Enable or disable full-screen mode.

Markers

Marker/Shape On Click: Define what happens when a user clicks a listing’s marker on the map (or a shape, if using custom layers):
- Open Infowindow: (Default) Show an info window pop-up above the marker with a brief listing summary when clicked.
- Redirect to Single Listing Page: Navigate directly to the listing’s individual page when the marker is clicked.
- Open Single Listing in a Lightbox: Open the listing’s detail page in a modal lightbox overlay on the current page (instead of navigating away).
- None: Do nothing on marker click (markers will be static with no action).
Info Window Trigger: Appears when Marker/Shape On Click is set to Open Infowindow. Choose Show on click (default) or Show on hover to control how the infowindow opens.
Marker Type Advanced Map: Choose how markers are generated. Options include Inherit From Global Options, Category, Label, Price, Square, or Listing ID.
Infowindow Style Advanced Map: Select which infowindow style to use. Options include Inherit From Global Options, Style 1, or Style 2. You can also use Elementor or Divi templates with Elementor or Divi for infowindow layouts.
External Direction Link Advanced Map: Add or inherit an external directions link for the infowindow. Options include Inherit From Global Options, Enabled, or Disabled.

Clustering

Enable: Toggle clustering of map markers. When Enabled (default), multiple markers that are close together will group into a single cluster icon (often shown as a bubble with a number) to declutter the map.
Bubbles: Choose a cluster icon style. Classic Bubbles / Modern Bubbles are preset styles available for Google Maps. Clean Bubbles are available with the Advanced Map add-on. (Leaflet maps will cluster markers using their default appearance, and this setting primarily affects Google Maps.)

Search & Location

Map Search: Enable this if you want the listing results to automatically filter based on the map viewport. When Map Search is turned on (requires Listdom Pro), moving or zooming the map will dynamically update the timeline to show only listings within the current map bounds. If Map Search is off, the map will show markers for the listings but not control the list via viewport.
Auto GPS: (Advanced Map Add-on) If you have the Advanced Map add-on, an Auto GPS option will appear. Enabling Auto GPS will prompt the user’s browser for their location on page load (with user permission) and automatically center the map on the user’s location, filtering listings to those near them. This feature only works over HTTPS.

Restrictions & Rules

Map Limit: Set the maximum number of listings to display on the map. The default is 300. If your shortcode is pulling in many listings, you may limit how many markers load for performance. (Showing too many markers can slow down the map and page.) It’s recommended to keep this at 300 or fewer, or use filters to narrow results, for optimal performance.
Global Restrict Bounds Advanced Map: Override the global boundaries for this shortcode. When enabled, enter South West and North East latitude/longitude values to define a custom map boundary. This setting mirrors the global boundary option in the Advanced Map add-on settings.
Show Excluded Listings Advanced Map: If enabled, listings excluded at the listing level (via the per-listing “exclude from map” toggle) still appear on the map for this shortcode. This setting mirrors the global option in the Advanced Map add-on settings.

Layout

In the Layout tab, configure how the timeline is structured and how additional listings load:

Limit: The number of listings to display per page (or per load). Default is 12. In a timeline context, this means 12 timeline entries will load initially. If more listings are available beyond this limit, they will be loaded according to the Pagination Method you choose. Adjust this number if you want more or fewer items loaded initially.
Horizontal Layout: This toggle switches the Timeline between vertical and horizontal modes. When Off (default), the Timeline is vertical — entries are stacked vertically down the page with a central line. When On, the Timeline becomes horizontal — entries are arranged in a side-scrolling carousel format.
Alignment: Choose how entries align along the timeline. The options change based on the Horizontal Layout setting:
- Vertical (Horizontal Layout Off): Zigzag, Left, Right.
- Horizontal (Horizontal Layout On): Zigzag, Top, Bottom.
Listings Per Row: (Horizontal timeline only) Set how many listings are visible at once in the horizontal carousel view. You can choose 1, 2, 3, or 4 items to display per “slide” (default is 3). For example, if set to 3, three timeline cards will be shown side by side, and then users can scroll or slide to see more.
Autoplay: (Horizontal timeline only) Toggle whether the horizontal timeline should auto-rotate through the listings. When enabled (default), the carousel will automatically slide to show the next set of timeline items after a short delay, creating an animated slideshow effect. If disabled, users must manually click or swipe to navigate the horizontal timeline.
Pagination Method: Decide how additional listings are loaded when the number of listings exceeds the Limit:
- Disabled: No additional listings will load beyond the initial limit. Users will only see the first set of timeline entries (use this if you want a fixed set of items or will use multiple shortcodes to segment listings).
- Load More Button: A “Load More” button will appear below the timeline. Clicking it loads the next batch of listings (e.g. 12 more) without a page reload (via AJAX).
- Infinite Scroll: Listings will automatically load as the user scrolls to the end of the timeline, without any button (continuous scrolling behavior).
- Numeric: Traditional numbered pagination links will appear (e.g., 1, 2, 3…) so the user can navigate to page 2, 3, etc., to see additional timeline entries.

Load More Button is the default for Timeline, providing a balance between user control and not overwhelming the page. Choose the method that fits your site’s UX.

Sort

The Sort tab allows you to define how listings are ordered in the timeline by default, and which sorting options (if any) are offered to users on the frontend:

Default Sort

Under Default Sort, set the initial ordering of timeline entries when this shortcode is used. Core Listdom sorting includes List Date, Listing Title, Last Update, Comments, Listing ID, Author, Random, Price, and Most Viewed. You can also sort by custom fields created under Listings → Custom Fields (all types except Image).

Order By: Select the field to sort by initially. Core options include List Date, Listing Title, Last Update, Comments, Listing ID, Author, Random, Price, and Most Viewed.

Add-on sort options can appear when enabled:

Claimed Claim
Rate and Most Reviewed Reviews
Rank Rank
Top Up Date Top Up
Order: Choose the direction of the sort – Descending or Ascending. For example, if you chose Publish Date and Descending, the newest listings will show first (timeline entries from newest to oldest). If you chose Title and Ascending, listings would be sorted A–Z.

Set these to define the timeline’s initial sequence. Often for a timeline, sorting by date (either newest first or oldest first) makes sense, but you have full control.

Sort Options

In Sort Options, you configure what sort controls, if any, the user sees on the front end and how they behave:

Display Sort Options: Toggle ON to show a sort dropdown or list to users on the timeline page. If OFF, no sort interface is shown to the user (the listings will simply stay in the default order you set). By default, this is enabled, allowing users to change sort order if needed.
Sort Style: Choose how the sort interface looks for the user:
- Default Style: Use the global default style (often a dropdown) for the sort control.
- Drop Down: Explicitly use a dropdown menu for sort choices.
- List: Show sort options as a horizontal list of clickable links/buttons.
Available Sort Criteria: You’ll see a list of all possible sort fields (the same as under Order By). For each criterion in this list, you can:
- Enable or disable it (via a checkbox or toggle). Disabled ones won’t show up to the user.
- Rename it by editing its label (for example, you might rename “Publish Date” to “Newest”).
- Set its default order direction (ascending or descending) for when a user selects that sort option.
- Reorder the sort criteria by dragging them into the desired sequence. The order here determines the order in the dropdown or list shown to users.

For instance, you might only enable a few relevant sorts like Date and Price, and disable others like ID or Author if they don’t make sense to your users. You can also ensure the sort options are listed in a logical order (perhaps “Newest”, “Oldest”, “Price (Low-High)”, “Price (High-Low)” etc., depending on your choices).

Search

Use the Search tab to embed a search/filter form directly with your timeline. This is useful if you want users to narrow down the listings they see on the timeline:

Searchable: Toggle to enable or disable search for this shortcode. When enabled, the timeline can be filtered by a search form. When disabled, the shortcode shows fixed results that do not change based on search queries.
Search Form: Select which Listdom search form to display with this timeline. This dropdown will list any search forms you have created (via Listdom’s search form builder) by their titles. Choose a form that has fields relevant to these listings. For example, if your timeline is showing events, you might use a search form that filters by date or category.
Search Form Position: Choose where the search form appears in relation to the timeline:
- Show on top
- Show on bottom
- Show on left
- Show on right
- Show before the listings

For a typical vertical timeline layout, top or bottom placement works well. Left or right can be used as a sidebar, and “Show before the listings” places the form ahead of the timeline content.

Ajax Search Advanced Portal Search: Choose the search behavior when AJAX is available:
- Disabled: Submit normally with a full page reload.
- On Submit: Apply filters via AJAX when the user submits the form.
- On The Fly: Update results as the user changes fields.

Usually, you will create a custom search form tailored to the listings shown in the timeline (for example, filter by category or a custom field) and select it here. That way, users can refine what they see on the timeline without leaving the page.

The Filter Options tab lets you predefine criteria to limit which listings are shown in this timeline, even before any user search or interaction. These filters work behind the scenes to include or exclude listings based on taxonomy terms or other attributes:

For each filter type below, you can configure an Include list or Exclude list of terms. “Include” means only show listings that have those terms. “Exclude” means hide any listings that have those terms. If you leave a filter category blank, it imposes no restriction on that aspect.

Categories: Filter by listing categories.
- Include Categories: Choose one or more categories; only listings in those categories will appear on the timeline.
- Exclude Categories Pro: Choose categories to omit; any listing in those categories will be left out.
Locations: Filter by location taxonomy.
- Include Locations: Only show listings that are in the selected location(s).
- Exclude Locations Pro: Omit listings that are in the selected location(s).
Tags: Filter by listing tags.
- Include Tags: Show listings that have at least one of these tags.
- Exclude Tags Pro: Do not show listings that have any of these tags.
Features: Filter by features (these are like amenities or boolean attributes of a listing).
- Include Features: Listings that have any of the selected feature(s) will be included.
- Exclude Features Pro: Exclude listings that have any of the selected features.
Labels: Filter by label terms.
- Include Labels: Show only listings that have one of these label(s) (e.g., only “Featured” listings).
- Exclude Labels Pro: Hide listings that have any of these labels.
Author (Listing Owner): You can restrict by listing author (the user who posted the listing).
- Select one or more authors under Include to show only listings by those user accounts.
- Or select authors under Exclude Pro to hide listings by those users.
Custom Fields: If you have custom fields associated with listings, they appear here for filtering based on the field type. Use these to include listings based on custom metadata (exclude options are not available for custom fields).
- Checkbox: Enter the checkbox value to match.
- Time: Pick a time value.
- Date: Select a date.
- Tel: Enter a phone value.
- Textarea: Enter text to match the textarea content.
- Text: Enter text to match the field value.
- Number: Set a minimum and/or maximum range (two numeric inputs).
- Dropdown: Choose one or more values from the dropdown list (multi-select).
- Radio: Enter the radio value to match.
- Datetime: Select a date and time value.
- URL: Enter a URL value.
- Email: Enter an email value.
- Image: Image fields are not available as filters in this section.
Rank Addon Rank: Added by the Listdom Rank add-on. Filter listings by rank using minimum and maximum values, or leave them blank to skip ranking filters.
Memberships Membership: Added by the Listdom Membership add-on. Filter listings by membership packages using checkboxes.

You can combine multiple filters. A listing must satisfy all the Include filters and none of the Exclude filters to appear. Within a single filter type, if multiple terms are included, a listing that has any one of those terms will pass (logical OR for included terms within one filter type). Exclusions work similarly: if a listing has any one of the excluded terms, it will be filtered out.

Using Filter Options, you can create a timeline that is targeted to a specific subset of listings. For example, you might set up a timeline that includes only a certain category (“Events”) and excludes a tag (“Canceled”) to show upcoming events except any that are canceled. These pre-filters apply regardless of user search input, ensuring your timeline shortcode is focused on exactly the content you want.