Verwendung des Rich-Text-Editors für Inhalte

Du kannst den Rich-Text-Editor von Shopify verwenden, um die Inhalte zu formatieren und zu gestalten, die in deinem Onlineshop angezeigt werden.

Verwendungsorte für den Rich-Text-Editor

Du kannst den Rich-Text-Editor verwenden, um an verschiedenen Stellen in deinem Shop Text hinzuzufügen oder zu bearbeiten:

• Produktbeschreibungen
• Kollektionsbeschreibungen
• Blog-Beiträge
• Seiten
• Shop-Richtlinien

Wenn du ein kompatibles Theme verwendest, kannst du mit dem Theme-Editor Rich-Text-Abschnitte zu deinen Seiten oder Vorlagen hinzufügen.

HTML-Inhalt mit dem Rich-Text-Editor hinzufügen

Du kannst mit dem Rich-Text-Editor HTML-Inhalte für deine Blog-Beiträge, Seiten, Produktbeschreibungen und Kollektionsbeschreibungen eingeben.

Klicke auf die Schaltfläche , um den HTML-Code für den Inhalt im Rich-Text-Editor anzuzeigen.

In der HTML-Ansicht kannst du viele Änderungen am Inhalt im Rich-Text-Editor vornehmen. Du kannst Bilder, Videos oder Tabellen mit HTML hinzufügen und das Layout und den Inhaltsstil debuggen oder optimieren.

Ein Medien-Widget einbetten

Wenn du ein Video- oder Musik-Widget einbetten möchtest, musst du es zuerst auf einem Dienst wie Youtube, Vimeo oder SoundCloud hosten. Diese Dienste generieren einen Einbettungscode, den du kopieren und in den Rich-Text-Editor deines Shopify-Adminbereichs einfügen kannst.

Schritte:

1. Suche den Einbettungscode für die Medien, die du einbetten möchtest.
2. Wähle den gesamten Einbettungscode aus, indem du darauf klickst und auf einem PC Strg + A oder auf einem Mac Befehl + A drückst.
3. Kopiere den Einbettungscode, indem du auf einem PC Strg + C oder auf einem Mac Befehl + C drückst.
4. Klicke in deinem Shopify-Adminbereich auf die Schaltfläche HTML anzeigen im Rich-Text-Editor für den Inhalt, den du bearbeitest.
5. Füge den Einbettungscode ein, indem du auf einem PC Strg + V oder auf einem Mac Befehl + V drückst.
6. Klicke auf Speichern.

Text mit dem Rich-Text-Editor formatieren

Mit der Schaltfläche Formatierung kannst du schnell Absätze, Überschriften oder Blockzitate erstellen. Die Verwendung der richtigen Formatierungs- und Überschriftenebenen hilft Personen und Suchmaschinen, den Inhalt deiner Website zu lesen.

Um ein Format für Text auszuwählen, markiere den Text und klicke dann auf die Schaltfläche Formatierung.

Formatierungsoptionen

• Absatz

  Der meiste Textinhalt deiner Website besteht aus Absatztext. Absatztext hat normalerweise eine Schriftgröße von 10–12 Pt., aber einige Themes verwenden andere Schriftgrößen.

• Überschrift (1–6)

  Überschriften werden zur Strukturierung von Inhalten verwendet. Es gibt 6 Überschriftenebenen. Überschrift 1 ist die wichtigste Ebene und Überschrift 6 ist die unwichtigste.

• Blockzitat

  Ein Blockzitat wird verwendet, um Text anzuzeigen, der einer anderen Person zugeschrieben wird, wie z. B. ein Zitat oder ein Auszug aus einem Buch oder einer Website.

Text fett formatieren

Um Text fett zu formatieren, markiere den Text und klicke auf die Schaltfläche Fett.

Text kursiv formatieren

Um Text kursiv zu formatieren, markiere den Text und klicke auf die Schaltfläche Kursiv.

Text unterstreichen

Um Text zu unterstreichen, markiere den Text und klicke auf die Schaltfläche Unterstreichen.

Aufzählung erstellen

Um eine Aufzählungsliste zu erstellen, klicke auf die Schaltfläche „Aufzählungsliste“.

Tippe, um den ersten Aufzählungspunkt zu erstellen. Um neue Listenpunkte zu erstellen, drücke die Enter- oder Return-Taste. Um die Liste abzuschließen, drücke die Enter- oder Return-Taste zweimal.

Nummerierte Liste erstellen

Um eine nummerierte Liste zu erstellen, klicke auf die Schaltfläche „Nummerierte Liste“.

Tippe, um die ersten nummerierten Listenpunkte zu erstellen. Um neue Listenpunkte zu erstellen, drücke die Enter- oder Return-Taste. Um die Liste abzuschließen, drücke die Enter- oder Return-Taste zweimal.

Text einrücken

Durch das Einrücken eines Absatzes wird am linken Rand ein Einzug hinzugefügt. Um einen Absatz einzurücken, klicke auf die Schaltfläche „Einrücken“.

Text ausrücken

Das Ausrücken eines Absatzes entfernt alle vorhandenen Einzüge. Um den Einzug eines Absatzes zu entfernen oder ihn „auszurücken“, klicke auf die Schaltfläche „Ausrücken“.

Text ausrichten

Um Text auszurichten, markiere den Text, klicke auf die Schaltfläche „Ausrichtung“ und wähle „Linksbündig ausrichten“, „Zentriert ausrichten“ oder „Rechtsbündig ausrichten“ aus.

Textfarbe ändern

1. Markiere den Text und klicke auf die Schaltfläche „Farbe“.
2. Klicke auf eine Farbe oder gib einen Hex-Code ein, um die Farbe des markierten Texts zu ändern.

Hintergrundfarbe des Textes ändern

1. Markiere den Text und klicke auf die Schaltfläche „Farbe“.
2. Klicke auf den Tab „Hintergrund“.
3. Klicke auf eine Farbe oder gib einen Hex-Code ein, um den Hintergrund des markierten Texts in diese Farbe zu ändern.

Formatierung im Rich-Text-Editor entfernen

Um die Formatierung von Text oder Bildern zu entfernen, markiere den Inhalt und klicke dann auf die Schaltfläche „Formatierung entfernen“.

Tabellen mit dem Rich-Text-Editor einfügen

Mit dem Rich-Text-Editor kannst du Tabellen in deine Blog-Beiträge, Seiten, Produktbeschreibungen und Kollektionsbeschreibungen einfügen. Nachdem du eine Tabelle erstellt hast, kannst du Text, Bilder oder sogar Videos darin platzieren.

Schritte:

1. Klicke im Rich-Text-Editor auf die Schaltfläche „Tabelle einfügen“.
2. Klicke auf „Tabelle einfügen“, um eine Tabelle einzufügen. Dadurch wird eine Tabelle mit einer Zeile und einer Spalte erstellt.

Nachdem du eine Tabelle erstellt hast, klicke erneut auf die Schaltfläche „Tabelle einfügen“, um die Zeilen und Spalten der Tabelle zu ändern:

• Zeile darüber einfügen: Platziere deinen Cursor in einer Zeile und klicke auf diese Schaltfläche, um darüber eine neue Zeile einzufügen.
• Zeile darunter einfügen: Platziere deinen Cursor in einer Zeile und klicke auf diese Schaltfläche, um darunter eine neue Zeile einzufügen.
• Spalte davor einfügen: Platziere deinen Cursor in einer Spalte und klicke auf diese Schaltfläche, um vor dieser Spalte eine neue Spalte einzufügen.
• Spalte danach einfügen: Platziere deinen Cursor in einer Spalte und klicke auf diese Schaltfläche, um nach dieser Spalte eine neue Spalte einzufügen.
• Zeile löschen: Platziere deinen Cursor in einer Zeile, die du löschen möchtest, und klicke dann auf diese Schaltfläche.
• Spalte löschen: Platziere deinen Cursor in einer Spalte, die du löschen möchtest, und klicke dann auf diese Schaltfläche.
• Tabelle löschen: Platziere deinen Cursor an einer beliebigen Stelle in der Tabelle und klicke dann auf diese Schaltfläche, um die gesamte Tabelle zu löschen.

Links mit dem Rich-Text-Editor einfügen

Mit dem Rich-Text-Editor kannst du Links (Hyperlinks) in Blog-Beiträgen, auf Seiten sowie in Produkt- und Kollektionsbeschreibungen einfügen. Du kannst Links hinzufügen, die Kund:innen auf Seiten in deinem Shopify-Onlineshop oder auf andere Websites weiterleiten. Du kannst auch Links hinzufügen, die eine E-Mail-Nachricht öffnen oder einen Telefonanruf auslösen, damit Kund:innen dich kontaktieren können.

Schritte:

1. Markiere den Text oder das Bild, den bzw. das du in einen Link umwandeln möchtest.
2. Klicke auf „Link einfügen“.
3. Gib die Ziel-URL für den Link in das Feld „Link zu“ ein:
   • Um auf eine externe Website zu verlinken, die sich außerhalb deines Shopify-Shops befindet, gib https:// gefolgt von der Webadresse ein, zum Beispiel https://www.example.com.
   • Um auf eine Seite in deinem Shopify-Onlineshop zu verlinken, gib die Kurz-URL ein, zum Beispiel /collections/summer-collection.
   • Um einen Link zu erstellen, der eine E-Mail-Nachricht öffnet, gib mailto: gefolgt von der E-Mail-Adresse ein, zum Beispiel mailto:example@example.com.
   • Um einen Link zu erstellen, der einen Telefonanruf tätigt, gib tel: gefolgt von der Telefonnummer ein, zum Beispiel tel:+0-123-456-7890.
4. Gib eine kurze Beschreibung des Links in das Feld „Link-Titel“ ein.
5. Wähle über das Menü „Diesen Link öffnen in“ aus, wie der Link geöffnet werden soll:
   • demselben Fenster: Der Link wird im bestehenden Browser-Tab oder -Fenster geöffnet.
   • einem neuen Fenster: Der Link wird in einem neuen Browser-Tab oder -Fenster geöffnet.
6. Klicke auf „Link einfügen“, um deinen markierten Text in einen Link umzuwandeln.

Interne und externe Links mit dem Rich-Text-Editor hinzufügen

Links zu Seiten innerhalb deines Shopify-Shops werden als interne Links bezeichnet. Du kannst Kurz-URLs verwenden, um interne Links zu erstellen. Die URL /collections verweist beispielsweise auf die Kollektionsseite deines Shops.

Um auf eine bestimmte Seite deines Onlineshops zu verlinken, z. B. auf eine Kollektions- oder Produktseite, verwende das URL-Format /page-type/page-handle. Um beispielsweise auf eine von dir erstellte Kollektion namens „Sommerkollektion“ zu verlinken, verwende die URL /collections/summer-collection.

Links zu Websites, die sich außerhalb deines Shopify-Shops befinden, werden als externe Links bezeichnet. Externe Links müssen vollständig eingegeben werden und mit http:// beginnen.

Auf eine Datei im Seiteninhalt verlinken

Nachdem du eine Datei hochgeladen hast, kannst du im Rich-Text-Editor auf sie verlinken, damit sie aus einer Produkt- oder Kollektionsbeschreibung, einer Webseite oder einem Blog-Beitrag heruntergeladen werden kann.

Schritte:

Bilder mit dem Rich-Text-Editor einfügen

Es gibt drei Möglichkeiten, ein Bild mit dem Rich-Text-Editor einzufügen. Du kannst:

• Bilder hochladen
• aus deinen Produktbildern auswählen
• eine öffentliche Bild-URL verwenden.

Bilder hochladen

Schritte:

1. Klicke im Rich-Text-Editor auf die Schaltfläche Bild einfügen.

2. Klicke im Dialogfeld Bild einfügen auf den Tab Hochgeladene Bilder.

3. Klicke auf Datei hochladen.

4. Wähle eine Bilddatei im Format WebP, HEIC, SVG, GIF, JPEG oder PNG von deinem Computer aus.

5. Klicke auf das hochgeladene Bild, um es auszuwählen.

6. Wähle im Menü Größe die Anzeigegröße des Bildes aus. Du kannst Original auswählen, um das Bild einzufügen, ohne die Anzeigegröße zu ändern.

7. Klicke auf Bild einfügen, um das Bild im Rich-Text-Editor zu platzieren.

Aus Produktbildern auswählen

Schritte:

1. Klicke im Rich-Text-Editor auf die Schaltfläche Bild einfügen.

2. Klicke im Dialogfeld Bild einfügen auf den Tab Produktbilder.

3. Klicke auf das Bild, das du einfügen möchtest. Wenn du die gewünschten Produktmedien nicht finden kannst, kannst du die Pfeiltasten verwenden, um verschiedene Seiten zu durchsuchen.

4. Wähle im Menü Größe die Anzeigegröße des Bildes aus. Du kannst Original auswählen, um das Bild einzufügen, ohne die Anzeigegröße zu ändern.

5. Klicke auf Bild einfügen, um das Produktbild im Rich-Text-Editor zu platzieren.

Bild-URL verwenden

So fügst du ein Bild über eine öffentliche URL ein:

1. Klicke im Rich-Text-Editor auf die Schaltfläche Bild einfügen.
2. Klicke im Dialogfeld Bild einfügen auf den Tab URL.
3. Gib die öffentlich zugängliche URL deiner Bilddatei ein.
4. Klicke auf Bild einfügen, um das Bild in seiner Originalgröße im Rich-Text-Editor einzufügen.

Ein Bild im Rich-Text-Editor verschieben und dessen Größe ändern

Nachdem du ein Bild zu einer Produkt- oder Kollektionsbeschreibung, einer Webseite oder einem Blog hinzugefügt hast, kannst du es an eine andere Stelle im Inhalt verschieben.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf das Produkt, die Kollektion, die Webseite oder den Blog-Beitrag, dessen Bild du verschieben oder in der Größe ändern möchtest.
2. Klicke im Rich-Text-Editor auf das Bild.
3. Führe einen der folgenden Schritte aus:
   • Um das Bild zu verschieben, klicke darauf und ziehe es an eine andere Stelle im Feld Inhalt.
   • Um die Größe des Bildes zu ändern, klicke auf eine der Ecken und ziehe daran.
4. Klicke auf Speichern.

Ein Bild im Rich-Text-Editor bearbeiten

Du kannst die Größe, den Textumbruch und die Ausrichtung eines Bildes im Rich-Text-Editor ändern. Du kannst auch die Bild-URL bearbeiten oder einen Bild-Alt-Text hinzufügen oder bearbeiten.

Schritte:

1. Doppelklicke auf das Bild im Rich-Text-Editor, um das Dialogfeld Bild bearbeiten zu öffnen.
2. Bearbeite das Bild mit den Optionen für Größe und Ausrichtung:
   • Um die Größe des Bildes zu ändern, wähle eine Größenoption aus.
   • Füge einen Bild-Alt-Text hinzu oder bearbeite ihn, um die SEO und die Zugänglichkeit deines Onlineshops zu verbessern.
   • Um einen Abstand hinzuzufügen, gib die Anzahl der Pixel für den gewünschten Abstand auf jeder Seite ein.
   • Um die Ausrichtung des Bildes zu ändern, wähle eines der Symbole für die linksbündige, zentrierte oder rechtsbündige Ausrichtung aus.
   • Um einen Textumbruch hinzuzufügen, aktiviere die Option Text um Bild umbrechen.
3. Klicke auf Bild bearbeiten, um deine Änderungen zu speichern.

Videos mit dem Rich-Text-Editor einfügen

Du kannst mit dem Rich-Text-Editor Videos in Blog-Beiträge, Seiten, Produktbeschreibungen und Kollektionsbeschreibungen einfügen oder einbetten.

Wenn du ein von dir erstelltes Video einbetten möchtest, musst du es zuerst auf eine Video-Streaming-Website wie YouTube oder Vimeo hochladen.

YouTube erlaubt es nicht, ähnliche Videos zu deaktivieren, aber du kannst festlegen, dass die ähnlichen Videos vom selben Kanal stammen sollen wie das gerade abgespielte Video.

Schritte:

1. Kopiere die URL des Videos, indem du auf einem PC Strg + C oder auf einem Mac Befehl + C drückst.

2. Besuche Embed Responsively. Embed Responsively ist ein Tool, das dir einen verbesserten Einbettungscode für dein Video zur Verfügung stellt.

3. Klicke auf Embed Responsively, um die Video-Website auszuwählen, auf der sich dein Video befindet.
4. Füge die URL des Videos, die du kopiert hast, in das Feld Page URL auf Embed Responsively ein, indem du auf einem PC Strg + V oder auf einem Mac Befehlstaste + V drückst.
5. Klicke auf Embed. Embed Responsively erstellt dann den Einbettungscode für dich.
6. Wenn das Video von YouTube stammt und du nur ähnliche Videos vom selben YouTube-Kanal anzeigen möchtest, suche die URL des Videos im Einbettungscode. Kopiere ?rel=0 und füge es am Ende innerhalb der Anführungszeichen ein.
7. Kopiere den gesamten Code aus dem Feld Embed code.
8. Klicke in deinem Shopify-Adminbereich im Rich-Text-Editor auf die Schaltfläche Video einfügen.
9. Füge den Einbettungscode in das Feld im Dialogfeld Video einfügen ein.
10. Klicke auf Video einfügen.
11. Klicke auf Speichern, wenn du fertig bist, um deine Änderungen an dem Artikel zu speichern, den du bearbeitet hast.

Audiodateien mit dem Rich-Text-Editor einfügen

Du kannst den Rich-Text-Editor verwenden, um Audiodateien in Blog-Beiträge, Seiten, Produktbeschreibungen und Kollektionsbeschreibungen einzufügen oder einzubetten.

Schritte:

1. Gehe in deinem Shopify-Adminbereich zu Inhalt > Dateien.

2. Klicke auf Dateien hochladen, um die Audiodatei hochzuladen, die du in deinem Shop einfügen oder einbetten möchtest.

3. Öffne im Bereich Onlineshop den Rich-Text-Editor für die Seite oder den Blog-Beitrag, in dem du die Audiodatei präsentieren möchtest.

4. Kopiere <div id="player"><audio controls="controls"> und füge den Code dann im Rich-Text-Editor ein, um einen Audio-Player auf deiner Seite einzubetten.

5. Kopiere den folgenden Code:

• <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

6. Füge diesen Code in deinem Rich-Text-Editor nach dem Code für den Audio-Player ein und ersetze dann https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 durch die URL, die du beim Hochladen deiner Audiodatei auf Shopify erstellt hast. Du kannst die URL deiner Audiodatei jederzeit auf der Seite Dateien finden.
7. Klicke auf Speichern.
8. Klicke auf Anzeigen, um sicherzustellen, dass deine Audiodatei korrekt abgespielt wird.

Interne Kommentare im Rich-Text-Editor hinzufügen oder entfernen

Du kannst Kommentar-Tags <!-- und --> für internen Text verwenden, den du nicht in deinem Shop veröffentlichen möchtest.

Schritte:

1. Klicke im Rich-Text-Editor auf die Schaltfläche HTML anzeigen.
2. Um einen internen Kommentar hinzuzufügen, umschließe den Text, den du ausblenden möchtest, mit <!-- und -->. Zum Beispiel: <!--yourtext-->.
3. Klicke auf Speichern.

HTML-Tags, die von den Kommentar-Tags umschlossen sind, werden als interner Text gespeichert. Damit diese HTML-Tags ordnungsgemäß funktionieren, musst du die Kommentar-Tags <!-- und --> um sie herum entfernen.

Grundlegendes zum Rich-Text-Editor

Der Rich-Text-Editor ist in TinyMCE, ein externes Content Delivery Network (CDN), integriert. Diese Integration hat einige wichtige Auswirkungen:

• Inhaltslimit: Es gibt eine feste Obergrenze von 64 KB für Inhalte, die in den Rich-Text-Editor eingegeben werden. Dies gilt für Seiten, Blog-Beiträge und zusätzliche Skripte.
• HTML-Bereinigung: TinyMCE bietet eine Logik zur Inhaltsfilterung, die die HTML-Formatierung automatisch korrigiert, um Fehlfunktionen der Storefront und Sicherheitsrisiken zu vermeiden. Obwohl du den HTML-Code manuell in seine ursprüngliche Form zurückändern kannst, wird empfohlen, mit diesen automatisierten Änderungen zu arbeiten, um potenzielle Probleme zu vermeiden.

Fehlerbehebung für den Rich-Text-Editor

Wenn du Probleme mit dem Rich-Text-Editor hast, lies dir die folgenden Schritte zur Fehlerbehebung und die häufigsten Probleme durch.

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>

mailto:email@example.com