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


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.

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.
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.

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.



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.



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.

Beiträge in diesem Abschnitt

War dieser Beitrag hilfreich?
0 von 1 fanden dies hilfreich
Teilen

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.