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.

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:

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:

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?

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

Aufzählung 1
Aufzählung 2
Aufzählung 3
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.

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

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.

<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

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.

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

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.

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-send-o">&nbsp;</em> „Abonnieren“-Symbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Schlosssymbol

Dies ist ein Callout mit dem Symbol.

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-lock">&nbsp;</em> Schlosssymbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Telefonsymbol

Dies ist ein Callout mit dem Symbol.

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-phone">&nbsp;</em> Telefonsymbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Schlosssymbol

Dies ist ein Callout mit dem Symbol.

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-clock-o">&nbsp;</em> Schlosssymbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Dateisymbol

Dies ist ein Callout mit dem Symbol.

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-file">&nbsp;</em> Dateisymbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Smiley-Symbol

Dies ist ein Callout mit dem Symbol.

<div class="callout">
  <h4 class="callout__title"><em class="far fa-smile-o">&nbsp;</em> Smiley-Symbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Zauberstabsymbol

Dies ist ein Callout mit dem Symbol.

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-magic">&nbsp;</em> Zauberstabsymbol
</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Combine colors and icons!

Smiley-Symbol

Dies ist ein Callout mit dem Symbol.

<div class="callout callout--success">
  <h4 class="callout__title"><em class="far fa-smile-o">&nbsp;</em> Smiley-Symbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

Zauberstabsymbol

Dies ist ein Callout mit dem Symbol.

<div class="callout callout--warning">
  <h4 class="callout__title"><em class="fas fa-magic">&nbsp;</em> Zauberstabsymbol</h4>
  <p>Dies ist ein Callout mit dem Symbol.</p>
</div>

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.

<dl>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

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.

<dl class="dl-horizontal">
  <dt>Beschreibungslisten</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

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.

1500+ icons for you

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 .


<p>Es ist relativ einfach, ein Font Awesome-Symbol in einen beliebigen Text in Ihrem Help Center einzufügen <em class="fas fa-flag">&nbsp;</em>. Font Awesome ist auch bei kommerzieller Nutzung völlig kostenlos <em class="fas fa-hand-left">&nbsp;</em>. Die Symbole liegen im Vektorgrafikformat vor, was bedeutet, dass sie auf hochauflösenden Displays einfach atemberaubend dargestellt werden <em class="fas fa-eye">&nbsp;</em>. 
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 <em class="fas fa-pencil-alt">&nbsp;</em>.
</p>

Bitte beachten Sie, dass der Editor von Zendesk leere Tags, die zum Quellcode hinzugefügt werden, entfernt. Stellen Sie also sicher, dass Sie ein geschütztes Leerzeichen   zum Code hinzufügen. Verwenden Sie beispielsweise nicht Folgendes:

<em class="fas fa-pencil"> </em>

Verwenden Sie stattdessen Folgendes:

<em class="fas fa-pencil">&nbsp;</em>

Font Awesome-Titel

Sie können beliebige Symbole aus der Font Awesome-Bibliothek verwenden, um Ihre Titel stilvoller und einprägsamer zu gestalten!

Titel mit Motorrad

Titel mit Taschenrechner

Titel mit Fernglas

Titel mit schlagendem Herz

<h4><em class="fas fa-2x fa-motorcycle">&nbsp;</em> Titel mit Motorrad</h4>
<h4 class="wysiwyg-color-green120"><em class="fas fa-2x fa-calculator">&nbsp;</em> Titel mit Taschenrechner</h4>
<h4 class="wysiwyg-color-pink"><em class="fas fa-2x fa-binoculars">&nbsp;</em> Titel mit Fernglas</h4>
<h4 class="wysiwyg-color-red"><em class="fas fa-2x fa-heartbeat">&nbsp;</em> Titel mit schlagendem Herz</h4>

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.

<div class="fas fa-quote-left fa-3x fa-pull-left fa-border">&nbsp;</div>
<p>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.</p>

Animieren Sie sie!

<div class="fas fa-spinner fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-circle-notch fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-sync fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-cog fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-venus fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-mars fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-firefox fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-opera fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-chrome fa-spin fa-3x fa-fw">&nbsp;</div>

Und kombinieren Sie sie:

fab-twitter and fa-square

fa-flag and fa-circle

fa-terminal and fa-square

<div style="text-align: center;">
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fab fa-twitter fa-stack-1x">&nbsp;</div>
    </div>
    <p>fa-twitter and fa-square</p>
  </div>
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-circle fa-stack-2x">&nbsp;</div>
      <div class="fas fa-flag fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-flag and fa-circle</p>
  </div>
  <div style="display: inline-block;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fas fa-terminal fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-terminal and fa-square</p>
  </div>
</div>

Schriftgrößen

Sie können den integrierten WYSIWYG-Editor verwenden, um die Schriftgröße zu ändern:

Alternativ können Sie auch den Quellcode ändern:

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

<p><span class="wysiwyg-font-size-x-large"> Dies ist eine Zendesk-Überschrift Typ 2 in sehr großer Schriftgröße. </span></p>

<h2> Dies ist eine Überschrift Typ 2 </h2>

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

<p><span class="wysiwyg-font-size-large"> Dies ist eine Zendesk-Überschrift Typ 3 in großer Schriftgröße. </span></p>

<h3>Dies ist eine Überschrift Typ 3</h3>

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

<p><span class="wysiwyg-font-size-medium">Dies ist eine Zendesk-Überschrift Typ 4 in mittlerer Schriftgröße.</span></p>

<h4>Dies ist eine Überschrift Typ 4</h4>

Dies ist eine Überschrift Typ 5.

<h5>Dies ist eine Überschrift Typ 5</h5>

Kleine Schriftgröße

<p><span class="wysiwyg-font-size-small">Kleine Schriftgröße</span></p>

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.

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

Bilder

Standardbild

<p>
  <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Bild mit abgerundeten Ecken

<p>
  <img class="image-with-border" src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Bild mit Schatten

<p>
  <img class="image-with-shadow" src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Überlagertes Bild

<p class="image-overlay">
  <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Lightbox für Bilder

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

<p>
  <a class="image-with-lightbox" href="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" width="400" />
  </a>
</p>

Links

Standardlink

Erfahren Sie, wie Sie Listen verwenden können!

<a href="https://www.lotusthemes.com/" target="_blank">
  Dies ist eine einfache Linkform. Klick mich!

</a>

Schaltflächenlink

Klick auch mich!

<a class="btn btn--primary" href="https://www.lotusthemes.com" target="_blank">
  Klick auch mich!
</a>

Listen

Aufzählung/unsortierte Liste

Aufzählung 1
Aufzählung 2
Aufzählung 3
Aufzählung 4
- integriertes Element 1
- integriertes Element 2

<ul>
  <li>Aufzählung 1</li>
  <li>Aufzählung 2</li>
  <li>Aufzählung 3</li>
  <li>Aufzählung 4
    <ul>
      <li>integriertes Element 1</li>
      <li>integriertes Element 2</li>
    </ul>
  </li>
</ul>

Farbige Aufzählung

Aufzählung 1
Aufzählung 2
Aufzählung 3
Aufzählung 4

<ul class="list-bullet">
  <li>Aufzählung 1</li>
  <li>Aufzählung 2</li>
  <li>Aufzählung 3</li>
  <li>Aufzählung 4</li>
</ul>

Sortierte Liste

Aufzählung 1
Aufzählung 2
Aufzählung 3
Aufzählung 4
1. integriertes Element 1
2. integriertes Element 2

<ol>
  <li>Aufzählung 1</li>
  <li>Aufzählung 2</li>
  <li>Aufzählung 3</li>
  <li>Aufzählung 4
    <ol>
      <li>integriertes Element 1</li>
      <li>integriertes Element 2</li>
    </ol>
  </li>
</ol>

Sortierte Liste mit farbiger Nummerierung

Bei längeren Schritt-für-Schritt-Anleitungen und Beschreibungen bietet diese Art von Liste großartige Möglichkeit zur Präsentation von Inhalten.

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

<ol class="list-colored">
  <li>Mehl, Zimt, Salz und Stärke in eine Schüssel geben.</li>
  <li>Die Eier für 3-4 Minuten mit einem elektrischen Drahtschneebesen mit Zucker schaumig schlagen.</li>
  <li>Masse weiter schaumig schlagen und dabei nach und nach das Mehl zur Eimasse geben. So lange schlagen, bis eine homogene Masse entsteht.</li>
  <li>Die Äpfel schälen und in kleine Würfel schneiden.</li>
  <li>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.
    <ol class="list-colored">
      <li>Mehl, Zimt, Salz und Stärke in eine Schüssel geben.</li>
      <li>Die Eier für 3-4 Minuten mit einem elektrischen Drahtschneebesen mit Zucker schaumig schlagen.</li>
      <li>Masse weiter schaumig schlagen und dabei nach und nach das Mehl zur Eimasse geben. So lange schlagen, bis eine homogene Masse entsteht.</li>
      <li>Die Äpfel schälen und in kleine Würfel schneiden.</li>
      <li>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.</li>
    </ol>
  </li>
</ol>

Tabellen

Generische Tabelle

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

<table class="table">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Farbige Kopfzeile:

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

<table class="table table--color-header">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Tabelle mit Rahmen

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

<table class="table table--bordered">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Tabelle mit Streifen

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

<table class="table table--striped">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Tabelle mit dynamischer Hintergrundfarbe

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

<table class="table table--hover">
  <thead>
  <tr>
    <th>Monatliche</th>
    <th>Einsparungen</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Januar </td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februar </td>
    <td>$80</td>
  </tr>
  <tr>
    <td>März </td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Summe </td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Reiter

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

Standardreiterstil

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.

<div class="tabs">
  <div class="tabs-menu">
    <span class="tabs-link is-active">Tab 1</span>
    <span class="tabs-link">Tab 2</span>
  </div>
  <div class="tab">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.</div>
  <div class="tab is-hidden">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.</div>
</div>

Farbiger Stil:

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.

<div class="tabs tabs--colored-1">
  <div class="tabs-menu"><span class="tabs-link is-active">Tab 1</span>
    <span class="tabs-link">Tab 2</span>
    <span class="tabs-link">Tab 3</span>
  </div>
  <div class="tab">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 class="tab is-hidden">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?</div>
  <div class="tab is-hidden">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>

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?

<div class="tabs tabs--colored-2">
  <div class="tabs-menu"><span class="tabs-link is-active">Tab 1</span>
    <span class="tabs-link">Tab 2</span>
    <span class="tabs-link">Tab 3</span>
    <span class="tabs-link">Tab 4</span>
  </div>
  <div class="tab">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 class="tab is-hidden">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?</div>
  <div class="tab is-hidden">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 class="tab is-hidden">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?</div>
</div>

Textstile

Sie können den integrierten WYSIWYG-Editor verwenden, um den Textstil zu ändern:

Alternativ können Sie auch den Quellcode ändern:

Dies ist der Schriftstil „kursiv“.

<p><em>Dies ist der Schriftstil „kursiv“.</em></p>

Dies ist der Schriftstil „fett“.

<p><strong>Dies ist der Schriftstil „fett“.
</strong></p>

Dies ist Ihr unterstrichener Text.

<p><span class="wysiwyg-underline">Dies ist Ihr unterstrichener Text.</span></p>

Dieser Text wurde ~~gelöscht~~

<p>This text is <del>deleted</del></p>

Dies ist wichtiger hervorgehobener Text.

<p>Dies ist <span class="text-primary">wichtiger hervorgehobener Text.
</span></p>

Dies ist wichtiger Text in blauer Schriftfarbe.

<p>Dies ist <span class="text-info">wichtiger Text in blauer Schriftfarbe.
</span></p>

Dies ist wichtiger Text in gelber Schriftfarbe.

<p>Dies ist <span class="text-warning">wichtiger Text in gelber Schriftfarbe.
</span></p>

Dies ist wichtiger Text in roter Schriftfarbe.

<p>Dies ist <span class="text-danger">wichtiger Text in roter Schriftfarbe.
</span></p>

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?“

<blockquote>
  „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?“
</blockquote>

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?“

<blockquote class="is-colored">
  „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?“
</blockquote>

Videos

Eingebettetes Video

<div class="embed">
  <iframe src="https://player.vimeo.com/video/206627186?badge=0" width="640" height="274" frameborder="0" allowfullscreen=""></iframe>
</div>

Video in einer Lightbox:

<p>
  <a class="image-with-video-icon" href="https://www.youtube.com/watch?v=KtsAGqo-V18">
    <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/video.png" /> </a>
</p>