Verwenden des Rich-Text-Editors für Inhalte

Diese Seite wurde gedruckt um Apr 16, 2024. Die neueste Version findest du unter https://help.shopify.com/de/manual/shopify-admin/productivity-tools/rich-text-editor.

Du kannst den Rich-Text-Editor von Shopify verwenden, um den Inhalt in deinem Onlineshop zu formatieren.

Auf dieser Seite

Wo kann der Rich-Text-Editor verwendet werden?

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

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

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

Du kannst mit dem Rich-Text-Editor HTML-Inhalte in Blog-Beiträgen, Seiten, Produktbeschreibungen und Kollektionsbeschreibungen eingeben.

Klicke auf die </> Schaltfläche HTML anzeigen, um den HTML-Code des Inhalts im Rich-Text-Editor anzusehen.

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

Einbetten eines Medien-Widgets

Wenn du ein Video- oder Musik-Widget einbetten möchtest, musst du es zunächst bei einem Dienst wie Youtube, Vimeo oder SoundCloud hochladen. Diese Dienste generieren einen Einbettungscode, den du kopierst und im Rich-Text-Editor des Shopify-Adminbereichs einfügen kannst.

Schritte:

  1. Suche den Einbettungscode für das Medium, das du einbetten möchtest.

  2. Wähle den gesamten Einbettungscode aus, indem du ihn anklickst und auf einem PC ctrl + A oder auf einem Mac command + A drückst.

  3. Kopiere den Einbettungscode, indem ductrl + C auf einem PC oder command + C auf einem Mac drückst.

  4. Klicke im Shopify-Adminbereich im Rich-Text-Editor für den Inhalt, den du bearbeitest, auf die Schaltfläche HTML anzeigen.

  5. Füge den Einbettungscode ein, indem du ctrl + V auf einem PC oder command + V auf einem Mac drückst.

  6. Klicke auf Speichern.

Formatieren von Text mit dem Rich-Text-Editor

Mit der Schaltfläche Formatierung kannst du schnell Absätze, Überschriften oder Blockquotes erstellen. Durch die Verwendung der richtigen Formatierungs- und Überschriftenebenen können Personen und Suchmaschinen den Inhalt deiner Website lesen.

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

Formatierungsoptionen

  • Absatz

  • Überschrift (1–6)

  • Blockzitat

Fett geschriebener Text

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

Text kursiv setzen

Um Text kursiv zu gestalten, 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ählung zu erstellen, klicke auf die Schaltfläche Aufzählung.

Tippe, um das erste Listenelement mit Aufzählungszeichen zu erstellen. Drücke zum Erstellen neuer Listenelemente die Taste enter oder return. Drücke zum Fertigstellen der Liste die Taste enter oder return zweimal.

Nummerierte Listen erstellen

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

Tippe, um die ersten nummerierten Listenelemente zu erstellen. Drücke zum Erstellen neuer Listenelemente die Taste enter oder return. Drücke zum Fertigstellen der Liste die Taste enter oder return zweimal.

Text einrücken

Das Einrücken eines Absatzes gibt ihm einen Rand auf seiner linken Seite. Um einen Absatz einzurücken, klicke auf Einrücken.

Einrücken zurücksetzen

Mit dem Ausrücken eines Absatzes werden alle darin enthaltenen Einrückungen entfernt. Um das Einrücken eines Paragraphen rückgängig zu machen, klicke auf die Schaltfläche Ausrücken.

Text ausrichten

Um den Text auszurichten, wähle den Text aus, klicke auf die Schaltfläche Ausrichtung und wähle Links ausrichten, Mittig ausrichten oder Rechts ausrichten.

Ändern von Textfarben mit dem Rich-Text-Editor

Schritte:

  1. Markiere den Text und klicke auf die Schaltfläche Farbe.

  2. Klicke auf eine Farbe oder gib einen Hex-Code ein, um den markierten Text in diese Farbe zu ändern.

Ändere die Hintergrundfarben des Texts

Schritte:

  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 Textes in diese Farbe zu ändern.

Im Rich-Text-Editor die Formatierung löschen

Um die Formatierung von Texten oder Bildern zu löschen, markiere den Inhalt und klicke dann auf die Schaltfläche Formatierung löschen.

Tabellen mit dem Rich-Text-Editor einfügen

Du kannst mit dem Rich-Text-Editor Tabellen in deinen Blog-Posts, Seiten, Produktbeschreibungen und Kollektionsbeschreibungen einfügen. Du kannst Text, Bilder oder sogar Videos nach dem Erstellen in eine Tabelle einfügen.

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. Dies erstellt eine Tabelle mit einer Zeile und einer Spalte.

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 oben einfügen: Platziere den Cursor in einer Zeile und klicke auf diese Schaltfläche, um eine neue Zeile darüber einzufügen.
  • Zeile unten einfügen: Platziere den Cursor in einer Zeile und klicke auf diese Schaltfläche, um eine neue Zeile darunter einzufügen.
  • Spalte davor einfügen: Platziere den Cursor in einer Spalte und klicke auf diese Schaltfläche, um eine neue Spalte davor einzufügen.
  • Spalte dahinter einfügen: Platziere den Cursor in einer Spalte und klicke auf diese Schaltfläche, um eine neue Spalte dahinter einzufügen.
  • Zeile löschen: Platziere den Cursor in eine Zeile, die du löschen möchtest, und klicke dann auf diese Schaltfläche.
  • Spalte löschen: Setze den Cursor in eine Spalte, die du löschen möchtest, und klicke dann auf diese Schaltfläche.
  • Tabelle löschen: Platzieren Sie den Cursor an einer beliebigen Stelle in der Tabelle und klicken Sie dann auf diese Schaltfläche, um die gesamte Tabelle zu löschen.

Einfügen von Links mit dem Rich-Text-Editor

Du kannst mit dem Rich-Text-Editor Links (Hyperlinks) in Blog-Beiträge, Seiten, Produktbeschreibungen und Kollektionsbeschreibungen einfügen. Du kannst Links einfügen, mit denen die Kunden auf Seiten innerhalb des Shopify-Onlineshops oder auf andere Seiten geleitet werden. Du kannst auch Links einfügen, die E-Mail-Nachrichten öffnen oder Anrufe tätigen, damit die Kunden dich besser kontaktieren können.

Schritte:

  1. Markiere den Text oder das Bild, 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 Webseite außerhalb von Shopify zu verlinken, gib https:// gefolgt von der Webadresse, zum Beispiel https://www.example.com, ein.
    • Um zu einer Seite innerhalb deines Shopify-Onlineshops zu verlinken, gib beispielsweise die kurze URL /collections/summer-collection ein.
    • Um einen Link zu erstellen, der eine E-Mail-Nachricht öffnet, gib ein mailto: gefolgt von der E-Mail-Adresse, zum Beispiel mailto:example@example.com.
    • Um einen Link zu erstellen, der einen Anruf tätigt, gib tel:, gefolgt von der Telefonnummer ein, z. B. tel:+0-123-456-7890.

  4. Gib im Feld Link-Titel eine kurze Beschreibung des Links ein.

  5. Wähle mit Diesen Link öffnen in aus, wie der Link geöffnet wird:

    • In demselben Fenster: Der Link wird in einem bereits vorhandenen Browsertab oder -Fenster eines Benutzers geöffnet.
    • ein neues Fenster: der Link wird in einem neuen Browser-Tab oder-Fenster geöffnet.

  6. Klicke auf Link einfügen , um den markierten Text in einen Link umzuwandeln.

Füge mit dem Rich-Text-Editor interne und externe Links hinzu

Links zu Websites, die sich innerhalb deines Shopify-Shops befinden, werden als interne Links bezeichnet. Du kannst kurze URLs für interne Links verwenden. Die URL /collections verweist beispielsweise auf die Kategorienseite deines Shops.

Verwende zur Verlinkung mit einer bestimmten Seite deines Onlineshops, wie zum Beispiel eine Kategorie- oder Produktseite, das URL-Format /page-type/page-handle. Zur Verlinkung mit einer von dir erstellten Kategorie mit dem Namen Sommerkollektion verwende beispielsweise 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 beginnen mit http://.

Verlinken auf eine Datei im Seiteninhalt

Nachdem du eine Datei hochgeladen hast, kannst du sie mit dem Inhalt im Rich-Text-Editor verknüpfen, um sie zum Herunterladen aus einer Produkt- oder Kollektionsbeschreibung, auf einer Webseite oder in einem Blog-Beitrag zur Verfügung zu stellen.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu Inhalt > Dateien.
  2. Kopiere die URL für die zu verlinkende Datei.
  3. Klicke in deinem Shopify-Adminbereich auf das Produkt, die Kollektion, die Webseite oder den Blog-Eintrag, dem du die Datei hinzufügen möchtest.
  4. Gib im Rich-Text-Editor den Linktext ein oder wähle ihn aus.
  5. Wähle den Link-Text aus.
  6. Klicke auf Link einfügen.
  7. Kopiere in das Feld Link zu die URL der Datei, die du verlinken möchtest.
  8. Klicke auf Link einfügen. Im Rich-Text-Editor wird verlinkter Text blau und unterstrichen angezeigt.
  1. Tippe in der Shopify-App auf die Schaltfläche ... und anschließend auf Einstellungen.
  2. Tippe im Abschnitt Shop-Einstellungen auf Dateien.
  3. Kopiere die URL für die zu verlinkende Datei.
  4. Klicke in deinem Shopify-Adminbereich auf das Produkt, die Kollektion, die Webseite oder den Blog-Eintrag, dem du die Datei hinzufügen möchtest.
  5. Gib im Rich-Text-Editor den Linktext ein oder wähle ihn aus.
  6. Wähle den Link-Text aus.
  7. Klicke auf Link einfügen.
  8. Kopiere in das Feld Link zu die URL der Datei, die du verlinken möchtest.
  9. Klicke auf Link einfügen. Im Rich-Text-Editor wird verlinkter Text blau und unterstrichen angezeigt.
  1. Tippe in der Shopify-App auf die Schaltfläche ... und anschließend auf Einstellungen.
  2. Tippe im Abschnitt Shop-Einstellungen auf Dateien.
  3. Kopiere die URL für die zu verlinkende Datei.
  4. Klicke in deinem Shopify-Adminbereich auf das Produkt, die Kollektion, die Webseite oder den Blog-Eintrag, dem du die Datei hinzufügen möchtest.
  5. Gib im Rich-Text-Editor den Linktext ein oder wähle ihn aus.
  6. Wähle den Link-Text aus.
  7. Klicke auf Link einfügen.
  8. Kopiere in das Feld Link zu die URL der Datei, die du verlinken möchtest.
  9. Klicke auf Link einfügen. Im Rich-Text-Editor wird verlinkter Text blau und unterstrichen angezeigt.

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

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 WebP-, HEIC-, SVG-, GIF-, JPEG- oder PNG-Bilddatei 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. Wenn du Original auswählst, kannst du das Bild einfügen, ohne die Anzeigegröße zu ändern.

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

Produktbilder wählen

Schritte:

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

  2. Klickst du im Dialogfeld Bild einfügen auf die Registerkarte Produktbilder.

  3. Klicke auf das Bild, das du einfügen möchtest.

  4. Wähle im Menü Größe die Anzeigegröße des Bildes aus. Wenn du Original auswählst, kannst du das Bild einfügen, ohne die Anzeigegröße zu ändern.

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

Eine Bild-URL verwenden

So fügst du ein Bild mit einer öffentlichen 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 ursprünglichen Größe in den Rich-Text-Editor einzufügen.

Ein Bild im Rich-Text-Editor verschieben und skalieren

Nachdem du ein Bild in eine Produkt- oder Kollektionsbeschreibung, eine Webseite oder einen Blog eingefügt hast, kannst du es an eine andere Stelle im Inhalt verschieben.

Schritte:

  1. Klicke im Shopify-Adminbereich auf das Produkt, die Kollektion, Webseite oder den Blog-Beitrag, in denen das Bild enthalten ist, das 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 auf das Bild und ziehe es an eine andere Position im Feld Inhalt.
    • Um die Größe des Bildes zu ändern, klicken auf eine der Ecken und ziehe sie.

  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 Bild-Alt-Text hinzufügen oder bearbeiten.

Schritte:

  1. Doppelklicke im Rich-Text-Editor auf das Bild, um den Dialog Bild bearbeiten zu öffnen.

  2. Verwende die Größen- und Ausrichtungsoptionen, um das Bild zu bearbeiten:

    • Wähle eine Option aus, um die Bildgröße zu ändern.
    • Um die SEO und Barrierefreiheit deines Onlineshops zu verbessern, füge Bild-alt-Text hinzu oder bearbeite es.
    • Um Abstände hinzuzufügen, gib die Anzahl der Pixel, die du für beide Seiten als Abstand wünschst, ein.
    • Wähle das Symbol für links, Mitte oder rechts aus, um die Bildausrichtung zu ändern.
    • Um einen Textumbruch hinzuzufügen, aktiviere die Option Text um Bild umbrechen.

  3. Klicke auf Bild bearbeiten, um deine Änderungen zu speichern.

Einfügen von Videos mit dem Rich-Text-Editor

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

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

Bei YouTube kannst du ähnliche Videos nicht deaktivieren, aber du kannst festlegen, dass die ähnlichen Videos von demselben Kanal stammen sollen wie das gerade abgespielte Video.

Schritte:

  1. Kopiere die URL des Videos, indem du auf einem PC ctrl + C oder auf einem Mac command + C drückst.
  1. Besuche Embed Responsively. Embed Responsively ist ein Tool, das dir einen verbesserten Einbettungscode für Videos liefert.

  1. Klicke auf Embed Responsively, um die Video-Website auszuwählen, in der sich dein Video befindet.

  2. Füge die URL des Videos, die du kopiert hast, in das Feld Seiten-URL bei Embed Responsively ein, indem du ctrl + V auf einem PC oder command + V auf einem Mac drückst.

  3. Klicke auf Einbetten. Embed Responsively erstellt den Einbettungscode für dich.

  4. Wenn das Video von YouTube stammt und du nur ähnliche Videos desselben YouTube-Kanals anzeigen möchtest, suche die URL des Videos im Einbettungscode. Kopiere ?rel=0 und füge den Code am Ende innerhalb der Anführungszeichen ein.

  5. Kopiere den gesamten Code in das Feld Einbettungscode.

  6. Klicke in deinem Shopify-Adminbereich im Rich-Text-Editor auf die Schaltfläche Video einfügen.

  7. Füge den Einbettungscode in das Feld im Dialogfeld Video einfügen ein.

  8. Klicke auf Video einfügen.

  9. Klicke abschließend auf Speichern, um deine am bearbeiteten Artikel vorgenommenen Änderungen zu speichern.

Audio-Dateien mit dem Rich-Text-Editor einfügen

Sie können den Rich-Text-Editor verwenden, um Audiodateien in Blog-Beiträge, Seiten, Produktbeschreibungen und Sammlungsbeschreibungen einzufügen oder einzubetten.

Schritte:

  1. Klicke in deinem Shopify-Adminbereich auf Einstellungen und dann auf Dateien.
  2. Klicke auf Dateien hochladen, um die Audiodatei hochzuladen, die du in deinem Shop einfügen oder einbetten möchtest.
  3. Öffne im Abschnitt Onlineshop den Rich-Text-Editor für die Seite oder den Blog-Beitrag, für den du die Audiodatei verwenden möchtest.
  4. Kopiere <div id="player"><audio controls="controls"> und füge dann den Code in den Rich-Text-Editor ein, um einen Audio-Player in deine 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ügen Sie diesen Code im Rich-Text-Editor hinter dem Code des Audio-Players ein und ersetzen Sie dann https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 durch die URL, die Sie für die Audiodatei erstellt haben, als Sie Sie in Shopify hochgeladen haben. Die URL der Audiodatei finden Sie jederzeit auf der Seite Dateien.

  7. Klicke auf Speichern.

  8. Klicke auf Anzeigen, um sicherzustellen, dass die Audiodatei korrekt abgespielt wird.

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

Du kannst die Kommentar-Tags <!-- und --> für internen Text verwenden, der nicht in deinem Shop veröffentlicht werden soll.

Schritte:

  1. Klicke im Rich-Text-Editor auf die Schaltfläche HTML anzeigen.

  2. Um einen internen Kommentar hinzuzufügen, setzt du den Text, der ausgeblendet werden soll, zwischen die Tags <!-- und -->. Zum Beispiel: <!--yourtext-->.

  3. Klicke auf Speichern.

HTML-Tags, die sich innerhalb der Kommentar-Tags befinden, werden als interner Text gespeichert. Damit diese HTML-Tags ordnungsgemäß funktionieren, musst du die Kommentar-Tags <!-- und --> um die HTML-Tags entfernen.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen