--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/blog-layout' title: 'Design a blog listing layout | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Featured post, listing and sidebar' tags: - 'Follow a tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Design a blog listing layout' description: 'Featured post, listing and sidebar' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/blog-layout' articleSection: 'Follow a tutorial' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/blog-layout' description: 'Featured post, listing and sidebar' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Design a blog listing layout. Featured post, listing and sidebar Learn DXPR BuilderBuild pagesFollow a tutorial ## In this guide Related guides - [Embed forms](/hc/documentation/learn-dxpr-builder/tutorials/add-forms) - [Drupal Views](/hc/documentation/learn-dxpr-builder/integrations/drupal-views) - [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) - [About page](/hc/documentation/learn-dxpr-builder/tutorials/about-page) Here you build the page that lists your blog posts: a featured post at the top, a listing from a Drupal view with a sidebar, and a newsletter band. New posts appear on it without editing the page. To tell one customer story in depth, follow [Write up a case study](/hc/documentation/learn-dxpr-builder/tutorials/case-study) instead. The video builds the blog of a reporting product. ## Before you start - Your role has the **Edit with DXPR Builder** permission. - Your site has a view that lists blog posts. DXPR CMS ships a **Blog** view with a **Blog** listing and a **Featured posts** display. - The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**. - New elements land at the top of their column. Add the elements of a column in reverse order, or drag them into place afterwards. ## Step 1: add the featured post 1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab. 2. Click **+** on the section and pick **Row**; it arrives with two equal columns. Click its grid icon (**Column layout**), pick the **2/3 + 1/3** preset and click **Save**. 3. Click **+** in the wide column and pick **Image** from the **Content** tab. Click **Select Image**, tick a photo and click **Insert selected**. Type the **Alt attribute** in the **SEO** panel and click **Save**. 4. Click **+** in the narrow column and pick **Button**. Set **Title** to "Read more", **Link** to the post and keep **Type** on **Primary**, then click **Save**. 5. Click **+** in the narrow column again and pick **Text**; it lands above the button. Type the post title as **Heading 2**, add the excerpt below it and click **Save**. ## Step 2: add the listing and sidebar 1. Hover the section and click **Add Section Below**. Add a **Row** to it with the **2/3 + 1/3** preset. 2. Click **+** in the wide column and open the **Drupal Views** tab. Pick **View: Blog (Blog)** and click **Save**; it renders your posts. 3. Click **+** in the narrow column and open the **Drupal Views** tab. Pick **View: Blog (Featured posts)** and click **Save**. 4. Click **+** in the narrow column again and open the **Drupal Blocks** tab. Pick **Block: Forms: Search form** and click **Save**; it lands above the featured posts. ## Step 3: add the newsletter band 1. Add a third section with **Add Section Below**. Open its **More** > **Settings**, pick the navy **Background** in the **Style** panel and click **Save**. 2. Click **+** on the section and pick **Button**. Set **Title** to "Subscribe to the newsletter", **Link** to `/newsletter` and **Type** to **Light**, then click **Save**. 3. Click **+** again and pick **Text**; it lands above the button. Type "Stay updated" as **Heading 2** and one line about the newsletter below it. Set **Font color** to white in the **Style** panel and click **Save**. ## Step 4: save and preview 1. Click **Save** on the builder toolbar. 2. Open the view menu (the **eye icon**) and choose **Preview**. ## Go further Not shown in the video: - **Signup form**: add a newsletter form block from the **Drupal Blocks** tab in place of the button; see [Add forms to pages](/hc/documentation/learn-dxpr-builder/tutorials/add-forms) - **Categories**: add a view of your blog categories to the sidebar - **Sidebar tint**: open the narrow column's settings and give it a light grey **Background** and some padding in the **Style** panel ## What you see The featured post opens the page: a wide photo on the left, its title, excerpt and **Read more** button on the right. Below it your posts fill the wide column, with the search form and featured posts in the sidebar. A navy band closes the page with the **Stay updated** heading and the **Subscribe to the newsletter** button. ## If you don't see your posts - **The Blog view is not in the Drupal Views tab.** The view is disabled, or your builder user profile hides it. Enable it at **Structure** > **Views** (`/admin/structure/views`), or ask an administrator to tick it under **Views** in your user profile. - **The listing column stays empty.** The view has no published posts to show. Publish a post at **Content** > **Add content** > **Blog post**, then reload the page. - **The search form is not in the Drupal Blocks tab.** The core **Search** module provides that block. Turn it on at **Extend** (`/admin/modules`). - **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails). ## What's next? - [Add forms to pages](/hc/documentation/learn-dxpr-builder/tutorials/add-forms) for signup forms - [Drupal Views integration](/hc/documentation/learn-dxpr-builder/integrations/drupal-views) for configuring views - [Drupal Blocks integration](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) for sidebar blocks - [About page](/hc/documentation/learn-dxpr-builder/tutorials/about-page) for the next tutorial