> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dc.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# dynamic content - Scrollbars erstellen

> Bilder in einer automatisch scrollenden Leiste auf Ihrer Webseite anzeigen.

In folgendem zeigen wir Ihnen, wie Sie Scrollbars erstellen. Scrollbars sind Leisten, welche mehrere Bilder anzeigen und automatisch durch diese Bilder scrollen.

Grundsätzlich werden dort mehrere Bilder gleichzeitig angezeigt. Hierbei gibt im Gegensatz zu einer Bildergalerie keine Anzeige für ein großes Bild, sondern die Bilder haben alle die gleiche Anzeige-Größe.

Außerdem haben Sie bei Scrollbars noch die Möglichkeit einen Text am Bild zu pflegen. Typischerweise werden Scrollbars dazu eingesetzt, die vorhandenen Marken in Ihrem Shop anzuzeigen.

<Note>
  Diese Anleitung gehört zu den [Inhaltsarten](/docs/de/dynamic-content/user-guide/inhaltsarten). Wie Sie generell einen Inhalt erstellen, zeigen wir Ihnen unter [Inhalte erstellen und bearbeiten](/docs/de/dynamic-content/user-guide/inhalte-erstellen).
</Note>

<Steps>
  <Step>
    ## Schritt 1: Auswählen der Inhaltsart "Scrollbars"

    Wählen Sie anfangs die Inhaltsart "Scrollbars" aus. Dadurch sollte sich ein Fenster mit der Überschrift "Neue Scrollbar" öffnen.

    <Frame>
      <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/auswahl-inhaltsart.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=77020368c986fbaf1e4de91ecbe42a3d" alt="Auswählen der Inhaltsart Scrollbars" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/auswahl-inhaltsart.png" />
    </Frame>
  </Step>

  <Step>
    ## Schritt 2: Beschreibung wählen und Speichern

    Wählen sie in dem Fenster als erstes eine Beschreibung. Diese dient nur der Übersichtlichkeit und wird nicht auf Ihrer Webseite angezeigt.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/beschreibung.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=49b87bd19bca2a2562e9125c3fae9d45" alt="Beschreibung der Scrollbar wählen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/beschreibung.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/speichern.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=e69f1179bfb1ff8ac865269f1230541b" alt="Scrollbar speichern" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/speichern.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 3: Element-Breite und -Höhe wählen

    Dies nimmt Einfluss auf die Größe, in welcher die einzelnen Bilder dann tatsächlich angezeigt werden. Deswegen sollten Sie auch hier das Format bzw. Seitenverhältnis der Originalbilder beachten.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/element-breite.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=1177b165ae7717953638f9502311efa3" alt="Element-Breite einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/element-breite.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/element-hoehe.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=e0b9ab883473cfed5e2676327f17ae29" alt="Element-Höhe einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/element-hoehe.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 4: Breite und Höhe wählen

    Wenn Sie mehrere Elemente nebeneinander angezeigt haben wollen, müssen Sie somit die Breite der Scrollbar anpassen, sodass diese mindestens so breit ist, wie die Element-Breite multipliziert mit den gleichzeitig gezeigten Elementen.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/breite.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=a2fcd02ea54ca65edd1056bbd2342aab" alt="Breite der Scrollbar einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/breite.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/hoehe.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=930c95a700e54f4d4fca79a3562747e3" alt="Höhe der Scrollbar einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/hoehe.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 5: Pfeilposition und Elementanzeige anpassen

    Als nächstes können Sie entscheiden, wo und ob Pfeile an der Scrollbar angezeigt werden sollen, durch welche der Besucher manuell auf die nächsten Bilder umschalten kann.

    <Columns cols={3}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/pfeile.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=9ddc357c155569c2ba098fae767cb1fd" alt="Pfeile an der Scrollbar anzeigen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/pfeile.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/gleichzeitig-gezeigte-elemente.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=13a257e179beec882c4711d7a20f6515" alt="Gleichzeitig gezeigte Elemente" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/gleichzeitig-gezeigte-elemente.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/elemente-pro-scroll.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=730813960bf8b52c9ab90fa0dd4a215a" alt="Elemente pro Scroll" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/elemente-pro-scroll.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 6: Anzeige- und Effekt-Dauer bestimmen

    Die Anzeigedauer legt fest, wie viele Millisekunden gewartet wird, bevor der nächste Scroll ausgelöst wird. Die Effekt-Dauer legt fest, wie lange (in Millisekunden) der Scroll-Effekt angezeigt werden soll.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/effekt-dauer.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=aaed901832d52f8a39614c9d1aea5544" alt="Effekt-Dauer einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/effekt-dauer.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/anzeigedauer.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=8468983f473a36c4ba445cf3c0bfd7be" alt="Anzeigedauer einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/anzeigedauer.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 7: Bilder pflegen

    Dazu klicken Sie unter der Überschrift "Scrollbar Bilder" auf das Plus mit dem danebenliegenden Schriftzug "Neu". Daraufhin sollte sich ein Fenster mit der Überschrift "Neues Scrollbar-Bild" öffnen, in welchem Sie das jeweilige Bild hochladen können.

    <Columns cols={3}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/neue-scrollbar-bilder.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=7f89f3f72823e1b9093f37d208f3b685" alt="Neue Scrollbar-Bilder hinzufügen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/neue-scrollbar-bilder.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/datei-auswaehlen.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=1a6b4d737479dfe63fb77fea5592b333" alt="Datei für Scrollbar auswählen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/datei-auswaehlen.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/hochgeladenes-bild.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=94490fa41811e49d045a8a7deb3ae45b" alt="Hochgeladenes Bild in der Scrollbar" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/hochgeladenes-bild.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 8: Bild-Beschreibung und -Text wählen

    Danach legen Sie eine Beschreibung für Ihr hochgeladenes Bild fest. Diese dient nur der Übersichtlichkeit und wird nicht auf Ihrer Webseite angezeigt.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/bild-beschreibung.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=c5b08da944ab1c5d166818505eff1004" alt="Bild-Beschreibung festlegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/bild-beschreibung.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/bild-text.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=229671f7181767c42a830ef0a06b6783" alt="Bild-Text pflegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/bild-text.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 9: Link hinzufügen

    Darüber hinaus haben Sie noch die Option an Ihrem Bild einen Link zu hinterlegen, auf welchen der Besucher weitergeleitet wird, sobald er auf das dazugehörige Bild in der Scrollbar klickt.

    <Columns cols={3}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/link-hinzufuegen.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=379073b08a0f2d9fd122d8d93079cc98" alt="Link am Bild hinzufügen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/link-hinzufuegen.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/speichern-und-schliessen.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=817eb24cbb295e2852f1e36be18b05e7" alt="Bild speichern und schließen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/speichern-und-schliessen.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/uebersicht-scrollbar-bilder.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=f3dd09c1aaad8121fbfa135d87379cbe" alt="Übersicht der Scrollbar-Bilder" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/uebersicht-scrollbar-bilder.png" />
        </Frame>
      </Column>
    </Columns>

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/speichern-final.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=cce7dd6060f211022c45433362ebfe98" alt="Scrollbar abschließend speichern" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/speichern-final.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/scrollbars/beispiel-scrollbar.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=7eaa8a53c60fc06fcdf161d8c3c5d196" alt="Beispiel einer fertigen Scrollbar" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/scrollbars/beispiel-scrollbar.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>
</Steps>

## Verwandte Themen

<CardGroup cols={2}>
  <Card title="Inhaltsarten" icon="shapes" href="/docs/de/dynamic-content/user-guide/inhaltsarten">
    Übersicht aller verfügbaren Module.
  </Card>

  <Card title="Inhalte erstellen und bearbeiten" icon="pen-to-square" href="/docs/de/dynamic-content/user-guide/inhalte-erstellen">
    Inhalte auf Seiten anlegen.
  </Card>

  <Card title="Slideshows" icon="images" href="/docs/de/dynamic-content/user-guide/inhaltsarten/slideshows">
    Bilder als Slideshow auf Ihrer Seite präsentieren.
  </Card>

  <Card title="Bildergalerien" icon="image" href="/docs/de/dynamic-content/user-guide/inhaltsarten/bildergalerien">
    Mehrere Bilder als Galerie mit Vorschau anzeigen.
  </Card>
</CardGroup>
