--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/blog-layout' title: 'Ein Blog-Listenlayout gestalten | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:45:52+00:00' updated: '2026-10-24T19:36:26+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Hier bauen Sie die Seite, die Ihre Blogbeiträge listet: einen empfohlenen Beitrag oben, eine Auflistung aus einer Drupal-Ansicht mit einer Seitenleiste und ein Newsletter-Band. Neue Beiträge erscheinen darauf, ohne die Seite zu bearbeiten. Um eine Kundengeschichte im Detail zu erzählen, folgen Sie stattdessen Eine Fallstudie schreiben. Das Video baut den Blog eines Reporting-Produkts. 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-24T19:36:26+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ein Blog-Listenlayout gestalten' description: |- Hier bauen Sie die Seite, die Ihre Blogbeiträge listet: einen empfohlenen Beitrag oben, eine Auflistung aus einer Drupal-Ansicht mit einer Seitenleiste und ein Newsletter-Band. Neue Beiträge erscheinen darauf, ohne die Seite zu bearbeiten. Um eine Kundengeschichte im Detail zu erzählen, folgen Sie stattdessen Eine Fallstudie schreiben. Das Video baut den Blog eines Reporting-Produkts. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:45:52+0000' dateModified: '2026-10-24T19:36:26+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/de/hc/dokumentation/dxpr-builder-lernen/tutorials/blog-layout' articleSection: 'Tutorial folgen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/blog-layout' description: |- Hier bauen Sie die Seite, die Ihre Blogbeiträge listet: einen empfohlenen Beitrag oben, eine Auflistung aus einer Drupal-Ansicht mit einer Seitenleiste und ein Newsletter-Band. Neue Beiträge erscheinen darauf, ohne die Seite zu bearbeiten. Um eine Kundengeschichte im Detail zu erzählen, folgen Sie stattdessen Eine Fallstudie schreiben. Das Video baut den Blog eines Reporting-Produkts. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Tutorial folgen](/de/hc/documentation/learn-dxpr-builder/tutorials/overview) # Ein Blog-Listenlayout gestalten. DXPR Builder lernenSeiten erstellenTutorial folgen ## In diesem Leitfaden Verwandte Leitfäden - [Formulare zu Seiten hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/formulare-hinzufuegen) - [Eine Drupal-Ansicht auf Ihrer Seite anzeigen](/de/hc/dokumentation/dxpr-builder-lernen/integrationen/drupal-ansichten) - [Einen Drupal-Block zu Ihrer Seite hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/integrationen/drupal-bloecke) - [Eine About-Us-Seite erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/about-us-seite) Hier bauen Sie die Seite, die Ihre Blogbeiträge listet: einen empfohlenen Beitrag oben, eine Auflistung aus einer Drupal-Ansicht mit einer Seitenleiste und ein Newsletter-Band. Neue Beiträge erscheinen darauf, ohne die Seite zu bearbeiten. Um eine Kundengeschichte im Detail zu erzählen, folgen Sie stattdessen [Eine Fallstudie schreiben](/de/hc/documentation/learn-dxpr-builder/tutorials/case-study). Das Video baut den Blog eines Reporting-Produkts. ## Bevor Sie beginnen - Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**. - Ihre Website hat eine Ansicht, die Blogbeiträge listet. DXPR CMS bringt eine **Blog**-Ansicht mit einer **Blog**-Auflistung und einer **Featured posts**-Anzeige mit. - Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) und klicken Sie auf **Save**. - Neue Elemente landen oben in ihrer Spalte. Fügen Sie die Elemente einer Spalte in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz. ## Schritt 1: Den empfohlenen Beitrag hinzufügen 1. Klicken Sie auf der leeren Seite auf **Add Elements** und wählen Sie **Section** aus dem Tab **Layout**. 2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**; sie kommt mit zwei gleichen Spalten. Klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **2/3 + 1/3** und klicken Sie auf **Save**. 3. Klicken Sie in der breiten Spalte auf **+** und wählen Sie **Image** aus dem Tab **Content**. Klicken Sie auf **Select Image**, haken Sie ein Foto an und klicken Sie auf **Insert selected**. Geben Sie das **Alt attribute** im Panel **SEO** ein und klicken Sie auf **Save**. 4. Klicken Sie in der schmalen Spalte auf **+** und wählen Sie **Button**. Setzen Sie **Title** auf „Weiterlesen“, **Link** auf den Beitrag und lassen Sie **Type** auf **Primary**, und klicken Sie dann auf **Save**. 5. Klicken Sie erneut in der schmalen Spalte auf **+** und wählen Sie **Text**; er landet über dem Button. Geben Sie den Beitragstitel als **Heading 2** ein, fügen Sie den Teaser darunter hinzu und klicken Sie auf **Save**. ## Schritt 2: Auflistung und Seitenleiste hinzufügen 1. Fahren Sie über den Abschnitt und klicken Sie auf **Add Section Below**. Fügen Sie ihm eine **Row** mit dem Preset **2/3 + 1/3** hinzu. 2. Klicken Sie in der breiten Spalte auf **+** und öffnen Sie den Tab **Drupal Views**. Wählen Sie **View: Blog (Blog)** und klicken Sie auf **Save**; er rendert Ihre Beiträge. 3. Klicken Sie in der schmalen Spalte auf **+** und öffnen Sie den Tab **Drupal Views**. Wählen Sie **View: Blog (Featured posts)** und klicken Sie auf **Save**. 4. Klicken Sie erneut in der schmalen Spalte auf **+** und öffnen Sie den Tab **Drupal Blocks**. Wählen Sie **Block: Forms: Search form** und klicken Sie auf **Save**; er landet über den empfohlenen Beiträgen. ## Schritt 3: Das Newsletter-Band hinzufügen 1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu. Öffnen Sie sein **More** > **Settings**, wählen Sie das Navyblau als **Background** im Panel **Style** und klicken Sie auf **Save**. 2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Button**. Setzen Sie **Title** auf „Newsletter abonnieren“, **Link** auf `/newsletter` und **Type** auf **Light**, und klicken Sie dann auf **Save**. 3. Klicken Sie erneut auf **+** und wählen Sie **Text**; er landet über dem Button. Geben Sie „Bleiben Sie auf dem Laufenden“ als **Heading 2** ein und eine Zeile über den Newsletter darunter. Setzen Sie **Font color** im Panel **Style** auf Weiß und klicken Sie auf **Save**. ## Schritt 4: Speichern und Vorschau 1. Klicken Sie in der Builder-Symbolleiste auf **Save**. 2. Öffnen Sie das Ansichtsmenü (das **Augen-Icon**) und wählen Sie **Preview**. ## Weiter gehen Nicht im Video gezeigt: - **Anmeldeformular**: Fügen Sie statt des Buttons einen Newsletter-Formularblock aus dem Tab **Drupal Blocks** hinzu; siehe [Formulare zu Seiten hinzufügen](/de/hc/documentation/learn-dxpr-builder/tutorials/add-forms) - **Kategorien**: Fügen Sie der Seitenleiste eine Ansicht Ihrer Blogkategorien hinzu - **Getönte Seitenleiste**: Öffnen Sie die Einstellungen der schmalen Spalte und geben Sie ihr ein hellgraues **Background** und etwas Padding im **Style**-Panel ## Was Sie sehen Der empfohlene Beitrag eröffnet die Seite: links ein breites Foto, rechts sein Titel, Teaser und der Button **Weiterlesen**. Darunter füllen Ihre Beiträge die breite Spalte, mit dem Suchformular und empfohlenen Beiträgen in der Seitenleiste. Ein Navyblau-Band schließt die Seite mit der Überschrift **Bleiben Sie auf dem Laufenden** und dem Button **Newsletter abonnieren**. ## Wenn Sie Ihre Beiträge nicht sehen - **Die Blog-Ansicht ist nicht im Tab Drupal Views.** Die Ansicht ist deaktiviert, oder Ihr Builder-Benutzerprofil blendet sie aus. Aktivieren Sie sie unter **Structure** > **Views** (`/admin/structure/views`) oder bitten Sie die Website-Administration, sie unter **Views** in Ihrem Benutzerprofil anzuhaken. - **Die Auflistungsspalte bleibt leer.** Die Ansicht hat keine veröffentlichten Beiträge zu zeigen. Veröffentlichen Sie einen Beitrag unter **Content** > **Add content** > **Blog post** und laden Sie die Seite neu. - **Das Suchformular ist nicht im Tab Drupal Blocks.** Das Core-Modul **Search** stellt diesen Block bereit. Schalten Sie es unter **Extend** (`/admin/modules`) ein. - **Ihre Änderungen sind nach einem Neuladen weg.** Sie haben die Seite verlassen, bevor Sie auf **Save** in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe [Änderungen werden nicht gespeichert](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/speichern-schlaegt-fehl). ## Wie geht es weiter? - [Formulare zu Seiten hinzufügen](/de/hc/documentation/learn-dxpr-builder/tutorials/add-forms) für Anmeldeformulare - [Drupal Views](/de/hc/documentation/learn-dxpr-builder/integrations/drupal-views) zum Konfigurieren von Ansichten - [Drupal-Blöcke](/de/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) für Seitenleisten-Blöcke - [About-Seite](/de/hc/documentation/learn-dxpr-builder/tutorials/about-page) für das nächste Tutorial