Elementübersicht - deckle Doku

Diese Seite beschreibt die Elemente, die eine neue deckle-Website mitbringt: wofür jedes gedacht ist, welche Felder es in den Reitern Allgemein und Darstellung 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.

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

Ein Element Text auf der Website: die Überschrift So erreichen Sie uns, ein Absatz, eine Adresse mit Ortssymbol und zwei Schaltflächen — Ein Element Text mit einem Symbol und zwei Schaltflächen im Text.

Bühne

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

Allgemein: Überschrift (Pflichtfeld), Bild (das Hintergrundfoto, optional) und Textinhalt 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.

Ein Element Bühne: eine große weiße Überschrift und eine kurze Einleitung über einem dunklen Bergfoto, mit zwei Schaltflächen — Eine Bühne mit zwei Schaltflächen.

Handlungsaufforderung

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

Allgemein: Überschrift (optional) und Textinhalt mit Fett, Kursiv, Links und Schaltflächen.
Tipp: Halten Sie den Text kurz und fügen Sie mit Einfügen eine oder zwei Schaltflächen ein.

Ein Element Handlungsaufforderung: ein dunkler Streifen mit der Überschrift Planen Sie Ihren Aufenthalt mit uns, einem Satz und einer Schaltfläche — Eine Handlungsaufforderung mit einer Schaltfläche.

Zitat

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

Allgemein: Textinhalt mit Fett, Kursiv und Links, und Quellenangabe, die zitierte Person.

Ein Element Zitat: ein Zitat in großer kursiver Schrift mit dem Namen der Person darunter — Ein Zitat mit Quellenangabe.

Akkordeon

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

Allgemein: Das Akkordeon selbst hat keine eigenen Felder. Sein Formular listet seine Einträge auf: Fügen Sie mit Akkordeon-Eintrag hinzufügen pro Abschnitt einen Akkordeon-Eintrag hinzu (siehe Elemente in anderen Elementen). Jeder Eintrag hat Zusammenfassung (immer sichtbar), die Frage (Pflichtfeld), und Textinhalt, die Antwort. Die Antwort ist ein einfaches Textfeld ohne Werkzeugleiste; eine Leerzeile beginnt einen neuen Absatz.
Tipp: Die Reihenfolge der Fragen ändern Sie mit den Pfeilen im Formular des Akkordeons. Soll eine Frage eine Zeit lang nicht erscheinen, deaktivieren Sie sie mit ihrem Augensymbol.

Ein Element Akkordeon mit vier zugeklappten Fragen, jede mit einem Pluszeichen zum Aufklappen — Ein Akkordeon mit vier Einträgen.

Bilder und Medien

Text und Medien

Text neben einem oder mehreren Bildern.

Allgemein: Textinhalt mit Fett, Kursiv, Links, Listen und Überschriften, und Bilder, eine Zeile pro Bild mit Bild (Pflichtfeld), Alternativtext, Titel, Beschreibung und Link.
Darstellung: Position der Medien (left oder right, also Bild links oder rechts), Spaltenanzahl (1 bis 4, für mehrere Bilder) und Bilder im Bildbetrachter öffnen (Bilder vergrößern sich beim Anklicken).
Tipp: Beschreiben Sie jedes Bild unter Alternativtext, damit Screenreader es vorlesen können. Ohne Beschreibung gilt das Bild als Dekoration. Siehe Bilder auswählen.

Ein Element Text und Medien: links eine Überschrift, ein Absatz und eine Aufzählung, rechts das Foto eines Wanderers — Text und Medien mit dem Bild rechts.

Bilder

Ein Raster aus einem oder mehreren Bildern.

Allgemein: Bilder, eine Zeile pro Bild, mit denselben Feldern wie bei Text und Medien.
Darstellung: Spaltenanzahl (1 bis 4) und Bilder im Bildbetrachter öffnen. 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.

Ein Element Bilder mit drei Landschaftsfotos nebeneinander — Ein Element Bilder mit drei Spalten.

Video

Ein Video von YouTube oder Vimeo.

Allgemein: Anbieter (youtube oder vimeo), Video-ID (Pflichtfeld) und Titel.
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 Ansicht.

Ein Element Video auf der Website: ein dunkler Platzhalter mit Abspielknopf, dem Text Video abspielen und dem Videotitel und dem Hinweis, dass beim Aktivieren Inhalte von YouTube geladen werden — Diesen Platzhalter sehen Besucher, bis sie das Video starten.

Listen und Teaser

Karten

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

Allgemein: Karten, eine Zeile pro Karte (Karte hinzufügen) mit Bild, Überschrift (Pflichtfeld), Text und Link.
Darstellung: Spaltenanzahl, 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.

Ein Element Karten mit drei Fotokarten namens Wandern, Seen und Dörfer, jede mit einem kurzen Text — Karten mit drei Spalten.

Seiten-Teaser

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

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

Ein Element Seiten-Teaser mit zwei Teasern, Gästehäuser und Camping, jeweils mit Pfeil — Seiten-Teaser für den Bereich Übernachten: Seine deaktivierte Unterseite fehlt.

Neueste Meldungen

Nur auf Websites mit Neuigkeiten: die neuesten Meldungen, die neueste zuerst.

Allgemein: Bereich mit Neuigkeiten (Pflichtfeld; nur News-Seiten sind wählbar), Anzahl der Meldungen (5, solange Sie nichts anderes eintragen), Kategorien (nur Meldungen mit mindestens einer dieser Kategorien; keine Auswahl heißt alle Meldungen) und Link „Alle Neuigkeiten“ anzeigen (fügt einen Link zur News-Seite an).
Tipp: Es erscheinen nur aktivierte Meldungen. Siehe News verwalten.

Ein Element Neueste Meldungen mit drei Meldungskarten, jede mit Foto, Titel, Datum, Kategorien und Teaser, darunter ein Link Alle Neuigkeiten — Neueste Meldungen mit drei Meldungen und dem Link Alle Neuigkeiten.

Struktur

Abstand

Zusätzlicher Weißraum zwischen zwei Elementen.

Allgemein: keine Felder.
Darstellung: Größe (s, m, l oder xl).

Im Text

Diese beiden Elemente setzen Sie mit Einfügen in einen Text (siehe Text und Links); im Dialog Element einfügen stehen sie deshalb nicht.

Schaltfläche

Ein Link, der wie eine Schaltfläche aussieht.

Felder: Linkziel (Pflichtfeld), Beschriftung (Pflichtfeld) und Variante (primary oder secondary, die beiden Schaltflächenstile Ihrer Website).

Symbol

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

Felder: Symbolname (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.

HTML-Code

Seiten können ein Element namens HTML-Code (nur für die Entwicklung) 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.