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:
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:
Reiter
Reiter sind perfekt für die Anzeige verschiedener Themen in Ihrem Artikel geeignet!
Standardreiterstil:
Farbiger Stil:
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.
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.
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>
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?“
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.
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
- Aufzählung 1
- Aufzählung 2
- Aufzählung 3
- Aufzählung 4
- integriertes Element 1
- 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.
- Mehl, Zimt, Salz und Stärke in eine Schüssel geben.
- 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.
- Masse weiter schaumig schlagen und dabei nach und nach das Mehl zur Eimasse geben. So lange schlagen, bis eine homogene Masse entsteht.
- Die Äpfel schälen und in kleine Würfel schneiden.
- 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.
- Mehl, Zimt, Salz und Stärke in eine Schüssel geben.
- 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.
- Masse weiter schaumig schlagen und dabei nach und nach das Mehl zur Eimasse geben. So lange schlagen, bis eine homogene Masse entsteht.
- Die Äpfel schälen und in kleine Würfel schneiden.
- 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.
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 |
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
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.
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.
Kommentare
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.