Der WYSIWYG-Editor (What You See Is What You Get) von Pixpa bietet eine leistungsstarke und intuitive Benutzeroberfläche zum Hinzufügen und Formatieren von Inhalten auf Seiten, Blogs und anderen Bereichen Ihrer Website. Mit dem neuesten Update wurde der Editor deutlich verbessert und bietet nun neue Inhaltselemente, KI-gestützte Schreibwerkzeuge, optimierte Layoutoptionen und interaktive Formatierungsfunktionen.

Dieser Leitfaden führt Sie durch die Benutzeroberfläche des Editors , erklärt Ihnen die Nutzung seiner Funktionen und zeigt Ihnen, wie Sie Inhalte für Ihre Website optimieren können.

In diesem Artikel:

• Plus (+) Taste
• KI-Tools
• Format – Schriftstil ändern
• Fett / Kursiv
• Linie – Fügen Sie eine Linie hinzu
• Weitere Formatierungsoptionen
• Ausrichtung
• Textfarbe
• Liste – Aufzählungszeichen / Nummeriert
• Link – Links hinzufügen
• Bild – Bilder hinzufügen
• emoji
• Tabelle – Tabellen hinzufügen
• Inhaltsverzeichnis einfügen
• Moderator
• HTML-Code-Ansicht
• Abschnittsspezifische Optionen

---

Hinzufügen von Elementen mit der Schaltfläche „+“

Eine der größten Verbesserungen im neuen Editor ist die Schaltfläche „+“ , die ein Menü mit einer Vielzahl von Inhaltselementen öffnet, die in den Textbereich eingefügt werden können.

Unter der Schaltfläche „+“ verfügbare Elemente:

• KI-Tools: Nutzen Sie KI-gestützte Schreibhilfen zum Generieren von Inhaltsideen, zum Umschreiben von Texten oder zum schnellen Erstellen von Inhalten. Mehr erfahren.
• Text: Fügen Sie Standardabsatztext hinzu.
• Überschrift: Fügen Sie verschiedene Überschriftenebenen ein (H1, H2, H3 usw.) für eine bessere Inhaltshierarchie.
• Bild: Laden Sie Bilder hoch und fügen Sie sie direkt in den Text ein.
  • Sie können Bilder hochladen oder die Bilder durch Eingabe einer URL einfügen.
• Aufgabenliste: Erschaffung Checklisten mit interaktiven Kontrollkästchen.
• Liste: Speichern Stichpunkte or nummerierte Listen für strukturierte Inhalte.
• Einbetten: Einfügen von externen Inhalten wie Videos, Karten, Audiodateien und Iframes.
• Table: Fügen Sie Tabellen für eine strukturierte Datendarstellung hinzu. Unter der Option „Tabelle“ finden Sie die folgenden zusätzlichen Optionen.
  • Kopf hinzufügen – Fügt oben in der Tabelle eine Kopfzeile ein, die für Spaltentitel verwendet werden kann.
  • Spalte hinzufügen vor – Fügt links von der ausgewählten Spalte eine neue Spalte hinzu.
  • Spalte hinzufügen nach – Fügt rechts neben der ausgewählten Spalte eine neue Spalte hinzu.
  • Zeile unten hinzufügen – Fügt unterhalb der ausgewählten Zeile eine neue Zeile ein.
  • Zeile darüber hinzufügen – Fügt über der ausgewählten Zeile eine neue Zeile ein.
  • Kopf entfernen – Entfernt die Kopfzeile aus der Tabelle.
  • Spalte entfernen – Löscht die ausgewählte Spalte.
  • Zeile entfernen – Löscht die ausgewählte Zeile.
  • Tabelle löschen – Entfernt die gesamte Tabelle aus dem Editor.
• Zitat: Markieren Sie Text als Blockzitat zur Hervorhebung. Dadurch wird ein separater Textblock mit einer vertikalen Linie auf der linken Seite erstellt, der ihn optisch vom Rest des Inhalts trennt, um zitierten Text hervorzuheben.
• Code-Auszug: Einfügen und formatieren HTML, CSS, JavaScript oder andere Programmiersprachen innerhalb des Inhalts.
• Line: Hinzufügen horizontale Trennlinie um Inhaltsabschnitte zu trennen.

• Layout: Mit der Layout- Option können Sie Inhalte in horizontalen Blöcken über mehrere Abschnitte hinweg organisieren. Dies ermöglicht eine flexible Strukturierung und eine bessere visuelle Hierarchie auf Ihrer Webseite. Im Folgenden finden Sie die wichtigsten Funktionen:

  • Mehrspaltige Layouts: Wählen Sie zwischen einer, zwei, drei oder vier Spalten, um Inhalte auf unterschiedliche Weise anzuordnen.
  • Benutzerdefinierte Split-Verhältnisse: Wählen Sie vordefinierte Verhältnisse wie 60/40 oder 40/60, um die Breite jedes Abschnitts zu steuern.
  • Verschachtelte Blöcke: Sie können einen Block auswählen und darin mehrere separate Blöcke zur besseren Organisation erstellen.
• Verpackung: Gruppieren Sie mehrere Elemente für eine bessere Organisation.
• Inhaltsverzeichnis einfügen: Erstellen Sie ein Inhaltsverzeichnis basierend auf Dokumentüberschriften, um die Navigation zu erleichtern. Es ist nützlich für Blogs, Tutorials und lange Artikel, da Leser schnell zu den Abschnitten springen können.

Dieser modulare Ansatz ermöglicht es, das Layout einfach anzupassen und verschiedene Inhaltselemente effizient hinzuzufügen.

---

KI-Tools

Mit der KI-Tools-Funktion im Pixpa-Texteditor können Sie Ihre Inhalte mithilfe von KI optimieren. Hier sind die verfügbaren Optionen:

• Umformulieren – Ändern Sie den ausgewählten Text, ohne die ursprüngliche Bedeutung zu verändern. Dies verbessert die Lesbarkeit oder ermöglicht es Ihnen, Sätze für mehr Klarheit umzuformulieren.
• Verkürzen – Verdichten Sie den ausgewählten Text, um ihn prägnanter zu gestalten und gleichzeitig die wichtigsten Informationen beizubehalten.
• Verlängern – Erweitern Sie den ausgewählten Text durch Hinzufügen relevanter Details, um ihn aussagekräftiger und informativer zu gestalten.
• Vereinfachen – Schreiben Sie den Text in einfacherer Sprache neu, damit er leichter verständlich ist und gleichzeitig die ursprüngliche Absicht erhalten bleibt.
• Richtige Grammatik – Überprüfen und korrigieren Sie automatisch Grammatikfehler im ausgewählten Text, um dessen Genauigkeit und Lesbarkeit zu verbessern.
• Übersetzen – Übersetzen Sie den ausgewählten Text in eine andere Sprache, sodass Sie mühelos mehrsprachige Inhalte erstellen können.

Diese KI-gestützten Funktionen tragen dazu bei, die Inhaltserstellung zu optimieren und sie schneller und effizienter zu machen.

---

Format – Schriftstil ändern

Sie können auf Ihrer Website verschiedene Schriftarten (gleichzeitig) verwenden, die im Bereich „Design“ festgelegt werden . Dies ist ein einheitlicher Designstil, der auf der gesamten Website verwendet wird.

Alle Schriftarten werden im Designbereich festgelegt . Sie können auch auf „Schriftarten verwalten“ klicken . Dies ist die letzte Option im Dropdown-Menü, wenn Sie auf die Schaltfläche „Text“ klicken . Dort können Sie die folgenden Schriftarten anzeigen und festlegen sowie Schriftschnitt, Größe, Farbe, Stärke, Zeilenhöhe und Buchstabenabstand bearbeiten:

• Unterwegs 1
• Unterwegs 2
• Unterwegs 3
• Unterwegs 4
• Absatztext (klein und groß)
• Überschrift 1 Extra Groß

Hier ist ein Screenshot des Stils von Überschrift 1. Sie können hier auch die anderen Absatzschriften für Überschriften bearbeiten.

Sobald Sie den Schriftstil im Designbereich angegeben haben, können Sie ihn effizient auf der gesamten Website verwenden. Wählen Sie einfach den Text aus und wenden Sie die Formatierung an. Das System wendet automatisch die Schriftfarbe, -größe und -stärke dieses bestimmten Stils auf den ausgewählten Text an. Sie können dasselbe auf der Website überprüfen.

---

Fett/Kursiv

• BOLD – Hervorgehobener Text wird fett dargestellt, wenn darauf geklickt wird. In HTML verwendet dies ein Tag.
• Italic – Hervorgehobener Text wird kursiv, wenn darauf geklickt wird. In HTML verwendet dies das

---

Linie – Fügen Sie eine Linie hinzu

Im Editor können Sie eine horizontale Linie einfügen. Klicken Sie auf dieses Symbol, um an der Cursorposition eine Linie einzufügen.

---

Weitere Formatierungsoptionen

Das Menü „Weitere Formatierung“ im Pixpa-Texteditor bietet zusätzliche Textformatierungsoptionen, um das Erscheinungsbild und die Struktur Ihres Inhalts zu verbessern. Die einzelnen Optionen haben folgende Auswirkungen:

• Code – Formatiert den ausgewählten Text als Inline-Code oder Code-Ausschnitt. Dies ist nützlich für die Anzeige von Programmier- oder technischen Inhalten.
• unterstreichen – Fügt dem ausgewählten Text zur Hervorhebung eine Unterstreichung hinzu.
• Moderator – Fügt dem ausgewählten Text einen benannten Anker hinzu. So können Sie interne Links erstellen, die direkt zu diesem Abschnitt auf derselben Seite führen. Nützlich für die Erstellung von Inhaltsverzeichnissen oder die Seitennavigation.
• Überschrift – Zeigt den ausgewählten Text etwas oberhalb der normalen Textgrundlinie an (z. B. X²). Wird häufig für mathematische Ausdrücke und Fußnoten verwendet.
• Index – Zeigt den ausgewählten Text etwas unterhalb der normalen Textgrundlinie an (z. B. H₂O). Nützlich für chemische Formeln und andere spezielle Notationen.
• Hervorheben – Hebt den ausgewählten Text mit einer Hintergrundfarbe hervor, um die Aufmerksamkeit auf wichtige Inhalte zu lenken.
• Gelöschte – Durchstreicht den ausgewählten Text, um Löschungen oder Korrekturen anzuzeigen.
• Alle Stile löschen – Entfernt alle angewendeten Formatierungen aus dem ausgewählten Text und stellt den Standardstil wieder her.

---

Ausrichtung

Sie können Ihren Text links, rechts, zentriert und im Blocksatz ausrichten. Wählen Sie den Text aus und wählen Sie die Ausrichtung aus der Dropdown-Liste.

---

Textfarbe

Standardmäßig verwendet das System die im Designbereich festgelegte Schriftfarbe . Sie können die globale Farbe jedoch mit diesem Werkzeug überschreiben. Markieren Sie den Text und klicken Sie auf das Farbsymbol. Daraufhin wird eine Standardfarbpalette zur Auswahl angezeigt.

Darüber hinaus können Sie hier auch eine Hintergrundfarbe für den ausgewählten Text festlegen.

Hinweis: Sie können jede andere benutzerdefinierte Farbe, die nicht in der Farbpalette der Option „Farbe festlegen“ verfügbar ist , durch Eingabe des Hex-Codes der Farbe angeben.

---

Liste

Sie können Ihren Text ganz einfach in Listen mit Einrückungen umwandeln, um sie zu organisieren.

• Aufzählung – Hervorgehobener Text wird wie eine Aufzählung formatiert. In HTML verwendet dies eine Reihe von und Stichworte.
• Nummerierte Liste – Hervorgehobener Text wird wie eine nummerierte Liste formatiert. In HTML verwendet dies eine Reihe von und Stichworte.

---

Link – Fügen Sie Ihrem Text einen Link hinzu

Mit dem Editor können Sie einen Link zu einem beliebigen Text einfügen. Sie können Ihre bestehenden Website-Seiten oder andere Websites/Blogs/PDFs usw.

Wenn Sie Text hervorheben und auf diese Schaltfläche klicken, wird ein kleines modales Fenster geöffnet, in dem Sie die Ziel-URL eingeben, auswählen können, ob es in einem neuen Fenster geöffnet werden soll oder nicht, oder auf eine andere Seite auf der eigenen Website verlinken möchten. In HTML ist das verwendete Tag Link Text

---

Bild – Fügen Sie ein Bild hinzu

Mit der Option „Bild hinzufügen“ im Pixpa-Texteditor können Sie Ihren Inhalten ganz einfach Bilder hinzufügen. Egal, ob Sie Bilder von Ihrem Gerät hochladen oder über eine URL einfügen möchten – diese Funktion bietet Ihnen eine nahtlose Möglichkeit, Ihre Beiträge mit visuellen Elementen aufzuwerten.

• Bild über URL einfügen – Sie können die URL eines Bildes einfügen und auf die Schaltfläche „Einfügen“ klicken, um es direkt zur Seite hinzuzufügen.
• Bild vom Gerät hochladen – Sie können ein Bild per Drag & Drop in das dafür vorgesehene Upload-Feld ziehen oder in das Feld klicken, um ein Bild von Ihrem Gerät auszuwählen.

---

emoji

Mit der Emoji-Option im Pixpa-Texteditor können Sie Ihre Inhalte mit einer Vielzahl von Emojis aufwerten. Emojis können verwendet werden, um Ihren Inhalten mehr Ausdruckskraft zu verleihen, Akzente zu setzen oder Emotionen auf unterhaltsame und kreative Weise zu vermitteln.

---

Tisch

Mit der Option „Tabelle“ können Sie Tabellen direkt in den Texteditor einfügen. Nach dem Hinzufügen können Sie Struktur und Inhalt der Tabelle mithilfe verschiedener Formatierungsoptionen anpassen.

Optionen zur Tabellenbearbeitung:

• Kopf hinzufügen – Fügt oben in der Tabelle eine Kopfzeile hinzu, um Spaltentitel hervorzuheben.
• Spalte hinzufügen vor – Fügt links neben der ausgewählten Spalte eine neue Spalte ein.
• Spalte hinzufügen nach – Fügt rechts neben der ausgewählten Spalte eine neue Spalte ein.
• Zeile unten hinzufügen – Fügt eine neue Zeile unterhalb der ausgewählten Zeile ein.
• Zeile darüber hinzufügen – Fügt eine neue Zeile über der ausgewählten Zeile ein.
• Kopf entfernen – Entfernt die Tabellenüberschrift, falls eine hinzugefügt wurde.
• Spalte entfernen – Löscht die ausgewählte Spalte aus der Tabelle.
• Zeile entfernen – Löscht die ausgewählte Zeile aus der Tabelle.
• Tabelle löschen – Entfernt die Tabelle vollständig aus dem Editor.

---

Inhaltsverzeichnis einfügen

Erstellen Sie ein Inhaltsverzeichnis basierend auf Dokumentüberschriften, um die Navigation zu erleichtern. Es ist nützlich für Blogs, Tutorials und lange Artikel, da Leser schnell zu den Abschnitten springen können.

---

Moderator

Mit dem Anker-Tool können Sie einem Abschnitt oder Absatz Ihres Beitrags eine eindeutige HTML-ID hinzufügen. Dies ist nützlich, um interne Seitenlinks (Sprunglinks) zu erstellen, mit denen Besucher durch Anklicken eines Links direkt zu einem bestimmten Teil der Seite gelangen.

Wie man es benutzt:

1. Klicken Sie irgendwo in den Absatz oder Abschnitt, den Sie verankern möchten.
2. Klicken Sie in der Symbolleiste auf das Ankersymbol.
3. Es erscheint ein Popup mit dem Titel "Anker".
4. Im „ID hinzufügen oder ändern“ Geben Sie in das Feld eine eindeutige ID ein (z. B. paragraph-2).
5. Klicken Sie auf Gespeichert.

Wichtig:

• Die ID sollte sein Kleinenthalten kein Platzund verwenden Bindestriche wenn benötigt.
• Sobald Sie diesen Anker gesetzt haben, können Sie ihn mit #your-id am Ende Ihrer URL.
  • Ejemplo: https://yourwebsite.com/page#paragraph-2

Diese Funktion eignet sich hervorragend für lange Beiträge oder Artikel mit einem Inhaltsverzeichnis, da sie es den Lesern ermöglicht, schnell zu bestimmten Abschnitten zu navigieren.

---

HTML-Code-Ansicht

Das Editorfenster kann als visueller Editor (WYSIWYG) oder als HTML-Editor fungieren.

Sie können jedoch zum HTML-Editor wechseln, indem Sie darauf klicken. Sie können alles in der Codeansicht ändern, wenn Sie wissen, wie es geht, oder Sie können auch das Pixpa-Supportteam anpingen, wenn Sie Hilfe benötigen.

---

Abschnittsspezifische Optionen

Jeder Abschnitt im Texteditor bietet zusätzliche Anpassungsmöglichkeiten, mit denen Sie Aussehen und Funktionalität anpassen können. Sie erreichen diese Einstellungen, indem Sie auf die beiden horizontalen Linien neben dem Abschnitt klicken. Daraufhin öffnet sich ein Dropdown-Menü mit verschiedenen Steuerelementen.

• Speichern – Fügen Sie unter dem aktuellen einen neuen Inhaltsblock ein, um schnell weiteren Text, Bilder oder andere Elemente hinzuzufügen.
• Format – Ermöglicht Ihnen, zwischen verschiedenen Textblockstilen wie Absatz, Überschrift oder Zitat zu wechseln.

• Moderator – Fügt dem Block eine Anker-ID hinzu, sodass Sie Links auf der Seite erstellen können, die direkt zu diesem Abschnitt springen.
• Nach oben/Nach unten verschieben – Ordnen Sie die Position des Abschnitts innerhalb Ihres Inhalts neu an, indem Sie ihn nach oben oder unten verschieben.
• Farbe, – Ändern Sie die Textfarbe für den ausgewählten Block.
• Hintergrundfarbe – Legen Sie zur Hervorhebung oder für den Kontrast eine Hintergrundfarbe hinter dem Text im Block fest.
• Grenze – Fügen Sie Rahmen um den Abschnitt hinzu oder ändern Sie diese, um Ihren Inhalt effektiver zu strukturieren.

• Abstand – Passt die Polsterung um den Block an, einschließlich der Ober-, Unter- und Seitenflächen, sodass Sie den Abstand und das Layout präziser steuern können.

• Duplikat – Klonen Sie den Abschnitt, um die Konsistenz der Formatierung und Struktur in verschiedenen Teilen Ihres Inhalts beizubehalten.
• Löschen – Entfernen Sie den Abschnitt vollständig, wenn er nicht mehr benötigt wird.

Mit diesen Einstellungen haben Sie die volle Kontrolle über die Inhaltsstruktur und können so ein gut organisiertes und optisch ansprechendes Layout gewährleisten.

---

Fazit

Der Pixpa WYSIWYG-Editor bietet ein modernes, funktionsreiches und intuitives Benutzererlebnis beim Bearbeiten von Inhalten. Dank verbesserter Inhaltselemente, KI-Tools, Medieneinbettung und strukturierter Formatierung ist das Erstellen ansprechender Seiten und Blogbeiträge jetzt effizienter denn je.

Durch die Nutzung dieser Funktionen können Sie Ihre Inhalte verbessern , die Nutzerinteraktion steigern und ein nahtloses Website-Erlebnis schaffen.