Elementübersicht

Diese Seite beschreibt die Elemente, die eine neue deckle-Website mitbringt: wofür jedes gedacht ist, welche Felder es in den Reitern General und Appearance hat und einen Tipp zur Verwendung. Die Bilder zeigen, wie die Elemente auf der Beispiel-Website dieser Anleitung aussehen.

Textelemente

Text

Für Fließtext: Absätze, Überschriften, Listen, Links und Tabellen, dazwischen Schaltflächen und Symbole.

• General: Body, der Text selbst (siehe Text und Links).
• Appearance: keine Optionen.
• Tipp: Beginnen Sie jeden Text mit einer H2-Überschrift. Mehrere kürzere Textelemente lassen sich leichter umstellen als ein langes.

Hero

Eine große Überschrift auf einem Hintergrundfoto, mit Einleitung und Schaltflächen, meist ganz oben auf der Startseite.

• General: Heading (Überschrift, Pflichtfeld), Image (das Hintergrundfoto, optional) und Body mit Fett, Kursiv, Links, Listen, Überschriften und Schaltflächen.
• Tipp: Die Überschrift ist eine Abschnittsüberschrift, nicht der Seitentitel. Das Hintergrundfoto gilt als Dekoration und braucht daher keinen Alternativtext.

Call to action

Ein hervorgehobener Streifen, der Besucher zu etwas einlädt, etwa Kontakt aufzunehmen oder zu buchen.

• General: Heading (optional) und Body mit Fett, Kursiv, Links und Schaltflächen.
• Tipp: Halten Sie den Text kurz und fügen Sie mit Insert eine oder zwei Schaltflächen ein.

Quote

Ein hervorgehobenes Zitat, zum Beispiel die Aussage eines Gastes oder Partners.

• General: Body mit Fett, Kursiv und Links, und Attribution, die zitierte Person.

Accordion

Fragen und Antworten oder andere Abschnitte, die Besucher mit einem Klick aufklappen.

• General: Das Accordion selbst hat keine Felder. Fügen Sie darin pro Abschnitt ein Accordion item ein (siehe Elemente einfügen). Jeder Eintrag hat Summary (always visible), die Frage (Pflichtfeld), und Body, die Antwort. Die Antwort ist ein einfaches Textfeld ohne Werkzeugleiste; eine Leerzeile beginnt einen neuen Absatz.
• Tipp: Im Modul View öffnet ein Klick auf einen Eintrag sein Formular, statt ihn aufzuklappen.

Bilder und Medien

Text and media

Text neben einem oder mehreren Bildern.

• General: Body mit Fett, Kursiv, Links, Listen und Überschriften, und Images, eine Zeile pro Bild mit Image (Pflichtfeld), Alternative text, Title, Description und Link.
• Appearance: Media side (Bild links oder rechts: left, right), Columns (1 bis 4, für mehrere Bilder) und Open images in a lightbox (Bilder vergrößern sich beim Anklicken).
• Tipp: Beschreiben Sie jedes Bild unter Alternative text, damit Screenreader es vorlesen können. Ohne Beschreibung gilt das Bild als Dekoration. Siehe Bilder auswählen.

Images

Ein Raster aus einem oder mehreren Bildern.

• General: Images, eine Zeile pro Bild, mit denselben Feldern wie bei Text and media.
• Appearance: Columns (1 bis 4) und Open images in a lightbox. Ein Bild mit eigenem Link öffnet stattdessen diesen Link.
• Tipp: Ein ausgewähltes Bild lässt sich nicht austauschen. Entfernen Sie dafür seine Zeile und fügen Sie eine neue hinzu.

Video embed

Ein Video von YouTube oder Vimeo.

• General: Provider (Anbieter: youtube oder vimeo), Video ID (Pflichtfeld) und Title.
• Tipp: Fügen Sie die vollständige Adresse des Videos in Video ID ein: Der Editor behält nur die ID und stellt den Anbieter ein. Besucher sehen zuerst einen Platzhalter; das Video wird erst von YouTube oder Vimeo geladen, wenn sie darauf klicken. Das schützt ihre Privatsphäre. Das Formular zeigt kein Video, prüfen Sie es deshalb im Modul View.

Listen und Teaser

Cards

Ein Raster aus Karten mit je einem Bild, einer Überschrift, einem kurzen Text und einem Link, etwa um auf andere Seiten hinzuweisen.

• General: Cards, eine Zeile pro Karte (Add Card) mit Image, Heading (Pflichtfeld), Text und Link.
• Appearance: Columns, die Zahl der Karten pro Reihe (2, 3 oder 4). Auf kleinen Bildschirmen passen weniger Karten in eine Reihe.
• Tipp: Text ist ein einzelner Absatz ohne Zeilenumbrüche.

Page teasers

Listet die Unterseiten einer Seite auf, jede mit einem Link darauf.

• General: Section (Pflichtfeld), die Seite, deren Unterseiten aufgelistet werden, ausgewählt mit Choose….
• Tipp: Die Liste aktualisiert sich von selbst. Nur aktivierte Unterseiten erscheinen; deaktivierte werden nie aufgelistet, auch nicht in der Vorschau.

Latest news

Nur auf Websites mit News: die neuesten News-Beiträge, der neueste zuerst.

• General: News section (Pflichtfeld; nur News-Seiten sind wählbar), Number of items (Anzahl, 5, solange Sie nichts anderes eintragen), Categories (nur Beiträge mit mindestens einer dieser Kategorien; keine Auswahl heißt alle News) und Show “All news” link (fügt einen Link zur News-Seite an).
• Tipp: Es erscheinen nur aktivierte News-Beiträge. Siehe News verwalten.

Struktur

Spacer

Zusätzlicher Weißraum zwischen zwei Elementen.

• General: keine Felder.
• Appearance: Size (Größe: s, m, l oder xl).

Im Text

Diese beiden Elemente setzen Sie mit Insert in einen Text (siehe Text und Links); im Dialog Insert element stehen sie deshalb nicht.

Button

Ein Link, der wie eine Schaltfläche aussieht.

• Felder: Link target (Linkziel, Pflichtfeld), Label (Beschriftung, Pflichtfeld) und Variant (primary oder secondary, die beiden Schaltflächenstile Ihrer Website).

Icon

Ein kleines Symbol im Text, etwa vor einer Adresse oder den Öffnungszeiten.

• Felder: Icon name (Pflichtfeld), ausgewählt aus einer Liste wie arrow-right, mail, phone, download, calendar, location oder clock.
• Tipp: Symbole sind Dekoration, Screenreader überspringen sie. Schreiben Sie die Information deshalb immer auch als Text neben das Symbol.

Raw HTML

Seiten können ein Element namens Raw HTML (developer only) enthalten, das die Person, die Ihre Website betreut, eingefügt hat. Es lässt sich nicht über den Dialog einfügen. Überlassen Sie Änderungen daran dieser Person.