HTML-Formatierungshilfe für clever-termin

Beschreibungstexte einfach und individuell gestalten

Mit clever-termin kannst du deine Beschreibungstexte mithilfe von HTML individuell gestalten. So lassen sich wichtige Informationen hervorheben, Überschriften einfügen, Aufzählungen erstellen oder weiterführende Links hinterlegen.

Auch individuelle Schriftfarben, Schriftgrößen und mehrspaltige Darstellungen sind möglich.

Dafür benötigst du keine Programmierkenntnisse. Schon wenige HTML-Befehle reichen aus, um deine Inhalte ansprechend und übersichtlich aufzubauen.

In dieser Anleitung findest du die wichtigsten Befehle mit praktischen Beispielen. Unter jedem HTML-Beispiel zeigen wir dir auch das entsprechende Ergebnis.

---

1. Wie füge ich HTML-Code in clever-termin ein?

Je nachdem, welchen Bereich du bearbeiten möchtest, unterscheidet sich die Eingabe des HTML-Codes.

HTML in Dienstleistungsbeschreibungen verwenden

Bei der Bearbeitung einer Dienstleistung kannst du den HTML-Code direkt in das entsprechende Beschreibungsfeld einfügen.

Nach dem Speichern wird der Code in der Buchungsansicht interpretiert und entsprechend formatiert dargestellt.

HTML-Code:

<h3>Unsere Komplettpflege</h3>

<p>
<strong>Die Leistung umfasst:</strong>
</p>

<ul>
  <li>Persönliche Beratung</li>
  <li>Gründliche Reinigung</li>
  <li>Abschließende Pflege</li>
</ul>

Ergebnis:

Unsere Komplettpflege

Die Leistung umfasst:

• Persönliche Beratung
• Gründliche Reinigung
• Abschließende Pflege

HTML in Seiten mit integriertem Texteditor verwenden

Bei Seiten mit integriertem Texteditor, beispielsweise dem Impressum, ist ein zusätzlicher Schritt erforderlich.

Über die Schaltfläche <> in der Symbolleiste kannst du zwischen der normalen Textansicht und der HTML-Quellcodeansicht wechseln.

So gehst du vor:

1. Öffne die gewünschte Seite zur Bearbeitung.
2. Klicke in der Symbolleiste auf das Symbol <>.
3. Füge deinen HTML-Code in der Quellcodeansicht ein.
4. Klicke erneut auf <>, um zur normalen Textansicht zurückzukehren.
5. Überprüfe die Darstellung und speichere anschließend deine Änderungen.

Wichtig: Wenn du HTML-Code direkt in die normale Textansicht einfügst, kann es passieren, dass die HTML-Befehle lediglich als gewöhnlicher Text angezeigt werden. Verwende deshalb bei einem integrierten Texteditor immer die Quellcodeansicht.

---

2. Was ist HTML und wie funktioniert es?

HTML steht für HyperText Markup Language. Dabei handelt es sich um eine Auszeichnungssprache, mit der Texte und andere Inhalte strukturiert werden.

Die Formatierung erfolgt über sogenannte HTML-Tags. Diese stehen in spitzen Klammern und umschließen in der Regel den Text, der formatiert werden soll.

HTML-Code:

<strong>Dieser Text wird fett dargestellt.</strong>

Ergebnis:

Dieser Text wird fett dargestellt.

Das Tag <strong> beginnt die Formatierung. Mit </strong> wird sie wieder beendet.

Du kannst unterschiedliche HTML-Befehle auch miteinander kombinieren und dadurch umfangreichere Beschreibungen gestalten.

---

3. Die wichtigsten Befehle zur Textformatierung

Die folgende Übersicht enthält die am häufigsten benötigten HTML-Befehle.

HTML-Befehl	Beschreibung
<strong>Text</strong>	Text fett hervorheben
<b>Text</b>	Text fett darstellen
<em>Text</em>	Text kursiv hervorheben
<i>Text</i>	Text kursiv darstellen
<u>Text</u>	Text unterstreichen
<s>Text</s>	Text durchstreichen
<small>Text</small>	Text kleiner darstellen
<br>	Einfachen Zeilenumbruch einfügen
<p>Text</p>	Einen neuen Absatz erstellen
<hr>	Eine horizontale Trennlinie einfügen

Beispiel: Fett, kursiv und unterstrichen

HTML-Code:

<p><strong>Dieser Text ist fett.</strong></p>
<p><em>Dieser Text ist kursiv.</em></p>
<p><u>Dieser Text ist unterstrichen.</u></p>
<p><s>Dieser Text ist durchgestrichen.</s></p>

Ergebnis:

Dieser Text ist fett.

Dieser Text ist kursiv.

Dieser Text ist unterstrichen.

Dieser Text ist durchgestrichen.

Beispiel: Absätze und Zeilenumbrüche

Mit <p> erstellst du einen neuen Absatz. Der Befehl <br> erzeugt dagegen lediglich einen Zeilenumbruch.

HTML-Code:

<p>Das ist der erste Absatz.</p>

<p>
Das ist der zweite Absatz.<br>
Dieser Text steht direkt in der nächsten Zeile.
</p>

Ergebnis:

Das ist der erste Absatz.

Das ist der zweite Absatz.
Dieser Text steht direkt in der nächsten Zeile.

Beispiel: Wichtige Informationen hervorheben

HTML-Code:

<p>
<strong>Wichtiger Hinweis:</strong><br>
Bitte erscheine möglichst 5 Minuten vor deinem Termin.
</p>

Ergebnis:

Wichtiger Hinweis:
Bitte erscheine möglichst 5 Minuten vor deinem Termin.

Tipp: Mit <strong> lassen sich besonders wichtige Informationen hervorheben. Verwende Fettschrift gezielt, damit deine Beschreibung übersichtlich bleibt.

---

4. Überschriften verwenden

Überschriften helfen dabei, längere Texte sinnvoll zu gliedern.

HTML stellt hierfür sechs unterschiedliche Überschriftenebenen zur Verfügung, von <h1> bis <h6>.

HTML-Befehl	Verwendung
<h1>Überschrift</h1>	Hauptüberschrift
<h2>Überschrift</h2>	Große Abschnittsüberschrift
<h3>Überschrift</h3>	Zwischenüberschrift
<h4>Überschrift</h4>	Kleinere Zwischenüberschrift
<h5>Überschrift</h5>	Untergeordnete Überschrift
<h6>Überschrift</h6>	Sehr kleine Überschriftenebene

Beispiel: Eine Dienstleistung mit Überschrift

HTML-Code:

<h3>Professionelle Komplettpflege</h3>

<p>
Unsere Komplettpflege umfasst eine gründliche Reinigung
und eine individuell abgestimmte Behandlung.
</p>

Ergebnis:

Professionelle Komplettpflege

Unsere Komplettpflege umfasst eine gründliche Reinigung und eine individuell abgestimmte Behandlung.

Unsere Empfehlung für clever-termin: Für die Beschreibung einer Dienstleistung eignet sich häufig eine H3- oder H4-Überschrift.

Die tatsächliche Größe und Darstellung der Überschriften hängt vom verwendeten Design ab.

---

5. Aufzählungen und Listen erstellen

Aufzählungen eignen sich besonders gut, um den Umfang einer Dienstleistung übersichtlich darzustellen.

HTML unterscheidet zwischen Listen mit Aufzählungspunkten und nummerierten Listen.

Aufzählung mit Punkten

Für eine Aufzählung verwendest du <ul>. Die einzelnen Einträge werden jeweils mit <li> gekennzeichnet.

HTML-Code:

<p><strong>Die Leistung umfasst:</strong></p>

<ul>
  <li>Persönliche Beratung</li>
  <li>Gründliche Reinigung</li>
  <li>Individuell abgestimmte Behandlung</li>
  <li>Abschließende Pflege</li>
</ul>

Ergebnis:

Die Leistung umfasst:

• Persönliche Beratung
• Gründliche Reinigung
• Individuell abgestimmte Behandlung
• Abschließende Pflege

Nummerierte Aufzählung

Wenn du einen bestimmten Ablauf darstellen möchtest, verwendest du <ol> anstelle von <ul>.

HTML-Code:

<ol>
  <li>Gewünschte Dienstleistung auswählen</li>
  <li>Freien Termin auswählen</li>
  <li>Persönliche Angaben eingeben</li>
  <li>Termin verbindlich buchen</li>
</ol>

Ergebnis:

1. Gewünschte Dienstleistung auswählen
2. Freien Termin auswählen
3. Persönliche Angaben eingeben
4. Termin verbindlich buchen

---

6. Schriftfarben und Schriftgrößen anpassen

Mit dem HTML-Attribut style können zusätzliche Formatierungen vorgenommen werden.

Dazu gehören beispielsweise Schriftfarben, Schriftgrößen, Hintergrundfarben oder die Ausrichtung eines Textes.

Beispiel: Individuelle Schriftfarben

HTML-Code:

<p>
<span style="color:green;">Grüner Text</span>
</p>

<p>
<span style="color:#60A92F;">Grüner Text mit HEX-Farbwert</span>
</p>

<p>
<span style="color:#cc0000;">Roter Text mit HEX-Farbwert</span>
</p>

Ergebnis:

Grüner Text

Grüner Text mit HEX-Farbwert

Roter Text mit HEX-Farbwert

Die erste Zeile erscheint grün. Die zweite Zeile wird im individuell festgelegten Grünton #60A92F dargestellt. Die dritte Zeile erscheint rot.

Mit einem sogenannten HEX-Farbwert kannst du die gewünschte Schriftfarbe individuell festlegen. Dadurch lassen sich beispielsweise Farben aus deinem eigenen Corporate Design verwenden.

Beispiel: Schriftgrößen verändern

HTML-Code:

<p>
<span style="font-size:18px;">
Schriftgröße 18 Pixel
</span>
</p>

<p>
<span style="font-size:24px;">
Schriftgröße 24 Pixel
</span>
</p>

Ergebnis:

Die erste Zeile wird mit einer Schriftgröße von 18 Pixeln und die zweite mit 24 Pixeln dargestellt.

Schriftgröße 18 Pixel

Schriftgröße 24 Pixel

Beispiel: Text mit Hintergrundfarbe

HTML-Code:

<p>
<span style="background-color:#eeeeee;">
Dieser Text hat einen hellgrauen Hintergrund.
</span>
</p>

Ergebnis:

Der Text erhält eine hellgraue Hintergrundfläche. Dabei wird nur der Bereich hinter dem Text eingefärbt.

Dieser Text hat einen hellgrauen Hintergrund.

Beispiel: Schriftfarbe und Fettschrift kombinieren

HTML-Code:

<p>
<strong>
<span style="color:#60A92F;">
Jetzt Termin online buchen!
</span>
</strong>
</p>

Ergebnis:

Der Text „Jetzt Termin online buchen!“ wird fett und in der festgelegten grünen Schriftfarbe dargestellt.

Jetzt Termin online buchen!

---

7. Texte unterschiedlich ausrichten

Du kannst Texte linksbündig, zentriert oder rechtsbündig darstellen.

Beispiel: Textausrichtung

HTML-Code:

<p style="text-align:left;">
Linksbündiger Text
</p>

<p style="text-align:center;">
Zentrierter Text
</p>

<p style="text-align:right;">
Rechtsbündiger Text
</p>

Ergebnis:

Die erste Zeile erscheint am linken Rand, die zweite mittig und die dritte am rechten Rand des verfügbaren Textbereichs.

Linksbündiger Text

Zentrierter Text

Rechtsbündiger Text

---

8. Links in Beschreibungstexte einfügen

Du kannst aus einer Dienstleistungsbeschreibung heraus auf weiterführende Informationen oder deine eigene Website verlinken.

Hierfür wird der HTML-Befehl <a> verwendet.

Beispiel: Einfacher Link

HTML-Code:

<a href="https://www.clever-termin.de">
Weitere Informationen
</a>

Ergebnis:

Weitere Informationen

Beispiel: Link in einem neuen Tab öffnen

HTML-Code:

<a href="https://www.clever-termin.de"
   target="_blank"
   rel="noopener noreferrer">
Weitere Informationen
</a>

Ergebnis:

Es erscheint ebenfalls der anklickbare Text „Weitere Informationen“. Beim Anklicken wird die hinterlegte Internetadresse in einem neuen Browser-Tab geöffnet, sofern der Browser dies unterstützt.

Weitere Informationen (öffnet in neuem Tab)

Ersetze einfach die Beispieladresse durch die gewünschte Internetadresse.

---

9. Inhalte nebeneinander darstellen

Gerade bei längeren Dienstleistungsbeschreibungen kann es sinnvoll sein, Informationen auf zwei Spalten zu verteilen.

Hierfür lässt sich beispielsweise ein HTML-Container mit einer sogenannten Flexbox-Formatierung verwenden.

Beispiel: Zweispaltige Leistungsbeschreibung

HTML-Code:

<div style="display:flex; gap:40px;
align-items:flex-start; flex-wrap:wrap;">

  <div style="flex:1; min-width:280px;">

    <p><strong>Die Leistung umfasst:</strong></p>

    <ul>
      <li>Persönliche Beratung</li>
      <li>Gründliche Reinigung</li>
      <li>Individuelle Behandlung</li>
    </ul>

  </div>

  <div style="flex:1; min-width:280px;">

    <p><strong>Außerdem enthalten:</strong></p>

    <ul>
      <li>Abschließende Pflege</li>
      <li>Individuelle Empfehlungen</li>
      <li>Kurzer Pflege-Check</li>
    </ul>

  </div>

</div>

Ergebnis bei ausreichender Bildschirmbreite:

Die Leistung umfasst:	Außerdem enthalten:
• Persönliche Beratung	• Abschließende Pflege
• Gründliche Reinigung	• Individuelle Empfehlungen
• Individuelle Behandlung	• Kurzer Pflege-Check

Die beiden Bereiche werden bei ausreichender Bildschirmbreite nebeneinander dargestellt.

Auf schmaleren Bildschirmen können sie automatisch untereinander angeordnet werden.

Tipp: Besonders bei umfangreicheren Dienstleistungsbeschreibungen lässt sich damit viel Platz sparen. Die zweispaltige Darstellung wurde ebenfalls erfolgreich in clever-termin getestet.

---

10. Komplettes Beispiel einer formatierten Dienstleistungsbeschreibung

Zum Abschluss haben wir eine vollständige HTML-Vorlage vorbereitet.

Du kannst den gesamten Code kopieren und anschließend die Überschrift, die Beschreibung und die einzelnen Leistungen an deine Bedürfnisse anpassen.

HTML-Code:

<h3>Unsere Komplettpflege</h3>

<p>
Gönne dir eine entspannte Behandlung mit individueller
Beratung und professioneller Pflege.
</p>

<div style="display:flex; gap:40px;
align-items:flex-start; flex-wrap:wrap;">

  <div style="flex:1; min-width:280px;">

    <p><strong>Die Leistung umfasst:</strong></p>

    <ul>
      <li>Persönliche Beratung</li>
      <li>Gründliche Reinigung</li>
      <li>Individuell abgestimmte Behandlung</li>
    </ul>

  </div>

  <div style="flex:1; min-width:280px;">

    <p><strong>Außerdem enthalten:</strong></p>

    <ul>
      <li>Abschließende Pflege</li>
      <li>Individuelle Empfehlungen</li>
      <li>Kurzer Pflege-Check</li>
    </ul>

  </div>

</div>

<p>
<strong>Wichtiger Hinweis:</strong><br>
Bitte erscheine möglichst 5 Minuten vor deinem Termin.
</p>

<p><small>
Die Behandlungsdauer kann je nach individuellem
Aufwand leicht variieren.
</small></p>

Ergebnis (schematische Vorschau):

Unsere Komplettpflege

Gönne dir eine entspannte Behandlung mit individueller Beratung und professioneller Pflege.

Die Leistung umfasst:	Außerdem enthalten:
• Persönliche Beratung	• Abschließende Pflege
• Gründliche Reinigung	• Individuelle Empfehlungen
• Individuell abgestimmte Behandlung	• Kurzer Pflege-Check

Wichtiger Hinweis:
Bitte erscheine möglichst 5 Minuten vor deinem Termin.

Die Behandlungsdauer kann je nach individuellem Aufwand leicht variieren.

---

11. Tipps für gut lesbare Beschreibungstexte

Damit deine Beschreibungen nicht nur optisch ansprechend, sondern auch für deine Kunden verständlich sind, empfehlen wir:

• Verwende kurze und aussagekräftige Überschriften.
• Beschreibe den Leistungsumfang möglichst verständlich.
• Nutze Aufzählungen für mehrere Einzelleistungen.
• Hebe wichtige Hinweise gezielt mit Fettschrift hervor.
• Vermeide zu viele unterschiedliche Schriftgrößen und Farben.
• Prüfe nach dem Speichern, wie die Beschreibung in der tatsächlichen Buchungsansicht dargestellt wird.
• Kontrolliere die Darstellung nach Möglichkeit auch auf einem Smartphone.

Unser Tipp: Speichere dir eine einmal erstellte HTML-Vorlage ab. Für weitere Dienstleistungen musst du dann lediglich die Überschrift und Inhalte austauschen, während die Formatierung erhalten bleibt.

Hinweis zur HTML-Unterstützung in clever-termin

Die hier aufgeführten HTML-Beispiele wurden in den Dienstleistungsbeschreibungen von clever-termin getestet. Neben einfachen Textformatierungen werden auch individuelle Schriftfarben, Schriftgrößen, Textausrichtungen und mehrspaltige Layouts unterstützt.

Auch auf Seiten mit integriertem Texteditor, beispielsweise dem Impressum, kann HTML verwendet werden. Achte hier darauf, den Code über die Schaltfläche <> in der Quellcodeansicht einzufügen.

Je nach Eingabebereich und verwendetem Design kann sich die Darstellung unterscheiden. Prüfe deine Änderungen deshalb immer nach dem Speichern.

---

Fazit: Mit wenigen HTML-Befehlen kannst du deine Inhalte in clever-termin übersichtlich und professionell gestalten – ganz ohne umfangreiche Programmierkenntnisse.