Skip to content

Instagram Journey

Instagram Journey rendert eine vertikale, wischbare Story im Instagram-Stil auf deiner Seite: Titel, optionales Cover-Bild und eine Liste von Sub-Slides, die der Besucher durchtippt. Nutze es, um eine lange redaktionelle Story in kurze, visuelle Schritte zu zerlegen.

Das Modul ist Pagebuilder-only. Es gibt keinen Seitenleisten-Eintrag; du fuegst das Widget einer beliebigen Seite hinzu.

Wann nutzen

  • Kampagnen-Mikro-Story — "5 Dinge, die wir dieses Jahr geaendert haben", ein Slide pro Punkt.
  • Produkt-Walkthrough — Feature pro Slide mit Bild und Caption.
  • Mobile-first Landing — Besucher scrollen-wischen statt Textwand zu lesen.

Fuer eine laengere Scroll-Layout nutze die normalen Pagebuilder-Zeilen. Fuer einen vollflaechigen Viewport-Slider nutze gallery oder titleBanner.

1. Widget auf eine Seite setzen

Oeffne den Pagebuilder der Zielseite. Klick den Widget-Picker (Plus-Icon an einer Zeile) und waehle Instagram Journey.

Das Widget landet leer in der Zeile.

2. Cover-Slide konfigurieren

Klick das Widget, um das Eigenschaften-Panel zu oeffnen. Der Cover-Slide hat drei Felder:

FeldZweck
TitelHeadline auf dem Cover.
ImageCover-Bild aus dem Media Manager. Fuellt den Hintergrund.
TextKurze Intro-Caption unter dem Titel.

Klick Speichern.

3. Sub-Slides anlegen

Jeder Sub-Slide hat eigenen Titel und eigenes Bild. Scroll im Eigenschaften-Panel zur items-Sektion und klick Item hinzufügen.

Pro Item:

FeldZweck
TitelSlide-Titel.
ImageSlide-Hintergrund. Full-bleed auf dem Handy.

Umsortieren per Drag am Handle. Entfernen per Muell-Icon. Seite speichern, wenn fertig.

Captions kurz halten

Instagram Journey ist Mobile-first. Kurze Titel (unter 8 Wort) performen am besten. Lange Absaetze passen nicht auf einen Slide.

4. Vorschau und Publish

Die Pagebuilder-Live-Vorschau rendert die Journey inline. Auf dem Desktop als horizontaler Streifen; auf dem Handy als Fullscreen-Wisch-Stack.

Veroeffentliche die Seite ueber Veröffentlichen.

Bildgroessen

Fuer scharfe Darstellung nutze 1080 x 1920 px (9:16) pro Slide. Kleinere Bilder werden hochskaliert; groessere werden serverseitig optimiert. Vermeide eingebrannten Text — leg die Caption ueber das Widget, damit sie responsive und uebersetzbar bleibt.

Haeufige Fehler

Der Cover-Slide ist auf dem Handy leer. Das Cover-Image-Feld ist leer. Bild aus dem Media Manager waehlen und speichern.

Sub-Slides erscheinen nicht in der Vorschau. Seite nach dem Hinzufuegen speichern — die Live-Vorschau spiegelt nur gespeicherten State. Vorschau-Tab neu laden.

Wisch-Gesten funktionieren auf iOS nicht. Stell sicher, dass die Seite touch-action: none nicht per Custom CSS ueberschreibt. Das Widget bringt das richtige CSS mit; eigene Regeln auf Row oder Column brechen die Geste.

Siehe auch