Schreiben & Bearbeiten

Visueller Editor

Die Schritte in diesem Ratgeber beziehen sich auf den klassischen Editor. Wenn du unseren neuen Block-Editor verwendest, sieh dir diesen Ratgeber an.

Info zum visuellen Editor

Mit dem visuellen Editor kannst du deine Inhalte ähnlich wie in einem Textverarbeitungsprogramm erstellen, bearbeiten und formatieren.

Um sicherzustellen, dass dir nicht die HTML-Ansicht des Beitrags oder der Seite angezeigt wird, wähle oben rechts im Editorbereich den Tab Visuell aus, wie unten dargestellt.

Visueller Tab – Editor
Stelle sicher, dass du dich auf dem Tab „Visuell“ befindest

Im visuellen Editor gibt es zwei Zeilen mit Bearbeitungsbuttons. Wofür die einzelnen Buttons verwendet werden, kannst du sehen, wenn du den Mauszeiger darüber bewegst. Es wird ein kleiner Tooltip mit einer Beschreibung des Icons und dessen Funktion angezeigt.

Der Inhalt des visuellen Editors wird durch das CSS (eine Art von Code, die HTML-Eigenschaften wie Farbe, Leerzeichen, Breite etc. ermöglicht) des Themes formatiert, für das du dich entscheidest. Was du im Editor siehst, stimmt möglicherweise nicht genau mit der Live-Website überein. Verwende bitte den Button Vorschau anzeigen, um zu prüfen, wie der Beitrag oder die Seite auf der Live-Website angezeigt wird.


↑ Inhaltsverzeichnis ↑

Erste Zeile mit Bearbeiten-Buttons

Wenn der visuelle Editor zum ersten Mal geöffnet wird, wird eine einzelne Zeile mit Icons angezeigt:

Abbildung der Icons in Zeile 1 der Toolbar im visuellen Editor
Bearbeiten-Buttons in der ersten Zeile: unten findest du eine Erläuterung der einzelnen Optionen
  1. Medien hinzufügen
  2. Stil: verschiedene Formatierungsstile, die durch dein Theme bestimmt werden
  3. Fett
  4. Kursiv
  5. Unsortierte Liste (Aufzählungspunkte):
    • Element 1
    • Element 2
  6. Sortierte Liste
    1. Element 1
    2. Element 2
  7. Zitat (eine Möglichkeit zur Darstellung von Zitaten; je nach Theme werden Zitate unterschiedlich formatiert)
  8. Linksbündig
  9. Zentrieren
  10. Rechtsbündig
  11. Einfügen-/Bearbeiten-/Entfernen-Link
  12. „Mehr“-Tag einfügen
  13. Toolbar-Schalter (hiermit wird die zweite Zeile der Bearbeitungs-Icons aktiviert)
  14. Kontaktformular hinzufügen

↑ Inhaltsverzeichnis ↑

Zweite Zeile mit Bearbeiten-Buttons

Um die zweite Zeile mit Buttons anzuzeigen, wähle rechts neben der ersten Zeile das Icon Toolbar-Schalter (Button mit der Nummer 13 oben) aus. Daraufhin wird eine zweite Toolbar geöffnet, die folgendermaßen aussieht:

Abbildung der 2. Zeile mit Toolbar-Icons im visuellen Editor
Bearbeiten-Buttons in der zweiten Zeile: unten findest du eine Erläuterung der einzelnen Optionen
  1. Durchgestrichen
  2. Waagerechte Linie
  3. Textfarbe auswählen – Textfarbe ändern
  4. Als Text einfügen
  5. Formatierung löschen
  6. Sonderzeichen einfügen
  7. Ausrücken: Text weiter nach links verschieben
  8. Einrücken: Text weiter nach rechts verschieben
  9. Rückgängig: deine letzte Aktion rückgängig machen
  10. Wiederholen: deine letzte Aktion wiederholen
  11. Hilfe: Tastaturkürzel anzeigen.

↑ Inhaltsverzeichnis ↑

Ausrichtung

Sowohl Text als auch Bilder können mit den entsprechenden Icons ausgerichtet werden:

Links

Linksbündig
Linksbündig

Rechts

Rechtsbündig
Rechtsbündig

Mitte

Zentrieren
Zentrieren

↑ Inhaltsverzeichnis ↑

Stile

Mithilfe des Dropdown-Menüs „Stile“ kannst du die Formatierung des ausgewählten Texts ändern. Es umfasst verschiedene Überschriften und andere vordefinierte Stile, die in dein Theme integriert sind.

Beachte, dass für weitergehende Änderungen ein Individuelles CSS (und entsprechendes CSS-Knowhow) erforderlich ist.

Textstile im visuellen Editor
Textstile im visuellen Editor

↑ Inhaltsverzeichnis ↑

Schriftfarbe

Um die Textfarbe zu ändern, musst du zuerst einen Textabschnitt markieren:

Wenn du auf den Abwärtspfeil neben dem Textfarbe-Button klickst, wird ein Farbauswahl-Menü angezeigt. Wenn das Farbauswahlmenü geöffnet ist, zeigt der Pfeil nach oben. Du kannst darauf klicken, um das Menü zu schließen, ohne eine Farbe auszuwählen:

Abbildung der Option zur Farbauswahl

Wenn du eine Farbe auswählst, wird diese Farbe auf den ausgewählten Text angewendet und zur Standardfarbe für den Farb-Button gemacht.

Wenn du auf den Textfarbe-Button selbst klickst, wird die letzte Standardfarbe angewendet.

Abbildung des Buttons für die Standardfarbauswahl

Einfügen von Text

Wenn du Text von einer anderen Stelle kopieren und einfügen möchtest, wirst du vielleicht feststellen, dass er nicht immer genau wie erwartet dargestellt wird. Das liegt daran, dass beim Einfügen aus einem anderen Programm (z. B. einem E-Mail- oder Textverarbeitungsprogramm) unerwünschte Formatierungen übernommen werden können.

Wenn du den Button „Als Text einfügen“ verwendest, wird ein spezieller Bereinigungsvorgang durchgeführt, um Sonderformatierungen und HTML-Tags zu entfernen, die andernfalls die Formatierung deines Textes ändern können.

Unten siehst du, wie die Toolbar im Modus „Reiner Text aus“ aussieht. Beachte, dass sie nicht umrandet ist:

Abbildung des Buttons „Als Text einfügen“, wenn nicht aktiv

Unten siehst du, wie die Toolbar im Modus „Reiner Text ein“ aussieht. Beachte, dass das Icon jetzt umrandet ist und dass der Button schwarz schattiert ist:

Abbildung des Buttons „Als Text einfügen“, wenn

↑ Inhaltsverzeichnis ↑

Formatierung entfernen

Button zum Entfernen von Formatierungen

Mit dem Button „Formatierung entfernen“ wird die gesamte Formatierung (fett, kursiv, Farben usw.) aus dem markierten Textabschnitt gelöscht. Wähle zuerst deinen Text aus:

Abbildung von formatiertem Text

Durch Klicken auf den Button wird die gesamte Formatierung entfernt:

Abbildung eines Texts, nachdem auf den Button „Formatierung entfernen“ geklickt wurde

↑ Inhaltsverzeichnis ↑

Individuelle Zeichen

Du kannst in deinen Beitrag oder deine Seite Sonderzeichen einfügen. Positioniere den Cursor an der Stelle, an der du ein Zeichen einfügen möchtest, und klicke auf den Button zum Einfügen individueller Zeichen. Ein Popup-Fenster wird angezeigt:

Abbildung von Sonderzeichen

Klicke auf ein beliebiges Zeichen, um es an deiner Cursorposition einzufügen.


Ausrücken/Einrücken

Mit dem Einrücken-Button wird Text um eine Ebene eingerückt und mit dem Ausrücken-Button wird eine Ebene entfernt.

Ausrücken-Beispiel
Einrücken-Beispiel

↑ Inhaltsverzeichnis ↑

Leerzeichen

Wenn du die Eingabetaste (Enter-Taste) drückst, wird der von dir verfasste Absatz beendet und ein neuer begonnen. Wenn du eine neue Zeile beginnen möchtest, ohne einen neuen Absatz zu erstellen, halte die Umschalttaste gedrückt, während du gleichzeitig die Eingabetaste drückst.


Tastaturkürzel

Der visuelle Editor verfügt über mehrere integrierte Tastaturkürzel oder Hotkeys.

Um eine Liste aller verfügbaren Tastaturkürzel anzuzeigen, klicke auf den Toolbar-Schalter, um die zweite Zeile mit Icons anzuzeigen, und klicke dann auf das Icon Tastaturkürzel (Fragezeichen) am Ende der zweiten Zeile.

Ein Fenster mit einer Liste der im Editor verfügbaren Tastaturkürzel wird geöffnet.

Abbildung von Tastaturkürzeln

Um die standardmäßigen Tastaturkürzel zu verwenden, drücke Befehl + Taste auf einem Mac bzw. STRG + Taste auf einem Windows-Computer:

TasteAktionTasteAktion
cKopierenxAusschneiden
vEinfügenaAlle auswählen
zRückgängigyWiederholen
bFettiKursiv
uUnterstreichenkLink einfügen/ändern

Für zusätzliche Tastaturkürzel drücke STRG + Option + Taste auf einem Mac bzw. STRG + ALT + Taste auf einem Windows-Computer:

TasteAktionTasteAktion
1Überschrift 12Überschrift 2
3Überschrift 34Überschrift 4
5Überschrift 56Überschrift 6
lLinksbündigcZentrieren
rRechtsbündigjIm Blocksatz ausrichten
dDurchgestrichenqZitat
uAufzählungslisteoNummerierte Liste
aLink einfügen/ändernsLink entfernen
mBild einfügen/änderntWeiterlesen-Tag einfügen
hTastaturkürzelxCode
pTag für Seitenumbruch einfügen
Still confused?

Contact support.