Hallo Angelika,
auf dieser Seite findest du alle wichtigen Infos bzgl. HTML-Codes und weiteres.
Umbruch generieren
Wenn Bilder in den Text eingefügt und diese links- oder rechtsbündig ausgerichtet werden, fließt der gesamte restliche Text (Copy-Text, Überschriften, Trennlinien, weitere Bilder etc.) um dieses Bild herum. Auch, wenn du den Text durch mehrere Absätze trennst. Dies ist aber nicht immer gewollt – wie z. B. auf der Seite „Produkte“. Um einen Umbruch zu generieren, gehst du folgendermaßen vor:
- Wechsle im Editor in die Text-Ansicht (Reiter rechts oben)
- Setze den Cursor an die gewünschte Stelle
- Füge diesen HTML-Code „Floatkiller“ (float, engl. = fließen) über Str+C und Strg+V an die gewünschte Stelle ein:
<div class="floatkiller"></div>
Das sieht dann so aus:
// Screenshot
Box links und rechts nebeneinander stellen
- Wechsle im Editor in die Text-Ansicht (Reiter rechts oben)
- Setze den Cursor an die gewünschte Stelle, an der die linke Box beginnen soll
- Füge diesen HTML-Code für „Box Left“ über Str+C und Strg+V an die Stelle ein:
<div class="box-float box-left">
- Setze nun den Cursor an die Stelle, an der die linke Box aufhören soll und füge das schließende End-Tag ein:
</div>
- Wiederhole diesen Vorgang für „Box Right“ – ersetze die Klasse box-left durch box-right:
<div class="box-float box-right">
- Füge das schließende End-Tag an der Stelle ein, an der die rechte Box aufhören soll (siehe Punkt 4)
- Direkt danach platzierst du den Floatkiller, um ein weiteres Umfließen der darauffolgenden Elemente zu verhindern (siehe Umbruch generieren) // Ankerpunkt setzen //
Beispiel:
// Screenshot Ansicht Text-Editor und Live-Ausgabe
Hier steht ein Blindtext.
Hier steht ein Blindtext.
Innerhalb dieser div-Container <div> … </div> kannst du weiterhin deinen Text beliebig mit Headlines, Bildern, Zitaten etc. formatieren und gestalten.
Aufzählung mit einem vorangestellten Check-Icon
Beispiel: Aufzählung mit grünem Check-Icon
- Aufzählungspunkt 1
- Aufzählungspunkt 2
- Aufzählungspunkt 3
- usw.
- Erstelle eine ungeordnete Aufzählung (engl. unordered list) mit Klick auf dieses Symbol:
- Erstelle nun verschiedene Aufzählungspunkte
- Wechsle in die Text-Ansicht deines Editors und gehe mit dem Cursor zu deiner erstellten Aufzählung. Diese ist folgendermaßen aufgebaut:
<ul> <li>Aufzählungspunkt 1</li> <li>Aufzählungspunkt 2</li> <li>Aufzählungspunkt 3</li> <li> ... usw. ...</li> </ul>
- Bei dem beginnenden ul-Tag fügst du die Klasse <class=“check icon-white“> hinzu, um die Aufzählungspunkte durch ein weißes Häkchen (engl. check mark) zu ersetzen:
<ul class="check icon-white"> <li>Aufzählungspunkt 1</li> <li>Aufzählungspunkt 2</li> <li>Aufzählungspunkt 3</li> <li> ... usw. ...</li> </ul>
- Möchtest du ein grünes Häkchen, ersetzt du die Klasse icon-white einfach durch icon-green:
<ul class="check icon-green"> ...
- Für ein rotes Häkchen:
<ul class="check icon-red">
- Für ein hell-graues Häkchen:
<ul class="check icon-grey">
- Und für ein dunkel-graues Häkchen:
<ul class="check icon-grey-dark">
Du wirst in der Visuellen-Ansicht deines Editors die Häkchen nicht sehen können, dafür aber in der Live-Ansicht deiner Webseite.