---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation"
locale: de
meta:
  "og:title": "Academy Article"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)

- [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)

- [Bild und Video, Popups, Hinweise und Navigation in der Seite](https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation)

# Bild und Video, Popups, Hinweise und Navigation in der Seite

Media + Text und Media Preview zeigen Bilder und Videos, PopUp-Vorlagen bringen Info, Newsletter und Angebote ins Bild, Toasts und Alert-Dialoge geben automatisch Rückmeldung. Category Card Grid und Slider führen innerhalb der Seite in die Sortimente.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Laioutr-UI-Lizenz für das Projekt (Plattform-Variante)</dd>

<dt>Rolle</dt>
<dd>Editor oder Admin im Projekt</dd>

<dt>Dauer</dt>
<dd>7 Min.</dd></dl>

### Voraussetzungen

- Bilder und Videos in der Mediathek
- Kategorien aus dem angebundenen Shop-System für Kategoriekacheln

Zuletzt geprüft am 15. Oktober 2026

Neben Bannern und Grids enthält Laioutr UI Bausteine für Medien, Popups, Systemhinweise und die Navigation innerhalb einer Seite. Redaktionen setzen sie in Studio ein, die Hinweise erscheinen dagegen automatisch.

### Bild und Video

**Media + Text** stellt ein großes Bild oder Video neben Text, im Verhältnis 50/50, 60/40 oder 70/30, mit dem Medium links oder rechts. **Media Preview** zeigt ein einzelnes Bild mit eigenen Seitenverhältnissen für Mobil und Desktop und optional einer Lightbox mit Zoom. Videos laufen in einem integrierten Player.

### Popups

Das **PopUp** gibt es als Vorlage für Info, Newsletter und Promotion. Bild, Ausrichtung und das Schließen per Escape-Taste oder Klick auf den Hintergrund sind einstellbar.

### Hinweise

**Toasts** melden Erfolg, Warnung oder Fehler, ohne den Einkauf zu unterbrechen, etwa nach dem Kopieren eines Rabattcodes. Ein **Alert Dialog** fragt vor kritischen Aktionen nach einer Bestätigung.

### Navigation innerhalb der Seite

**Category Card Grid** und **Category Card Slider** führen mit Kategoriekacheln direkt in Sortimente, bevorzugt im ersten sichtbaren Bereich.

## Schritt für Schritt

1. 1 ### Schritt 1: Media + Text einsetzen

   In Studio eine Section **Media + Text** hinzufügen, Bild oder Video wählen und Überschrift, Text und Button pflegen. Verhältnis und Position des Mediums so wählen, dass sich die Ausrichtung auf der Seite abwechselt.
2. 2 ### Schritt 2: Bilder für jedes Gerät zuschneiden

   Für Mobil und Desktop eigene Seitenverhältnisse festlegen und einen Alternativtext pflegen. Die Lightbox nur einschalten, wenn Details im Bild wichtig sind.
3. 3 ### Schritt 3: Popup-Vorlage wählen

   Die passende Vorlage wählen: Info für Hinweise, Newsletter für Anmeldungen, Promotion für ein Angebot mit Code. Text kurz halten und das Schließen per Klick auf den Hintergrund erlaubt lassen.
4. 4 ### Schritt 4: Kategoriekacheln platzieren

   Ein **Category Card Grid** oder einen **Category Card Slider** unter den Hero setzen und die Kachelvariante wählen: basic, compact, compact-bordered oder big.
5. 5 ### Schritt 5: Prüfen und veröffentlichen

   In der Vorschau Mobil und Desktop vergleichen, Popups einmal öffnen und schließen. Mit **Save** den Entwurf sichern und mit **Publish** veröffentlichen, wenn alles passt.

## Häufige Fragen

Lassen sich Toasts in Studio platzieren?

Nein. Toasts und Alert-Dialoge sind Systemhinweise, die die Storefront bei bestimmten Aktionen auslöst. Farben und Darstellung folgen dem Theme, die Hinweise sind für Screenreader ausgezeichnet und lassen sich per Tastatur schließen.

Wann passt Media + Text, wann ein Banner?

Media + Text eignet sich, wenn das Bild die Geschichte trägt, etwa auf Marken- und Ratgeberseiten. Steht der Aufruf zum Handeln im Vordergrund, sind Banner Basic oder Banner Showcase die bessere Wahl.

Welche Kachelvariante passt wohin?

big eignet sich für bildstarke Einstiegsseiten, basic für allgemeine Raster, compact und compact-bordered für Seiten mit vielen Kategorien oder wenig Platz, etwa über einer Produktliste.

## Passend dazu

- [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.

  Laioutr UI bringt fertige Inhalts-Sections wie Hero Slider, CTA-Banner, Card Grids, Testimonials, USP Banner, Logo Slider, Galerie und Promotion Banner mit. Redaktionen platzieren sie in Studio, füllen sie mit eigenen Inhalten und passen Größe, Ausrichtung und Hintergrund an.
- [Medien in Cockpit und Studio verwalten](https://academy.laioutr.com/artikel/medien-in-cockpit-und-studio-verwalten)5 Min.

  Bilder, Videos und Audiodateien werden zentral in der Media Library unter Content in Cockpit verwaltet. In Studio wählt der Medienwähler Dateien aus allen verbundenen Bibliotheken, etwa aus dem Shop-System, und lädt neue hoch, wo die Bibliothek es erlaubt.
- [Produktkacheln und Produktslider einsetzen](https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen)5 Min.

  Produktkacheln zeigen ein Produkt mit Bild, Marke, Titel, Preis, Labels, Farbvarianten und optionalem Warenkorb-Button; der Product Slider reiht solche Kacheln horizontal auf, zum Beispiel für Neuheiten oder passende Produkte. Welche Produkte erscheinen, kommt aus einer Abfrage an die angebundene Commerce-App.
- [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa)6 Min.

  Die Komponenten von Laioutr UI sind auf WCAG 2.1 AA ausgelegt: Kontraste, Tastaturbedienung, Fokuszustände und semantische Struktur sind eingebaut. Für eine barrierefreie Storefront sorgen zusätzlich die Inhalte, etwa Alternativtexte, Überschriftenfolge und verständliche Linktexte.
- [Tracking und Consent in den Komponenten](https://academy.laioutr.com/artikel/tracking-und-consent-in-den-komponenten)6 Min.

  Die Komponenten von Laioutr senden Ereignisse wie Seitenaufruf, Produktansicht, In-den-Warenkorb und Kauf über eine einheitliche Analytics-Schicht. Jedes Ereignis erreicht nur die Ziele, für die der Besucher seine Einwilligung gegeben hat.

## [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)

In diesem Leitfaden suchen

1. [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
2. [Bild und Video, Popups, Hinweise und Navigation in der Seite](https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation)7 Min.
3. [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.
4. [Blog mit Übersicht und Artikelseiten aufbauen](https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen)8 Min.
5. [Standortsuche und Filialseiten einrichten](https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten)8 Min.
6. [Preisseite mit Plan Cards und Vergleichstabelle bauen](https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle)9 Min.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Storefront-Funktionen",
          "item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Inhalt und Navigation",
          "item": "https://academy.laioutr.com/leitfaeden/inhalt-und-navigation",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Bild und Video, Popups, Hinweise und Navigation in der Seite",
          "item": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Lassen sich Toasts in Studio platzieren?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Nein. Toasts und Alert-Dialoge sind Systemhinweise, die die Storefront bei bestimmten Aktionen auslöst. Farben und Darstellung folgen dem Theme, die Hinweise sind für Screenreader ausgezeichnet und lassen sich per Tastatur schließen.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wann passt Media + Text, wann ein Banner?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Media + Text eignet sich, wenn das Bild die Geschichte trägt, etwa auf Marken- und Ratgeberseiten. Steht der Aufruf zum Handeln im Vordergrund, sind Banner Basic oder Banner Showcase die bessere Wahl.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Welche Kachelvariante passt wohin?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>big eignet sich für bildstarke Einstiegsseiten, basic für allgemeine Raster, compact und compact-bordered für Seiten mit vielen Kategorien oder wenig Platz, etwa über einer Produktliste.</p>"
      }
    }
  ]
}
```