---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/bildergalerie'
title: 'Eine Bildergalerie erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:46:15+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Fotogalerie: eine zentrierte Überschrift, drei Fotos nebeneinander mit Alternativtext und eine Slideshow auf einem grauen Band. Nutzen Sie sie, um einen Ort oder ein Ereignis in Bildern zu zeigen. Um Projekte mit je einer Beschreibung zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.
  Das Video baut eine Galerie mit Gemälden Studierender für eine Universität.
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: 'Eine Bildergalerie erstellen'
      description: |-
        Hier bauen Sie eine Fotogalerie: eine zentrierte Überschrift, drei Fotos nebeneinander mit Alternativtext und eine Slideshow auf einem grauen Band. Nutzen Sie sie, um einen Ort oder ein Ereignis in Bildern zu zeigen. Um Projekte mit je einer Beschreibung zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.
        Das Video baut eine Galerie mit Gemälden Studierender für eine Universität.
      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:15+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/bildergalerie'
      articleSection: 'Tutorial folgen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/bildergalerie'
      description: |-
        Hier bauen Sie eine Fotogalerie: eine zentrierte Überschrift, drei Fotos nebeneinander mit Alternativtext und eine Slideshow auf einem grauen Band. Nutzen Sie sie, um einen Ort oder ein Ereignis in Bildern zu zeigen. Um Projekte mit je einer Beschreibung zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.
        Das Video baut eine Galerie mit Gemälden Studierender für eine Universität.
      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 Bildergalerie erstellen.

 DXPR Builder lernenSeiten erstellenTutorial folgen

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Ein Bild hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/bild)
- [Ein Bilderkarussell hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/bilderkarussell)
- [Eine Portfoliogalerie erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/portfoliogalerie)

Hier bauen Sie eine Fotogalerie: eine zentrierte Überschrift, drei Fotos nebeneinander mit Alternativtext und eine Slideshow auf einem grauen Band. Nutzen Sie sie, um einen Ort oder ein Ereignis in Bildern zu zeigen. Um Projekte mit je einer Beschreibung zu zeigen, folgen Sie stattdessen [Eine Portfoliogalerie erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery).

Das Video baut eine Galerie mit Gemälden Studierender für eine Universität.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Medienbibliothek enthält mindestens sechs Fotos, 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**.

## 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 „Galerie studentischer Kunst“ 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 Fotoraster hinzufügen

1. Fahren Sie über den Abschnitt und klicken Sie auf **Add Section Below**. Klicken Sie auf **+** auf dem neuen Abschnitt und wählen Sie **Row**; sie kommt mit zwei gleichen Spalten.
2. Klicken Sie auf das Grid-Icon der Zeile (**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 **Image**.
4. Klicken Sie auf **Select Image**, durchsuchen Sie die Medienbibliothek mit **Apply filters**, klicken Sie auf ein Foto und klicken Sie auf **Insert selected**.
5. Öffnen Sie das Panel **SEO** und geben Sie das **Alt attribute** ein: was jemand wissen sollte, der das Foto nicht sehen kann. Klicken Sie auf **Save**.
6. Wiederholen Sie das für die zweite und dritte Spalte.

Fotos, die auf dieselben Proportionen zugeschnitten sind, halten die Zeile gerade.

## Schritt 3: Die Slideshow 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** und ein hellgraues **Background** im Panel **Style**. Klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Image carousel**.
3. Klicken Sie auf **Select Image**, durchsuchen Sie die Bibliothek, klicken Sie auf drei Fotos und klicken Sie auf **Insert selected**, und klicken Sie dann auf **Save**.
4. Klicken Sie erneut auf **+** auf dem Abschnitt und wählen Sie **Text**; er landet über dem Karussell. Geben Sie „Slideshow“ als **Heading 2** ein 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:

- **Bildunterschriften**: Setzen Sie eine **Card** in die Spalte und fügen Sie ein **Text**-Element mit der Bildunterschrift darin hinzu. Fügen Sie dann das **Image** in der Card hinzu; es landet über der Bildunterschrift.
- **Fotos in voller Größe**: Setzen Sie **Image link** auf die Datei in voller Größe und **Image link target** auf **New window**.
- **Stil**: Setzen Sie auf jedem Bild **Border radius** auf 4 und **Drop shadow** auf 1 im Panel **Style** für ein sanftes Anheben.
- **Slideshow-Timing**: Setzen Sie **Interval** auf dem Karussell, in Millisekunden. Haken Sie unter **Hide** **Hide pagination control** oder **Hide prev/next buttons** an, um diese Steuerelemente zu entfernen.
- **Galerie, die sich selbst füllt**: Erstellen Sie unter **Structure** > **Views** > **Add view** eine Ansicht von Bildmedien mit einer Blockanzeige im Format **Grid**. Fügen Sie sie aus dem Tab **Drupal Views** ein, und neue Uploads erscheinen von selbst.

## Was Sie sehen

Die zentrierte Überschrift eröffnet die Seite, gefolgt von drei Fotos nebeneinander. Auf dem grauen Band darunter zeigt die Slideshow jeweils ein Foto und wechselt alle fünf Sekunden zum nächsten.

## Wenn Sie die Fotos nicht wie gezeigt sehen

- **Insert selected fügt kein Foto hinzu.** Die Bibliothek lud nach **Apply filters** noch neu, sodass Ihr Klick das Foto nicht angehakt hat. Warten Sie, bis das Raster stabil ist, prüfen Sie, dass das Foto ein Häkchen zeigt, und klicken Sie erneut auf **Insert selected**.
- **Die Medienbibliothek ist leer.** Es sind noch keine Bilder hochgeladen, oder der Medienbrowser ist nicht eingerichtet. Siehe [Bilder werden nicht hochgeladen oder verschwinden](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/bilder-und-medien).
- **Die Fotos 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.
- **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?

- [Image-Element](/de/hc/documentation/learn-dxpr-builder/elements/image) für jede Bildeinstellung
- [Image carousel](/de/hc/documentation/learn-dxpr-builder/elements/image-carousel) für Slideshow-Optionen
- [Portfolio](/de/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) für ein Projektraster mit Filter