00 – Dokumentation Spreadmind

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:

1. Wechsle im Editor in die Text-Ansicht (Reiter rechts oben)
2. Setze den Cursor an die gewünschte Stelle
3. 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

1. Wechsle im Editor in die Text-Ansicht (Reiter rechts oben)
2. Setze den Cursor an die gewünschte Stelle, an der die linke Box beginnen soll
3. 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">

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

5. Wiederhole diesen Vorgang für „Box Right“ – ersetze die Klasse box-left durch box-right:

   <div class="box-float box-right">

6. Füge das schließende End-Tag an der Stelle ein, an der die rechte Box aufhören soll (siehe Punkt 4)
7. 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

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.

1. Erstelle eine ungeordnete Aufzählung (engl. unordered list) mit Klick auf dieses Symbol: 
2. Erstelle nun verschiedene Aufzählungspunkte
3. 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>

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

5. Möchtest du ein grünes Häkchen, ersetzt du die Klasse icon-white einfach durch icon-green:

   <ul class="check icon-green">
   ...

6. Für ein rotes Häkchen:

   <ul class="check icon-red">

7. Für ein hell-graues Häkchen:

   <ul class="check icon-grey">

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