Leaf Theme Demo
Anwenderleitfäden

Anwenderleitfäden

Mit diesen einfachen Schritt-für-Schritt-Anleitungen können Sie sich bei der eigenhändigen Installation Ihres Themes fühlen wie ein Web-Programmierer. Schwierigkeiten? Wir stehen Ihnen gerne zur Seite!

Technische Anleitungen

Installation von Themes
Um den höchstmöglichen Komfort für unsere Kunden zu gewährleisten, bieten wir einen kostenlosen Installationsservice an.

Auf Wunsch können Sie Ihr benutzerdefiniertes Zendesk Help Center-Theme auch eigenständig installieren. Die Installation kann relativ einfach durchgeführt werden. Bitte gehen Sie hierzu anhand der folgenden Anweisungen vor.

Schritt 1. Klicken Sie auf das Symbol für die Option „Design anpassen“ in der Seitenleiste.

Schritt 2. Entpacken Sie das heruntergeladene ZIP-Archiv.
Hinweis

Sie müssen dieses Archiv entpacken. Es beinhaltet zwei Dateien:
- ein Archiv mit dem Theme, das Sie in das Theming Center importieren müssen.
- eine Datei namens „Readme.txt“ mit der Beschreibung des Themes und Werten für die verschiedenen Farbvarianten.
Schritt 3. Klicken Sie auf die Schaltfläche „Importieren“ auf der rechten Seite.

Schritt 4. Laden Sie das Theme-ZIP-Archiv hoch.

Schritt 5. Klicken Sie im Theme, das Sie sich gerne in der Vorschau ansehen möchten, auf „Theme anzeigen“.

Schritt 6. Klicken Sie auf den „Help Center“-Link in der oberen Leiste , um das neue Theme mit Ihren realen Inhalten in einem Vorschaumodus zu testen.

Die Besucher Ihres Help Centers sehen das zuvor installierte Theme, da das neue noch nicht veröffentlicht ist.
- In einer Vorschau können Sie sehen, wie die verschiedenen Seiten aussehen, wenn Sie rechts oben im Drop-down-Menü „Vorlagen“ die entsprechende Seite auswählen.
- Sie können das Theme auch als Endbenutzer, als anonymer Besucher oder als Agent testen, indem Sie in der oberen Leiste auf die Schaltfläche „Vorschau“ klicken und die entsprechende Rolle auswählen.
Schritt 7. Veröffentlichen Sie das Theme
- Wenn Sie bereit sind, die Änderungen zu implementieren, können Sie die Vorschau schließen und in den Guide-Administrationsbereich zurückkehren.
- Klicken Sie auf das Symbol für die Option „Design anpassen“ in der Seitenleiste.
- Klicken Sie im Theme-Bild auf das Einstellungssymbol und wählen Sie die Option „Als Live-Theme festlegen“. Bestätigen Sie diese Aktion.
Hinweis

Möglicherweise wird Ihnen die Schaltfläche „Anfrage senden“ nicht angezeigt, da Sie als Manager angemeldet sind. Sie können sich das Theme als Endbenutzer oder als anonymer Besucher anzeigen lassen, wenn Sie Sie rechts oben im Drop-down-Menü („Vorschaurolle“) die entsprechende Option wählen.

Anforderungen an Bilder und Ikons

Die meisten unserer Zendesk Themen bieten die Möglichkeit, benutzerdefinierte Ikons und Hintergrundbilder für den Suchbereich zu verwenden. Unten finden Sie unsere Empfehlungen zu ihren Größen und Formaten.

Allgemeine Empfehlungen

Logo

Keine spezifischen Anforderungen an Größen.

Transparenter Hintergrund und SVG-Format werden bevorzugt.

Benutzerdefinierte Blockikons oder alle andere Ikons

100x100px

Wir empfehlen SVG-Ikons zu verwenden, da sie auf allen Geräten schön aussehen.

Empfehlungen für Bilder in spezifischen Themen

Lotus One Mink Flatrock Oyster Iowa Branch Leaf	Hintergrundbild des Suchbereiches (hero unit) Mindestens 1600x1100px Wir empfehlen, ein farbiges Foto im JPEG-Format zu verwenden.
Braden	Hintergrundmuster des Suchbereiches (hero unit) Keine spezifischen Anforderungen. Wir empfehlen, das SVG-Format zu verwenden.
Hudson	Bild des Suchbereiches 1000x520px, SVG Bild unten 500x260px, SVG
Delta	Unteres Bild des Sidebars 870x700px, SVG oder PNG mit einem transparenten Hintergrund

Eigenes Branding
Im Gegensatz zu den Standard-Themes für Zendesk Guide bieten alle unsere Vorlagen eine breite Palette an fortschrittlichen Tools, mit denen Sie ganz ohne externe Hilfe und Programmierkenntnisse ein eigenes Branding für Ihr Help Center entwickeln können.

Von nun an können Sie ganz einfach das Branding Ihres Zendesk Guide selbst gestalten und beliebig oft Änderungen vornehmen, ohne dafür die Dienste von Entwicklern in Anspruch nehmen zu müssen. Entdecken Sie, was Sie selbst ändern können.

Änderungen, die Sie in unseren Themes für Zendesk Guide vornehmen können:
1. Die Grundfarben des Themes, Schriftarten von Google Fonts, Logo, Favicon, das Hintergrundbild im Suchbereich
1. Symbole auf der Startseite sowie deren Namen und Links
1. Layout der Startseite. Sie können wählen, welche Bausteine angezeigt werden sollen, zum Beispiel benutzerdefinierte Bausteine, Kategorienliste, Kategorienbaum, empfohlene Artikel.
1. Farben für die Formatierung von Komponenten
1. Social-Media-Links in der Fußzeile
Sparen Sie Geld, indem Sie ein modernes Theme für Zendesk Guide erwerben, das ohne Programmierkenntnisse und zusätzliche Kosten mit einem individuellen Branding versehen werden kann.

Wenn Sie komplexere Änderungen benötigen, können Sie ein Zendesk-Branding und eine Personalisierung von Lotus Themes bestellen.

Formatierung von Inhalten

Formatierung von Inhalten
Die Vielzahl an möglichen Änderungen ist wirklich erstaunlich. Sie werden überrascht sein, was alles möglich ist. Schauen Sie einfach selbst! In diesem Artikel finden Sie Beispiele für visuelle Komponenten, die in unsere Themes eingebunden sind, sowie Erklärungen, wie Sie diese verwenden können, um Ihre Help Center-Inhalte zu erweitern.

Inhaltsverzeichnis
- Akkordeon-Elemente
- Reiter
- Schriftgrößen
- Textstile
- Codes
- Zitate
- Beschreibungen
- Listen
- Links
- Tabellen
- Callout-Bausteine
- Bilder
- Videos
- Font Awesome
Akkordeons

Akkordeons sind nützlich, wenn Sie zwischen dem Ein- und Ausblenden großer Mengen an Inhalten hin und her wechseln:

Akkordeon-Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Akkordeon-Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Akkordeon-Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Eine weitere Akkordeon-Art:

Akkordeon-Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Akkordeon-Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Akkordeon-Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Erfahren Sie, wie Sie Akkordeons verwenden können.

Reiter

Reiter sind perfekt für die Anzeige verschiedener Themen in Ihrem Artikel geeignet!

Standardreiterstil:

Tab 1Tab 2

Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.

Farbiger Stil:

Tab 1Tab 2Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 1Tab 2Tab 3Tab 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Erfahren Sie, wie Sie Reiter verwenden können.

Schriftgrößen

Dies ist eine Zendesk-Überschrift Typ 2 in sehr großer Schriftgröße.

Dies ist eine Zendesk-Überschrift Typ 3 in großer Schriftgröße.

Dies ist eine Zendesk-Überschrift Typ 4 in mittlerer Schriftgröße.

Dies ist eine Überschrift Typ 5.

Kleine Schriftgröße.

Dies ist Standardtext. Das sogenannte „Lorem ipsum“ ist ein pseudo-lateinischer Text, der in den Bereichen Webdesign, Typografie, Layout und Druck anstelle von späteren Textinhalten verwendet wird, um Designelemente gegenüber diesen hervorzuheben. Es wird auch als Platzhaltertext (oder Blindtext) bezeichnet.

Erfahren Sie, wie Sie Schriftgrößen verwenden können.

Textstile

Dies ist der Schriftstil „kursiv“.

Dies ist der Schriftstil „fett“.

Dies ist Ihr unterstrichener Text.

Dieser Text ~~wurde gelöscht~~.

Dies ist wichtiger hervorgehobener Text

Dies ist wichtiger Text in blauer Schriftfarbe.

Dies ist wichtiger Text in gelber Schriftfarbe.

Dies ist wichtiger Text in roter Schriftfarbe.

Erfahren Sie, wie Sie Textstile verwenden können.
Codes

So sieht Beispielcode aus:
```
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML</title>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet. </p>
 </body>
</html>
```
Erfahren Sie, wie Sie Codestile verwenden können.
Zitate

Standardzitat

„Hier ist ein ganz besonderes Zitat. Können Sie glauben, was man über uns sagt? Hier ist ein ganz besonderes Zitat. Können Sie glauben, was man über uns sagt? Hier ist ein ganz besonderes Zitat. Können Sie glauben, was man über uns sagt?“

Farbiges Zitat

„Hier ist ein ganz besonderes Zitat. Können Sie glauben, was man über uns sagt? Hier ist ein ganz besonderes Zitat. Können Sie glauben, was man über uns sagt? Hier ist ein ganz besonderes Zitat. Können Sie glauben, was man über uns sagt?“

Erfahren Sie, wie Sie Zitatstile verwenden können.

Beschreibungslisten

Standardbeschreibungsliste

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Horizontale Beschreibungsliste

Beschreibungslisten

Diese Art der Beschreibungsliste eignet sich perfekt zum Definieren von Begriffen.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Erfahren Sie, wie Sie Beschreibungslisten verwenden können.
Listen

Aufzählung/unsortierte Liste
- Aufzählung 1
- Aufzählung 2
- Aufzählung 3
- Aufzählung 4
  - integriertes Element 1
  - integriertes Element 2
Farbige Aufzählung
- Aufzählung 1
- Aufzählung 2
- Aufzählung 3
- Aufzählung 4
Sortierte Liste
1. Aufzählung 1
2. Aufzählung 2
3. Aufzählung 3
4. Aufzählung 4
  1. integriertes Element 1
  2. integriertes Element 2
Sortierte Liste mit farbiger Nummerierung

Diese Art von Liste bietet eine großartige Möglichkeit, Inhalte mit längeren Schritt-für-Schritt-Anleitungen, Beschreibungen usw. anzuzeigen.
1. Mehl, Zimt, Salz und Stärke in eine Schüssel geben.
2. Die Eier für 3-4 Minuten mit einem elektrischen Drahtschneebesen mit Zucker schaumig schlagen. Die Farbe der Masse sollte etwas heller werden und ihr Volumen zunehmen.
3. Masse weiter schaumig schlagen und dabei nach und nach das Mehl zur Eimasse geben. So lange schlagen, bis eine homogene Masse entsteht.
4. Die Äpfel schälen und in kleine Würfel schneiden.
5. In den auf 180 Grad vorgeheizten Backofen geben und je nach Heizleistung Ihres Ofens 30-40 Minuten backen. Sobald der Apfelkuchen eine goldbraune Kruste hat, mit einem Zahnstocher überprüfen, ob der Kuchen gar ist.
  1. Mehl, Zimt, Salz und Stärke in eine Schüssel geben.
  2. Die Eier für 3-4 Minuten mit einem elektrischen Drahtschneebesen mit Zucker schaumig schlagen. Die Farbe der Masse sollte etwas heller werden und ihr Volumen zunehmen.
  3. Masse weiter schaumig schlagen und dabei nach und nach das Mehl zur Eimasse geben. So lange schlagen, bis eine homogene Masse entsteht.
  4. Die Äpfel schälen und in kleine Würfel schneiden.
  5. In den auf 180 Grad vorgeheizten Backofen geben und je nach Heizleistung Ihres Ofens 30-40 Minuten backen. Sobald der Apfelkuchen eine goldbraune Kruste hat, mit einem Zahnstocher überprüfen, ob der Kuchen gar ist.
Erfahren Sie, wie Sie Listen verwenden können.
Links

Standardlink

Dies ist eine einfache Linkform. Klick mich!

Schaltflächenlink

Klick auch mich!

Erfahren Sie, wie Sie Links verwenden können.

Tables

Generic Table

Monatliche Einsparungen

Summe $270

Januar $100

Februar $80

März $90

Tabelle mit farbiger Kopfzeile

Monatliche Einsparungen

Summe $270

Januar $100

Februar $80

März $90

Tabelle mit Rahmen

Monatliche Einsparungen

Januar $100

Februar $80

März $90

Summe $270

Tabelle mit Streifen

Monatliche Einsparungen

Januar $100

Februar $80

März $90

Summe $270

Tabelle mit dynamischer Hintergrundfarbe

Monatliche Einsparungen

Januar $100

Februar $80

März $90

Summe $270

Erfahren Sie, wie Sie Tables verwenden können.

Callout-Bausteine

Einfache Hinweise

Standard

Dies ist ein Standardbaustein.

Informationen

Dies ist ein Informationsbaustein.

Warning

Dies ist ein Warnhinweisbaustein.

Erfolg

Dies ist ein Erfolgsmeldungsbaustein.

Gefahr

Dies ist ein Gefahrenhinweisbaustein.

Standard-Callout-Baustein

Dies ist ein Callout.

Ich bin ein graues Callout!

Mit gestricheltem Rahmen:

Dies ist ein Callout.

Ich bin ein graues Callout!

Transparentes Callout

Dies ist ein transparentes Callout.

Ich bin ein transparentes Callout!

Mit gestricheltem Rahmen:

Dies ist ein Callout.

Ich bin ein transparentes Callout!

Erfolgsmeldungs-Callout

Dies ist ein Erfolgsmeldungs-Callout.

Ich bin ein Erfolgsmeldungs-Callout!

Mit gestricheltem Rahmen:

Dies ist ein Erfolgsmeldungs-Callout.

Ich bin ein Erfolgsmeldungs-Callout!

Info-Callout

Dies ist ein Info-Callout.

Ich bin ein neutrales Info-Callout!

Mit gestricheltem Rahmen:

Dies ist ein Info-Callout.

Ich bin ein neutrales Info-Callout!

Warnhinweis-Callout

Dies ist ein Warnhinweis-Callout.

Und jetzt werde ich Ihnen etwas sehr Wichtiges mitteilen! Achten Sie auf mich!

Mit gestricheltem Rahmen:

Dies ist ein Warnhinweis-Callout.

Ich bin ein Warnhinweis-Callout mit gestricheltem Rahmen!

Sicherheitshinweis-Callout

Dies ist ein Sicherheitshinweis-Callout.

Und hier sind ein paar überaus wichtige Informationen, die Sie unbedingt wissen müssen.

Mit gestricheltem Rahmen:

Dies ist ein Sicherheitshinweis-Callout.

Ich bin ein Sicherheitshinweis-Callout mit gestricheltem Rahmen!

Callout in der Primärfarbe

Dies ist ein Callout.

Ich bin ein Callout in Primärfarbe.

Mit gestricheltem Rahmen:

Dies ist ein Callout.

Ich bin ein Callout in Primärfarbe mit gestricheltem Rahmen!

Callout-Bausteine mit Font Awesome-Symbolen

Es ist möglich, Ihre Callouts mit Font Awesome-Symbolen zu kombinieren:

„Abonnieren“-Symbol

Dies ist ein Callout mit dem Symbol.

Schlosssymbol

Dies ist ein Callout mit dem Symbol.

Telefonsymbol

Dies ist ein Callout mit dem Symbol.

Schlosssymbol

Dies ist ein Callout mit dem Symbol.

Dateisymbol

Dies ist ein Callout mit dem Symbol.

Smiley-Symbol

Dies ist ein Callout mit dem Symbol.

Zauberstabsymbol

Dies ist ein Callout mit dem Symbol.

Kombinieren Sie Farben und Symbole!

Smiley-Symbol

Dies ist ein Callout mit dem Symbol.

Zauberstabsymbol

Dies ist ein Callout mit dem Symbol

Erfahren Sie, wie Sie Callouts verwenden können.

Bilder

Standardmäßig haben Bilder keine Rahmen.

Auf Wunsch können sie jedoch eingerahmt werden:

Oder man kann sie mit einem Schatten versehen:

Oder man kann sie überlagern:

Lightbox für Bilder

Es ist möglich, eine größere Version eines Bildes in der Lightbox zu öffnen.

Erfahren Sie, wie Sie Bilder verwenden können.

Videos

Video in einer Lightbox:

Erfahren Sie, wie Sie Videos verwenden können.

Font Awesome-Symbole

Bei Font Awesome handelt es sich um eine Sammlung von skalierbaren Vektorsymbolen, die sofort individuell angepasst werden können – dank CSS können Größe, Farbe und Schatten geändert und andere Änderungen vorgenommen werden.

Sie können beliebige der über 650 Symbole kostenlos in jedem Bereich Ihres Help Centers (Layout, Artikel usw.) verwenden. Sie sind bereits in allen unseren Themes enthalten. Auf dieser Seite finden Sie alle Font Awesome-Symbole und den entsprechenden Code.

Font Awesome im Text

Es ist relativ einfach, ein Font Awesome-Symbol in einen beliebigen Text in Ihrem Help Center einzufügen . Font Awesome ist auch bei kommerzieller Nutzung völlig kostenlos. Die Symbole liegen im Vektorgrafikformat vor, was bedeutet, dass sie auf hochauflösenden Displays einfach atemberaubend dargestellt werden . Es ist sehr einfach, Ihr eigenes Design durch Ändern der Farbe der Symbole, der Größe, der Schatten und aller anderen, mit CSS möglichen Aspekte zu entwerfen .

Font Awesome-Titel

Darüber hinaus können Sie alle Symbole aus der Font Awesome-Bibliothek verwenden, um Ihre Titel einprägsamer zu gestalten!

Titel mit Motorrad

Titel mit Taschenrechner

Titel mit Fernglas

Titel mit schlagendem Herz

Und nicht nur Ihre Titel:

Morgen laufen wir schneller, strecken die Arme weiter aus ... Und eines schönen Tages ... So kämpfen wir weiter, wie Boote gegen den Strom, und unablässig treibt es uns zurück in die Vergangenheit.

Animieren Sie sie!

Und kombinieren Sie sie:

fab-twitter und fa-square

fa-flag und fa-circle

fa-terminal und fa-square

Erfahren Sie, wie Sie Font Awesome-Symbole verwenden können.

Monatliche	Einsparungen
Summe	$270
Januar	$100
Februar	$80
März	$90

Monatliche	Einsparungen
Summe	$270
Januar	$100
Februar	$80
März	$90

Monatliche	Einsparungen
Januar	$100
Februar	$80
März	$90
Summe	$270

Monatliche	Einsparungen
Januar	$100
Februar	$80
März	$90
Summe	$270

Monatliche	Einsparungen
Januar	$100
Februar	$80
März	$90
Summe	$270

Akkordeons

Akkordeons sind nützlich, wenn Sie zwischen dem Ein- und Ausblenden großer Mengen an Inhalten hin und her wechseln:

Akkordeon-Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Akkordeon-Element

<div class="accordion accordion--default">
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Akkordeon-Element</strong>
    </div>
    <div class="accordion__item-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Akkordeon-Element</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Akkordeon-Element</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

Eine weitere Akkordeon-Art:

Akkordeon-Element

<div class="accordion accordion--colored">
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Akkordeon-Element</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Akkordeon-Element</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Akkordeon-Element</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

Codes

HTML code

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML</title>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet. </p>
 </body>
</html>

  <pre><code class="html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;HTML&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet. &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Ruby code

# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute

<pre><code class="ruby"># The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute</code></pre>

Es sind auch andere Sprachen kompatibel. Mehr erfahren.

Callout-Bausteine

Einfache Hinweise

Standard

Dies ist ein Standardbaustein

<div class="note note--default">
  <h4 class="note-title">Standard</h4>
  <p>Dies ist ein Standardbaustein</p>
</div>

Informationen

Dies ist ein Informationsbaustein.

<div class="note note--info">
  <h4 class="note-title">Informationen</h4>
  <p>Dies ist ein Informationsbaustein.</p>
</div>

Warnung

Dies ist ein Warnhinweisbaustein.

<div class="note note--warning">
  <h4 class="note-title">Warnung</h4>
  <p>Dies ist ein Warnhinweisbaustein.</p>
</div>

Erfolg

Dies ist ein Erfolgsmeldungsbaustein.

<div class="note note--success">
  <h4 class="note-title">Erfolg</h4>
  <p>Dies ist ein Erfolgsmeldungsbaustein.
</p>
</div>

Gefahr

Dies ist ein Gefahrenhinweisbaustein.

<div class="note note--danger">
  <h4 class="note-title">Gefahr</h4>
  <p>Dies ist ein Gefahrenhinweisbaustein.</p>
</div>

Standard-Callout-Baustein

Dies ist ein Callout.

Ich bin ein graues Callout!

<div class="callout">
  <h4 class="callout__title">Dies ist ein Callout.</h4>
  <p>Ich bin ein graues Callout!
</p>
</div>

Dies ist ein Callout.

Ich bin ein graues Callout!

<div class="callout callout--dashed">
  <h4 class="callout__title">Dies ist ein Callout.</h4>
  <p>Ich bin ein graues Callout!
</p>
</div>

Transparent callout

Dies ist ein transparentes Callout.

Ich bin ein transparentes Callout!

<div class="callout callout--transparent">
  <h4 class="callout__title">Dies ist ein transparentes Callout.
</h4>
  <p>Ich bin ein transparentes Callout!
</p>
</div>

Mit gestricheltem Rahmen:

Dies ist ein Callout.

Ich bin ein transparentes Callout!

<div class="callout callout--transparent callout--dashed">
  <h4 class="callout__title">Dies ist ein Callout.</h4>
  <p>Ich bin ein transparentes Callout!
</p>
</div>

Erfolgsmeldungs-Callout

Dies ist ein Erfolgsmeldungs-Callout.

Ich bin ein Erfolgsmeldungs-Callout!

<div class="callout callout--success">
  <h4 class="callout__title">Dies ist ein Erfolgsmeldungs-Callout.
</h4>
  <p>Ich bin ein Erfolgsmeldungs-Callout!</p>
</div>

Dies ist ein Erfolgsmeldungs-Callout.

Ich bin ein Erfolgsmeldungs-Callout!

<div class="callout callout--success callout--dashed">
  <h4 class="callout__title">Dies ist ein Erfolgsmeldungs-Callout.
</h4>
  <p>Ich bin ein Erfolgsmeldungs-Callout!</p>
</div>

Info-Callout

Dies ist ein Info-Callout.

Ich bin ein neutrales Info-Callout!

<div class="callout callout--info">
  <h4 class="callout__title">Dies ist ein Info-Callout.</h4>
  <p>Ich bin ein neutrales Info-Callout!</p>
</div>

Dies ist ein Info-Callout.

Ich bin ein neutrales Info-Callout!

<div class="callout callout--info callout--dashed">
  <h4 class="callout__title">Dies ist ein Info-Callout.</h4>
  <p>Ich bin ein neutrales Info-Callout!</p>
</div>

Warning-callout

Dies ist ein Warnhinweis-Callout.

Und jetzt werde ich Ihnen etwas sehr Wichtiges mitteilen! Achten Sie auf mich!

<div class="callout callout--warning">
  <h4 class="callout__title">Dies ist ein Warnhinweis-Callout.</h4>
  <p>Und jetzt werde ich Ihnen etwas sehr Wichtiges mitteilen! Achten Sie auf mich!</p>
</div>

Dies ist ein Warnhinweis-Callout.

Ich bin ein Warnhinweis-Callout mit gestricheltem Rahmen!

<div class="callout callout--warning callout--dashed">
  <h4 class="callout__title">Dies ist ein Warnhinweis-Callout.</h4>
  <p>Ich bin ein Warnhinweis-Callout mit gestricheltem Rahmen!
</p>
</div>

Sicherheitshinweis-Callout

Dies ist ein Sicherheitshinweis-Callout.

Und hier sind ein paar überaus wichtige Informationen, die Sie unbedingt wissen müssen.

<div class="callout callout--danger">
  <h4 class="callout__title">Dies ist ein Sicherheitshinweis-Callout.
</h4>
  <p>Und hier sind ein paar überaus wichtige Informationen, die Sie unbedingt wissen müssen.
</p>
</div>

Dies ist ein Sicherheitshinweis-Callout.

Ich bin ein Sicherheitshinweis-Callout mit gestricheltem Rahmen!

<div class="callout callout--danger callout--dashed">
  <h4 class="callout__title">Dies ist ein Sicherheitshinweis-Callout.
</h4>
  <p>Ich bin ein Sicherheitshinweis-Callout mit gestricheltem Rahmen!
</p>
</div>

Callout in Primärfarbe

Dies ist ein Callout.

Ich bin ein Callout in Primärfarbe.

<div class="callout callout--primary">
  <h4 class="callout__title">Dies ist ein Callout.</h4>
  <p>Ich bin ein Callout in Primärfarbe.</p>
</div>

Dies ist ein Callout.

Ich bin ein Callout in Primärfarbe mit gestricheltem Rahmen!

<div class="callout callout--primary callout--dashed">
  <h4 class="callout__title">Dies ist ein Callout.</h4>
  <p>Ich bin ein Callout in Primärfarbe mit gestricheltem Rahmen!</p>
</div>