---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos"
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)
- [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)
# Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion
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.
## Bevor du startest
- Tarif
- Laioutr-UI-Lizenz für das Projekt (Plattform-Variante)
- Rolle
- Editor oder Admin im Projekt
- Dauer
- 8 Min.
### Voraussetzungen
- Projekt mit eingerichteter Seite in Studio
- Bilder und Logos in der Mediathek
Zuletzt geprüft am 15. Oktober 2026
Laioutr UI liefert fertige Inhalts-Sections, die Redaktion und Marketing in Studio auf beliebigen Seiten platzieren und mit eigenen Texten, Bildern und Links füllen. Alle Sections übernehmen das aktive Theme, passen sich an Mobil und Desktop an und halten Text über einen automatisch erkannten Oberflächenton auf hellen, dunklen und farbigen Hintergründen lesbar.
### Die wichtigsten Inhalts-Sections
- **Hero Slider**: Bühne am Seitenanfang, mit einem Slide statisch, mit mehreren als Slider. Je Slide eigene Bilder für Mobil und Desktop und bis zu zwei Buttons.
- **Banner Basic**, **Banner Integrated**, **Banner Showcase**: Call-to-Action-Banner vom großen Bildbanner bis zum kompakten Hinweis im Inhalt.
- **Content Grid** und **Editorial Grid**: Karten im Raster, im Editorial Grid mit hervorgehobener erster Reihe.
- **Persona Quote** und **Quote Card**: Testimonials, einzeln oder als Slider.
- **USP Banner**: schmale Leiste mit Vorteilen wie Versand, Retouren oder Service.
- **Logo Slider** und **Logo Grid**: Partner-, Marken- oder Zertifikatslogos.
- **Content Slider** und **Media Gallery**: wechselnde Inhalte im Slider und Bilder in einer Lightbox mit Zoom.
- **Promotion Banner**: Kampagnenband mit Countdown, kopierbarem Rabattcode und Button.
## Schritt für Schritt
1. 1 ### Schritt 1: Section einfügen
In Studio die Seite öffnen und im Ebenenbaum links an der gewünschten Stelle eine Section hinzufügen. Aus der Auswahl die passende Inhalts-Section wählen, zum Beispiel **Hero Slider** oder **USP Banner**.
2. 2 ### Schritt 2: Inhalte pflegen
Im Eigenschaften-Panel rechts Überschrift, Text, Bilder und Links eintragen. Für Hero und Bildbanner immer ein eigenes Mobilbild hinterlegen und für jedes Bild und jedes Logo einen Alternativtext pflegen.
3. 3 ### Schritt 3: Darstellung festlegen
Größe, Ausrichtung, Hintergrund und Overlay einstellen. Ein Verlauf oder eine Farbfläche mit passender Deckkraft hält Überschriften auf hellen Fotos lesbar.
4. 4 ### Schritt 4: In allen Gerätemodi prüfen
In der Vorschau zwischen Mobil und Desktop wechseln. Dabei prüfen, ob Texte umbrechen, Bildausschnitte passen und Slider ihre Navigation zeigen.
5. 5 ### Schritt 5: Speichern und veröffentlichen
Mit **Save** den Entwurf sichern und mit **Publish** veröffentlichen, wenn alles passt.
## Häufige Fragen
Wann passt Persona Quote, wann Quote Card?
Persona Quote ist um ein großes Profilbild herum gestaltet und eignet sich nur, wenn für jedes Zitat ein Foto vorliegt. Ohne Fotos ist die Quote Card die bessere Wahl. Die Karte zeigt optional eine Sternebewertung, Avatar und Firmenlogo und lässt sich links oder zentriert ausrichten.
Logo Slider oder Logo Grid?
Für eine kurze, feste Liste passt das statische Logo Grid. Bei vielen Logos spart der Logo Slider Platz und bietet Navigation. Beide nutzen dieselbe Struktur je Logo mit Titel, Bild und optionalem Link.
Wofür ist der Promotion Banner gedacht?
Für Kampagnen mit Frist oder Code, etwa einen Sale oder ein Versandangebot. Countdown, Rabattcode und Button sind einzeln zuschaltbar, der Code wird per Klick kopiert und mit einer Bestätigung quittiert. Für Markengeschichten passen Banner Basic oder Media + Text besser, für dauerhafte Hinweise der USP Banner.
Wie viele USPs gehören in den USP Banner?
Bewährt haben sich drei. Der Banner zeigt auf Mobilgeräten einen, auf mittleren Bildschirmen zwei und auf großen drei Einträge gleichzeitig und blendet Pfeile ein, sobald mehr Einträge vorhanden sind.
## Passend dazu
- [Sections und Blocks einsetzen](https://academy.laioutr.com/artikel/sections-und-blocks-einsetzen)7 Min.
Sections sind die großen Bereiche einer Seite in Header, Body oder Footer, Blocks sind Inhaltseinheiten in den Slots einer Section. Beide werden im Layers-Baum hinzugefügt und angeordnet und in den Properties bearbeitet.
- [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen)10 Min.
Eine Landingpage entsteht in Studio als Seite vom Typ Landing Page mit eigenem Pfad und wird aus installierten Sections zusammengesetzt: Hero, Inhalte, Produktslider mit Shopdaten, Header und Footer als globale Sections.
- [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.
- [Bild und Video, Popups, Hinweise und Navigation in der Seite](https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation)7 Min.
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.
- [Globale Sections für Header, Footer und wiederkehrende Inhalte](https://academy.laioutr.com/artikel/globale-sections-fuer-header-footer-und-mehr)5 Min.
Eine globale Section wird einmal angelegt und auf beliebig vielen Seiten referenziert. Wer ihre Inhalte ändert, ändert sie auf allen Seiten, die sie nutzen, typisch für Header, Footer oder eine USP-Leiste.
## In einer Lektion lernen
- [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/lektionen/frontend-manager-landingpage-bauen)12 Min.
- [Seitentyp-Rezepte anwenden](https://academy.laioutr.com/lektionen/ux-designer-seitentyp-rezepte)12 Min.
## [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/inhalts-sections-hero-banner-grids-zitate-logos#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#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": "Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion",
"item": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Wann passt Persona Quote, wann Quote Card?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Persona Quote ist um ein großes Profilbild herum gestaltet und eignet sich nur, wenn für jedes Zitat ein Foto vorliegt. Ohne Fotos ist die Quote Card die bessere Wahl. Die Karte zeigt optional eine Sternebewertung, Avatar und Firmenlogo und lässt sich links oder zentriert ausrichten.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Logo Slider oder Logo Grid?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Für eine kurze, feste Liste passt das statische Logo Grid. Bei vielen Logos spart der Logo Slider Platz und bietet Navigation. Beide nutzen dieselbe Struktur je Logo mit Titel, Bild und optionalem Link.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Wofür ist der Promotion Banner gedacht?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Für Kampagnen mit Frist oder Code, etwa einen Sale oder ein Versandangebot. Countdown, Rabattcode und Button sind einzeln zuschaltbar, der Code wird per Klick kopiert und mit einer Bestätigung quittiert. Für Markengeschichten passen Banner Basic oder Media + Text besser, für dauerhafte Hinweise der USP Banner.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos#/schema/question/4",
"@type": "Question",
"inLanguage": "de",
"name": "Wie viele USPs gehören in den USP Banner?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Bewährt haben sich drei. Der Banner zeigt auf Mobilgeräten einen, auf mittleren Bildschirmen zwei und auf großen drei Einträge gleichzeitig und blendet Pfeile ein, sobald mehr Einträge vorhanden sind.
"
}
}
]
}
```