{"id":368920,"date":"2025-10-26T11:34:38","date_gmt":"2025-10-26T05:34:38","guid":{"rendered":"https:\/\/directorist.com\/?post_type=docs&#038;p=368920"},"modified":"2026-03-18T04:07:26","modified_gmt":"2026-03-17T22:07:26","password":"","slug":"single-page-layout","status":"publish","type":"docs","link":"https:\/\/directorist.com\/docs\/single-page-layout\/","title":{"rendered":"Single Page Layout"},"content":{"rendered":"\n<p>The Single Listing Page is the detailed view of a directory listing that users are taken to when they click on a listing from any archive page such as All Listings, Search Results, or Category Archives.<\/p>\n\n\n\n<p>This page is enabled by default and displays all relevant information about a listing, including descriptions, media, contact details, and more. However, Directorist gives you full flexibility to customize or even disable the single listing view entirely, turning your directory into a simple catalog-style display if needed. <\/p>\n\n\n\n<p>The Single Page Layout settings allow you to control how this page looks and what elements are shown ranging from the header image and title placement to badges, filters, and custom content areas. Whether you want a sleek, minimalist layout or a feature-rich detailed page, this section helps you configure the perfect presentation for your listings.<\/p>\n\n\n\n<p>There are three main parts to configure: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Listing Header<\/strong> \u2013 Customize the top section, including title, images, and action buttons.<\/li>\n\n\n\n<li><strong>Contents<\/strong> \u2013 Manage the layout and order of listing details like description, tags, media, and custom fields.<\/li>\n\n\n\n<li><strong>Custom Single Listing Page (optional)<\/strong> \u2013 To replace the default layout with a custom-designed page using shortcodes or page builders.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Listing Header<\/h3>\n\n\n\n<p>The <strong>Listing Header<\/strong> section lets you design the topmost portion of the single listing page. It gives you full control over what appears visually before users scroll into the main content. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"744\" src=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/CleanShot-2025-07-21-at-09.53.28@2x-1024x744.png\" alt=\"\" class=\"wp-image-362802\" srcset=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/CleanShot-2025-07-21-at-09.53.28@2x-1024x744.png 1024w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/CleanShot-2025-07-21-at-09.53.28@2x-300x218.png 300w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/CleanShot-2025-07-21-at-09.53.28@2x-768x558.png 768w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/CleanShot-2025-07-21-at-09.53.28@2x-1536x1116.png 1536w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/CleanShot-2025-07-21-at-09.53.28@2x-2048x1488.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enable or disable the image\/slider.<\/li>\n\n\n\n<li>Reorder elements like the Title, Subtitle (Tagline).<\/li>\n\n\n\n<li>Choose whether header content appears <strong>on top of the image<\/strong> or <strong>below the image<\/strong>.<\/li>\n\n\n\n<li>Add <strong>filters<\/strong> and metadata fields such as Category, Pricing, Ratings, Badges, and Location.<\/li>\n\n\n\n<li><strong>Top Left Area<\/strong>: Optionally enable a Back button.<\/li>\n\n\n\n<li><strong>Top Right Area<\/strong>: Add buttons like Share, Bookmark, or Report Listing. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Listing Header<\/h2>\n\n\n\n<p>The <strong>Listing Header<\/strong> section lets you design the topmost portion of the single listing page. It gives you full control over what appears visually before users scroll into the main content. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Left panel<\/h4>\n\n\n\n<p>Displays all available header elements you can toggle on or off.<br>These include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Back<\/strong>&nbsp;\u2013 adds a back navigation button.<\/li>\n\n\n\n<li><strong>Bookmark<\/strong>,&nbsp;<strong>Share<\/strong>,&nbsp;<strong>Report<\/strong>&nbsp;\u2013 user actions shown at the top right.<\/li>\n\n\n\n<li><strong>Listing Title<\/strong>&nbsp;\u2013 main title of the listing.<\/li>\n\n\n\n<li><strong>Listings Location<\/strong>,&nbsp;<strong>Category<\/strong>,&nbsp;<strong>Rating<\/strong>,&nbsp;<strong>Badges<\/strong>,&nbsp;<strong>Pricing<\/strong>&nbsp;\u2013 display quick listing info.<\/li>\n\n\n\n<li><strong>Listing Image\/Slider<\/strong>&nbsp;\u2013 main image area of the listing.<\/li>\n<\/ul>\n\n\n\n<p>You can also:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reorder elements<\/strong>&nbsp;by dragging them up or down.<\/li>\n\n\n\n<li><strong>Toggle visibility<\/strong>&nbsp;using the switch beside each item.<\/li>\n\n\n\n<li><strong>Adjust settings<\/strong>&nbsp;via the gear icon next to individual elements.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Right preview panel<\/h4>\n\n\n\n<p>Shows a live visual preview of how the selected header elements will appear on the front end. You can see items like the&nbsp;<strong>Back button<\/strong>,&nbsp;<strong>Bookmark<\/strong>,&nbsp;<strong>Share<\/strong>, and&nbsp;<strong>Report<\/strong>&nbsp;buttons at the top, followed by the&nbsp;<strong>Listing Title<\/strong>, quick info tags, and the&nbsp;<strong>Listing Image\/Slider<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"766\" src=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-145-1024x766.png\" alt=\"\" class=\"wp-image-368923\" srcset=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-145-1024x766.png 1024w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-145-300x224.png 300w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-145-768x574.png 768w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-145-1536x1148.png 1536w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-145-2048x1531.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Listing Contents<\/h2>\n\n\n\n<p>The&nbsp;<strong>Listing Contents<\/strong>&nbsp;tab controls the main body area of the single listing page \u2014 everything that appears below the header section. It lets you decide which content blocks (like description, features, video, reviews, or related listings) appear, their order, and how they\u2019re structured.<\/p>\n\n\n\n<p><strong>Path:<\/strong> <strong>WP Admin<\/strong>&nbsp;\u2192&nbsp;<strong>Directory Listings<\/strong>&nbsp;\u2192&nbsp;<strong>Directory Builder<\/strong>&nbsp;\u2192&nbsp;<em>Select a Directory<\/em>&nbsp;\u2192&nbsp;<strong>Single Page Layout<\/strong>&nbsp;\u2192&nbsp;<strong>Listing Contents<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>The screen is divided into two sections:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Left panel \u2013 Form Fields<\/strong><\/h4>\n\n\n\n<p>Contains all available content elements you can drag into the layout, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Preset Fields<\/strong>: Tag, Email, Phone, Website, Address, Images, Zip\/Post Code, Social Info, Date, Time, etc.<\/li>\n\n\n\n<li><strong>Other Fields<\/strong>: Custom Content, Author Info, Contact Listing Owner Form, FormGent Form, and more.<\/li>\n<\/ul>\n\n\n\n<p>Read FormGent Form detailed documentation <a href=\"https:\/\/directorist.com\/docs\/formgent-integration\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/directorist.com\/docs\/formgent-integration\/\" rel=\"noreferrer noopener\"><strong>here<\/strong><\/a>.<\/p>\n\n\n\n<p>You can use these fields to display custom information, external forms, or special content sections within your listing page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Right panel \u2013 Listing Sections<\/strong><\/h4>\n\n\n\n<p>Shows the visual layout of the listing content area. Common default sections include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description<\/strong><\/li>\n\n\n\n<li><strong>Features<\/strong><\/li>\n\n\n\n<li><strong>Listing Video<\/strong><\/li>\n\n\n\n<li><strong>Location<\/strong><\/li>\n\n\n\n<li><strong>Review<\/strong><\/li>\n\n\n\n<li><strong>Related Listings<\/strong><\/li>\n<\/ul>\n\n\n\n<p>You can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Add new sections<\/strong>&nbsp;using&nbsp;<strong>+ Add Section<\/strong>.<\/li>\n\n\n\n<li><strong>Reorder<\/strong>&nbsp;sections via drag and drop.<\/li>\n\n\n\n<li><strong>Delete<\/strong>&nbsp;a section using the trash icon.<\/li>\n\n\n\n<li><strong>Configure<\/strong>&nbsp;each section with the settings (\u2699\ufe0f) icon.<\/li>\n\n\n\n<li><strong>Drag fields<\/strong>&nbsp;from the left panel into any section on the right.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-146-1024x586.png\" alt=\"\" class=\"wp-image-368924\" srcset=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-146-1024x586.png 1024w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-146-300x172.png 300w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-146-768x439.png 768w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-146-1536x879.png 1536w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/09\/image-146-2048x1172.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Example use<\/h4>\n\n\n\n<p>If you want to show a&nbsp;<strong>custom contact form<\/strong>&nbsp;after the listing description:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag the&nbsp;<strong>FormGent Form<\/strong>&nbsp;field from the left panel.<\/li>\n\n\n\n<li>Drop it into a new section below \u201cDescription.\u201d<\/li>\n\n\n\n<li>Customize it using the settings icon.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Tips<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can create unique single page content structures for each directory type.<\/li>\n\n\n\n<li>Combine Directorist\u2019s built-in fields with custom content for maximum flexibility.<\/li>\n\n\n\n<li>Always use&nbsp;<strong>Preview<\/strong>&nbsp;to check how your layout appears on the frontend before saving.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Single Listing Page<\/h2>\n\n\n\n<p>The&nbsp;<strong>Custom Single Listing Page<\/strong>&nbsp;option lets you design your own single listing layout using WordPress pages and shortcodes. This feature replaces the default Directorist layout and gives you complete control over the structure and design.<\/p>\n\n\n\n<p><strong>Path: WP Admin<\/strong>&nbsp;\u2192&nbsp;<strong>Directory Listings<\/strong>&nbsp;\u2192&nbsp;<strong>Directory Builder<\/strong>&nbsp;\u2192&nbsp;<em>Select a Directory<\/em>&nbsp;\u2192&nbsp;<strong>Single Page Layout<\/strong>&nbsp;\u2192&nbsp;<strong>Custom Single Listing Page<\/strong><\/p>\n\n\n\n<p>When you enable this option, the default single listing layout is disabled. Instead, you can assign a WordPress page and insert Directorist shortcodes to build the layout manually<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Enable Custom Single Listing Page<\/strong><\/h3>\n\n\n\n<p>Toggle this switch to activate the custom page option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"869\" src=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/10\/image-112-1024x869.png\" alt=\"\" class=\"wp-image-368927\" srcset=\"https:\/\/directorist.com\/wp-content\/uploads\/2025\/10\/image-112-1024x869.png 1024w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/10\/image-112-300x255.png 300w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/10\/image-112-768x652.png 768w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/10\/image-112-1536x1303.png 1536w, https:\/\/directorist.com\/wp-content\/uploads\/2025\/10\/image-112.png 1874w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once enabled:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Single Listing Page:<\/strong><br>Choose a WordPress page from the dropdown where your single listing content will appear.<\/li>\n\n\n\n<li><strong>Generate Shortcodes:<\/strong><br>Directorist automatically provides shortcodes for all the sections you\u2019ve added in the&nbsp;<em>Listing Contents<\/em>&nbsp;tab.\n<ul class=\"wp-block-list\">\n<li>You can copy these shortcodes and paste them into your selected page to display each section individually. Each shortcode corresponds to a layout block, such as&nbsp;<strong>Header<\/strong>,&nbsp;<strong>Description<\/strong>,&nbsp;<strong>Features<\/strong>,&nbsp;<strong>Video<\/strong>, etc.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Note:<\/strong><br>Once this option is enabled, Directorist no longer uses the default single listing layout. All display content will depend on the shortcodes you place on your selected page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Single Listing Page is the detailed view of a directory listing that users are taken to when they click on a listing from any archive page such as All Listings, Search Results, or Category Archives. This page is enabled by default and displays all relevant information about a listing, including descriptions, media, contact details, [&hellip;]<\/p>\n","protected":false},"author":24585,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[708],"doc_tag":[],"class_list":["post-368920","docs","type-docs","status-publish","hentry","doc_category-directory-builder"],"year_month":"2026-03","word_count":994,"total_views":"0","reactions":{"happy":"0","normal":"0","sad":"1"},"author_info":{"name":"yousuf.sovware","author_nicename":"yousuf-sovware","author_url":"https:\/\/directorist.com\/author\/yousuf-sovware\/"},"doc_category_info":[{"term_name":"Directory Builder","term_url":"https:\/\/directorist.com\/docs-category\/directory-builder\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/docs\/368920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/users\/24585"}],"replies":[{"embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/comments?post=368920"}],"version-history":[{"count":0,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/docs\/368920\/revisions"}],"wp:attachment":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/media?parent=368920"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/doc_category?post=368920"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/doc_tag?post=368920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}