---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/portfoliogalerie'
title: 'Eine Portfoliogalerie erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:46:22+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Portfolioseite: eine zentrierte Überschrift, drei Projekte nebeneinander mit je einem Titelbild und einem einzeiligen Ergebnis und eine Aufforderung. Nutzen Sie sie, um Ihre Arbeit auf einen Blick zu zeigen und jedes Projekt mit seiner Geschichte zu verlinken. Um ein Projekt im Detail zu beschreiben, folgen Sie Eine Fallstudie schreiben.
  Das Video baut eine Agenturseite namens „Unsere Arbeit“.
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-24T20:03:43+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Eine Portfoliogalerie erstellen'
      description: |-
        Hier bauen Sie eine Portfolioseite: eine zentrierte Überschrift, drei Projekte nebeneinander mit je einem Titelbild und einem einzeiligen Ergebnis und eine Aufforderung. Nutzen Sie sie, um Ihre Arbeit auf einen Blick zu zeigen und jedes Projekt mit seiner Geschichte zu verlinken. Um ein Projekt im Detail zu beschreiben, folgen Sie Eine Fallstudie schreiben.
        Das Video baut eine Agenturseite namens „Unsere Arbeit“.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:46:22+0000'
      dateModified: '2026-10-24T20:03:43+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/portfoliogalerie'
      articleSection: 'Tutorial folgen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/portfoliogalerie'
      description: |-
        Hier bauen Sie eine Portfolioseite: eine zentrierte Überschrift, drei Projekte nebeneinander mit je einem Titelbild und einem einzeiligen Ergebnis und eine Aufforderung. Nutzen Sie sie, um Ihre Arbeit auf einen Blick zu zeigen und jedes Projekt mit seiner Geschichte zu verlinken. Um ein Projekt im Detail zu beschreiben, folgen Sie Eine Fallstudie schreiben.
        Das Video baut eine Agenturseite namens „Unsere Arbeit“.
      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) # Eine Portfoliogalerie erstellen.

 DXPR Builder lernenSeiten erstellenTutorial folgen

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Eine Drupal-Ansicht auf Ihrer Seite anzeigen](/de/hc/dokumentation/dxpr-builder-lernen/integrationen/drupal-ansichten)
- [Eine Fallstudie schreiben](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/fallstudie)
- [Ein Bild hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/bild)

Hier bauen Sie eine Portfolioseite: eine zentrierte Überschrift, drei Projekte nebeneinander mit je einem Titelbild und einem einzeiligen Ergebnis und eine Aufforderung. Nutzen Sie sie, um Ihre Arbeit auf einen Blick zu zeigen und jedes Projekt mit seiner Geschichte zu verlinken. Um ein Projekt im Detail zu beschreiben, folgen Sie [Eine Fallstudie schreiben](/de/hc/documentation/learn-dxpr-builder/tutorials/case-study).

Das Video baut eine Agenturseite namens „Unsere Arbeit“.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Medienbibliothek enthält für jedes Projekt ein Titelbild, auf dieselben Proportionen zugeschnitten.
- 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, sodass jedes Titelbild nach seinem Text hineinkommt.

## Schritt 1: Den Header hinzufügen

1. Klicken Sie auf der leeren Seite auf **Add Elements** und wählen Sie **Section** aus dem Tab **Layout**.
2. Fahren Sie über den Abschnitt und öffnen Sie **More** > **Settings**. Wählen Sie unter **HTML classes** **Align text center** und klicken Sie dann auf **Save**.
3. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Text** aus dem Tab **Content**.
4. Geben Sie „Unsere Arbeit“ als **Heading 2** ein, fügen Sie eine Einleitungszeile hinzu und klicken Sie auf **Save**. Das Theme gibt den Seitentitel als Heading 1 der Seite aus. Um stattdessen diese Überschrift zur Heading 1 zu machen, siehe [SEO-freundliche Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Schritt 2: Das Projektraster hinzufügen

1. Fahren Sie über den Abschnitt und klicken Sie auf **Add Section Below**. Öffnen Sie das **More** > **Settings** des neuen Abschnitts, wählen Sie ein hellgraues **Background** im Panel **Style** und klicken Sie auf **Save**.
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 **1/3 + 1/3 + 1/3** und klicken Sie auf **Save**.
3. Klicken Sie in der ersten Spalte auf **+** und wählen Sie **Text**. Geben Sie den Projektnamen als **Heading 3** ein, fügen Sie das einzeilige Ergebnis hinzu und klicken Sie auf **Save**.
4. Klicken Sie in derselben Spalte auf **+** und wählen Sie **Image**; es landet über dem Text. Klicken Sie auf **Select Image**, haken Sie das Titelbild an und klicken Sie auf **Insert selected**. Geben Sie das **Alt attribute** im Panel **SEO** ein und klicken Sie auf **Save**.
5. Wiederholen Sie das für die zweite und dritte Spalte.

## Schritt 3: Die Aufforderung hinzufügen

1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu und öffnen Sie sein **More** > **Settings**. Wählen Sie **Align text center** unter **HTML classes**, dann das violette **Background** und Weiß als **Font color** im Panel **Style**. Klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Button**. Setzen Sie **Title** auf „Kontakt aufnehmen“, **Link** auf `/contact`, **Type** auf **Light** und **Size** auf **Large**, und klicken Sie dann auf **Save**.
3. Klicken Sie erneut auf **+** und wählen Sie **Text**; er landet über dem Button. Geben Sie „Arbeiten wir zusammen“ als **Heading 2** ein und fügen Sie eine Zeile hinzu. 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:

- **Jedes Projekt verlinken**: Setzen Sie den **Image link** auf dem Titelbild auf die Fallstudienseite.
- **Anheben bei Hover**: Setzen Sie im Panel **Style** jedes Bildes **Border radius** auf 4 und **Drop shadow** auf 1. Erhöhen Sie in **Hover style** **Drop shadow** auf 3.
- **Weitere Projekte**: Fügen Sie unter der ersten eine weitere **Row** mit demselben Preset hinzu.

## Das Raster filterbar machen

Das statische Raster passt für eine Handvoll Projekte. Damit Besucher nach Typ filtern können, speichern Sie jedes Projekt als Inhalt und zeigen Sie sie mit einer Ansicht mit offengelegtem Filter. Views ist Teil von Drupal Core.

### 1. Den Inhaltstyp Portfolio erstellen

1. Gehen Sie zu **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. Nennen Sie ihn „Portfolio“ und speichern Sie.
3. Fügen Sie auf dem Tab **Manage fields** ein **Image**-Feld mit der Beschriftung „Cover image“ hinzu.
4. Fügen Sie ein **List (text)**-Feld mit der Beschriftung „Project type“ hinzu, mit Werten wie `web|Web`, `branding|Branding` und `campaign|Campaign`.
5. Erstellen Sie einige Portfolio-Einträge unter **Content** > **Add content** > **Portfolio**.

### 2. Die Ansicht bauen

1. Gehen Sie zu **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. Nennen Sie sie „Portfolio grid“; zeigen Sie unter **View settings** **Content** vom Typ **Portfolio**.
3. Haken Sie **Create a block** an, setzen Sie das Anzeigeformat auf **Grid** aus **fields** und speichern Sie.
4. Fügen Sie im Ansichtseditor die Felder **Cover image** und **Title** hinzu und setzen Sie das Raster in seinen Formateinstellungen auf 3 Spalten.
5. Klicken Sie unter **Filter criteria** auf **Add**, wählen Sie **Project type** und haken Sie **Expose this filter to visitors** an. Beschriften Sie ihn mit „Nach Typ filtern“.
6. Setzen Sie unter **Advanced** **Use AJAX** auf Yes. Offengelegte Filter auf einer Builder-Seite funktionieren nur über AJAX.
7. Speichern Sie die Ansicht.

### 3. Die Ansicht in die Seite einfügen

1. Leeren Sie zurück in DXPR Builder die drei statischen Spalten oder fügen Sie eine neue **Row** hinzu.
2. Klicken Sie auf **+**, öffnen Sie den Tab **Drupal Views** und wählen Sie **View: Portfolio grid (Block)**.
3. Haken Sie im Einstellungsdialog **Show exposed filters** an und klicken Sie auf **Save**. Das Raster rendert mit dem Dropdown „Nach Typ filtern“ darüber, und neue Portfolio-Einträge erscheinen von selbst.
4. Klicken Sie in der Builder-Symbolleiste auf **Save**.

## Was Sie sehen

Die zentrierte Überschrift „Unsere Arbeit“ eröffnet die Seite. Auf dem grauen Band darunter stehen drei Projekte nebeneinander, jedes ein Titelbild über seinem Namen und Ergebnis. Ein violettes Band schließt die Seite mit **Kontakt aufnehmen**.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **Ein Titelbild sitzt unter seinem Text.** Das Bild kam vor dem Text hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie das Bild am Zieh-Anfasser in seiner Kontrollleiste über den Text.
- **Die Titelbilder haben unterschiedliche Höhen.** Ihre Proportionen unterscheiden sich. Schneiden Sie sie auf dieselben Proportionen zu, laden Sie sie erneut hoch und wählen Sie die neuen Kopien.
- **Portfolio grid ist nicht im Tab Drupal Views.** Die Ansicht ist deaktiviert, oder Ihr Builder-Benutzerprofil blendet sie aus. Aktivieren Sie sie unter **Structure** > **Views** oder bitten Sie die Website-Administration, sie unter **Views** in Ihrem Benutzerprofil anzuhaken.
- **Der Editor zeigt „Turn on Ajax on this view to use exposed filters.“** Die Ansicht nutzt kein AJAX. Setzen Sie **Use AJAX** auf Yes unter **Advanced** im Ansichtseditor; siehe [Ein Element sieht falsch aus oder verhält sich falsch](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/elemente-werden-falsch-angezeigt).
- **Das Dropdown „Nach Typ filtern“ fehlt.** **Show exposed filters** ist auf dem Element aus. Öffnen Sie die Einstellungen des Ansichtselements, haken Sie es an und klicken Sie auf **Save**.

## Wie geht es weiter?

- [Drupal Views](/de/hc/documentation/learn-dxpr-builder/integrations/drupal-views) dazu, wie Ansichtsanzeigen in den Element-Picker kommen
- [Fallstudie](/de/hc/documentation/learn-dxpr-builder/tutorials/case-study) für die Seite, die jedes Projekt verlinkt
- [Image-Element](/de/hc/documentation/learn-dxpr-builder/elements/image) für jede Bildeinstellung