1.619
Bearbeitungen
Änderungen
Zur Navigation springen
Zur Suche springen
Die Seite wurde neu angelegt: „Anhand von Screenshots (Abbildungen) werden die verschiedenen Funktionen erklärt, die Sie im Editor nutzen können.<br> Der Editor wird in folgenden Bereichen ei…“
Anhand von Screenshots (Abbildungen) werden die verschiedenen Funktionen erklärt, die Sie im Editor nutzen können.<br>
Der Editor wird in folgenden Bereichen eingesetzt: Bei der [[Produkt_anlegen#Punkt_4.29_Beschreibung|Produktbeschreibung]], bei der [[#Punkt_7.29_Inhalt|Gestaltung von Inhaltsseiten]] und bei der [[#Punkt_4.29_Beschreibung|Kategoriebeschreibung]].
== Editor-Funktionen ==
Hier werden die wichtigsten Buttons & Symbole des Editors vorgestellt. Es gibt ein paar spezielle Symbole, jedoch sind die meisten Buttons bereits aus normalen Textverarbeitungsprogrammen bekannt. Sie können auch selbst alle Buttons des Editors ausprobieren, falsch machen kann man nichts.
[[Datei:Editor 1.jpg]]
=== Punkt 1) Standardfunktion zur Textgestaltung 1 ===
Von links nach rechts: Fettschrift (Punkt 8), kursiv, unterstrichen, durchgestrichen, linksbündig, zentriert, rechtsbündig<br>
Um diese Gestaltungen auf Text zu übertragen, markieren Sie den zu verändernden Text und klicken anschliessend auf die Symbole.
=== Punkt 2) Standardfunktion zur Textgestaltung 2 ===
Von links nach rechts:<br>
- Format: Auswahl verschiedene Vorformatierungen für Textgestaltung wie Überschrift (Heading) oder Paragraphen<br>
- Font family: Auswahl der Schriftart<br>
- Font size: Auswahl der Schriftgröße<br>
Um diese Gestaltungen auf Text zu übertragen, markieren Sie den zu verändernden Text und klicken anschliessend auf die Symbole.
=== Punkt 3) Bild einfügen ===
Klicken Sie auf dieses Symbol um einen neuen Bereich zu öffnen, der Ihnen erlaubt eine Bilddatei einzufügen, die sich in Ihrem Bilderordner befindet. Dieser neu geöffnete Bereich ist in der nächsten Abbildung dargestellt. (Sie können Bilder über den [[File-Manager]] hochladen.)
[[Datei:Editor 2.jpg]]
==== Punkt 12) Bild einfügen ====
Klicken Sie dieses Symbol, um Ihren Bildordner zu öffnen und Bilder auswählen zu können.<br>
Diesen Weg müssen Sie natürlich nicht einschlagen, Sie können in die Zeile "Image URL" (Punkt 13) auch eine beliebige URL (Bildadresse) eintragen.<br>
Sollten Sie jedoch das Symbol anklicken um eine Bilddatei aus Ihrem Bildordner einzufügen, öffnet sich ein neue Bereich, den Sie schon aus dem [[File-Manager]] kenne sollten und in folgender Abbildung dargestellt ist:
[[Datei:Editor 3.jpg]]
===== Punkt 18) Bild auswählen =====
Sie sehen hier die Übersicht der Bilder, die Sie mit Hilfe des [[File-Manager|File-Managers]] hochgeladen haben. Klicken Sie auf das Bild, welches Sie einfügen möchten.
===== Punkt 19) Bildvorschau =====
Wenn Sie ein Bild angeklickt haben sehen Sie hier eine Vorschau des Bildes.
===== Punkt 20) Einfügen =====
Klicken Sie nun auf den Button "EINFUEGEN" um das Bild einzufügen. Sie gelangen dann zu folgener Ansicht, die Sie schon von Punkt 3 kennen:
[[Datei:Editor 4.jpg]]
===== Punkt 21) URL Ihres Bildes =====
Die URL des Bildes, die Sie unter Punkt 13 manuell eingeben müssen, hat sich in diesem Vorgang nun automatisch eingetragen. Es ist die URL des eben von Ihnen ausgesuchten Bildes.
===== Punkt 22) Einfügen =====
Klicken Sie nun auf den Button "insert" um, das Bild einzufügen.<br>
Sollten Sie unter Punkt 14 und Punkt 15 keinen Titel oder Beschreibung eingegeben, erscheint eine Fehlermeldung, die Sie jedoch dann ignorieren und mit OK bestätigen können.
<br><br>
==== Punkt 13) Bild URL (Image URL) einfügen ====
Sie können ein Bild einfügen wie unter Punkt 12 beschrieben, oder Sie kopieren in diese Zeile einfach eine Bild-URL, d.h. eine Adresse eines Bildes im Internet.<br>
Genau wie nach dem Vorgang unter Punkt 12 wird, nachdem Sie hier die Bild-Adresse eingegeben haben, unter Punkt 16 eine Bildvorschau angezeigt.
==== Punkt 14) Bild Beschreibung ====
Hier können Sie optional eine Bildbeschreibung angeben.
==== Punkt 15) Bild Titel ====
Hier können Sie optional einen Bildtitel angeben.
==== Punkt 16) Bild Vorschau ====
Nachdem Sie Punkt 12 oder Punkt 13 abgeschlossen haben wird hier eine Bildvorschau angezeigt.
==== Punkt 17) Bild einfügen ====
Klicken Sie den Button "insert" um das Bild einzufügen.<br
Sollten Sie unter Punkt 14 und Punkt 15 keinen Titel oder Beschreibung eingegeben, erscheint eine Fehlermeldung, die Sie jedoch dann ignorieren und mit OK bestätigen können.
<br><br>
=== Punkt 4) HTML-Ansicht ===
Hier wechseln Sie zur HTML-Ansicht, d.h. Sie sehen nicht mehr Text und Bilder etc., sondern den reinen Quelltext. Diesen können Sie dort bearbeiten und auch abspeichern.
=== Punkt 5) Textfarbe ===
Auswahl der Textafarbe (Punkt 9)<br>
Um die Textfarbe auf Text zu übertragen, markieren Sie den zu verändernden Text und klicken anschliessend auf dieses Symbol.
=== Punkt 6) [[File-Manager]] öffnen ===
Hier öffnen Sie den [[File-Manager]].
=== Punkt 7) Video (Media) einfügen ===
Hier fügen Sie eine Videodatei in den Editor ein.<br>
Unter Punkt 3 ist beschrieben, wie eine Bilddatei eingefügt werden kann. Dieser Vorgang ist identisch im Vergleich zum Einfügen einer Videodatei.
=== Punkt 8) Beispiel zur Fettschrift ===
Unter Punkt 1 ist beschrieben wie man Schriftt in Fettschrift umgestalten kann.
=== Punkt 9) Beispiel zur Farbgestaltung ===
Unter Punkt 5 ist beschrieben wie man Schriftt farblich gestalten kann.
=== Punkt 10) Beispiel zum Einfügen eines Bildes ===
Unter Punkt 3 ist beschrieben wie man ein Bild einfügen kann.
=== Punkt 11) Vergrößern des Editors ===
"Ziehen" Sie mit der Maus an dem gekennzeichneten "Eck"-Symbol, um den Editor zu vergrößern.
=== Punkt 12) Verlinkung ===
Auf diesem Button, der aktiv wird wenn Sie Text oder ein Bild markieren (anklicken), können Sie Verlinkungen einfügen.<br>
Diese Verlinkung gilt immer für den Text oder das Bild, welches Sie markiert haben.<br>
Im Folgenden wird erklärt, wie man eine externe Website verlinkt und wie eigene Produkte bzw. eigene Onlineshop-Seiten verlinkt werden. Dies wird anhand eines Beispiels illustriert: Wir verkaufen einen DVD-Player, und möchten, dass direkt in der [[Produktübersicht#Punkt_5.29_Beschreibung|Produktbeschreibung]] ein passender TV verlinkt ist. Im Beispiel der normalen Verlinkung einer externen Website (Punkt 25 bis 27) führen wir diesen TV nicht selber in unserem Onlineshop, und möchten zur Herstellerseite dieses TVs verlinken. Im zweiten Beispiel führen wir diesen TV in unserem Onlineshop und möchten direkt zur Produktseite in unserem Onlineshop verlinken (Punkt 28 bis Punkt 33).
[[Datei:Editor 5.jpg]]
In beiden Beispielen gehen wir dazu zu Beginn wie folgt vor: Wir klicken das Bild an (oder markieren den Text) den wir verlinken wollen (Punkt 23). Nun wird der Verlinkungsbutton aktiv (Punkt 24). Diesen klicken wir nun an. Diese Schritte sind in beiden Beispielen identisch.
==== Punkt 25) Normale Verlinkung (zu externer Website) ====
[[Datei:Editor 6.jpg]]
In der Zeile "Link URL" (Punkt 25) tragen Sie den Link ein, der zu der externen Website führt. Extern heisst hier, dass dieser Link nicht zu Ihrem eigenen Onlineshop führt. Links, die zu Seiten oder Produkten in Ihrem eigenen Onlineshop führen, werden unter Punkt 28 bis 33 besprochen.<br>
In der Zeile "Target" ("Ziel", Punkt 26) können Sie angeben, ob der Link in einem neuen Fenster (empfohlen, "open in new window") oder im gleichen Fenster ("open in this window") geöffnet wird. Klicken Sie anschliessend auf den Button "Insert" ("Einfügen", Punkt 27). Das Bild ist nun verlinkt und kann im Onlineshop angeklickt werden<br>
Wenn Sie den Link von dem Bild (oder Text) wieder entfernen wollen, klicken Sie auf das Bild (wie Sie dies schon zuvor zum Verlinken getan haben) und klicken anschliessend den Button rechts neben dem Verlinkungsbutton (Punkt 24b). Die Verlinkung ist nun wieder entfernt.
==== Punkt 25) Verlinkung zu einer Seite (Produktseite etc.) im eigenen Onlineshop ====
[[Datei:Editor 7.jpg]]
Sie möchten das Bild nun mit einem Produkt Ihres eigenen Onlineshops verlinken. Sie können dies natürlich, so wie hier gezeigt, auch mit jeder anderen Seite Ihres Onlineshops tun.<br> Dazu müssen Sie den "Code" der Seite kopieren. Dies wird hier ausführlich beschrieben: [[Inhalt_-_Startseite#Punkt_1.29_Seitencode_eingeben|Seitencode herausfinden]] (Dieser Code steht also auf jeder Seite Ihres Onlineshops oben in der Adresszeile. Diesen müssen Sie kopieren oder abschreiben)<br>
Diesen Code sehen Sie beispielhaft unter Punkt 29.<br>
Sie gehen also folgendermaßen vor: Tragen Sie in die Zeile "Link URL" (Punkt 28) genau das ein, was Sie auf dem Beispielbild unter Punkt 28 sehen. Natürlich müssen Sie den hier im Beispiel eingetragenen Code ("123456") durch Ihren Code ersetzen, d.h. der Code der Seite Ihres Onlineshops.<br>
In dieser Zeile sehen Sie oben folgendes: '''index.php?id=123456'''<br>
Diesen Text tragen Sie auch bei Ihnen in die Zeile ein, ausgenommen der '123456', denn diese Zahl wird durch Ihren Code ersetzt.<br>
In der Zeile "Target" ("Ziel", Punkt 30) wählen Sie am besten "open in this window" (im selben Fenster öffnen) aus, damit der Link im selben Fenster öffnet (empfohlen). Wenn Sie möchten, dass der Link in einem neuen Fenster öffnet, wählen Sie in dieser Zeile "open in new window" (in neuem Fenster öffnen).<br>
Klicken Sie nun, für den letzten Schritt, auf den Reiter "Advanced (Punkt 31). Es öffnet folgende Reiter-Oberfläche:
[[Datei:Editor 8.jpg]]
Das Einzige, was hier zu tun ist, ist in der Zeile "Id" (Punkt 33) 'html_link' einzutragen, wie im Beispielbild gezeigt.<br>
Nun klicken Sie auf den Button "Insert", um den Link einzufügen. Das Bild ist nun mit der Seite Ihres Onlineshops verlinkt.<br>
Wenn Sie den Link von dem Bild (oder Text) wieder entfernen wollen, klicken Sie auf das Bild (wie Sie dies schon zuvor zum Verlinken getan haben) und klicken anschliessend den Button rechts neben dem Verlinkungsbutton (Punkt 24b). Die Verlinkung ist nun wieder entfernt.
== Sonstige Funktionen des Editors ==
=== Dokumente einfügen ===
[[Dokumente_einfügen|siehe dazu 'Dokumente einfügen']]
Der Editor wird in folgenden Bereichen eingesetzt: Bei der [[Produkt_anlegen#Punkt_4.29_Beschreibung|Produktbeschreibung]], bei der [[#Punkt_7.29_Inhalt|Gestaltung von Inhaltsseiten]] und bei der [[#Punkt_4.29_Beschreibung|Kategoriebeschreibung]].
== Editor-Funktionen ==
Hier werden die wichtigsten Buttons & Symbole des Editors vorgestellt. Es gibt ein paar spezielle Symbole, jedoch sind die meisten Buttons bereits aus normalen Textverarbeitungsprogrammen bekannt. Sie können auch selbst alle Buttons des Editors ausprobieren, falsch machen kann man nichts.
[[Datei:Editor 1.jpg]]
=== Punkt 1) Standardfunktion zur Textgestaltung 1 ===
Von links nach rechts: Fettschrift (Punkt 8), kursiv, unterstrichen, durchgestrichen, linksbündig, zentriert, rechtsbündig<br>
Um diese Gestaltungen auf Text zu übertragen, markieren Sie den zu verändernden Text und klicken anschliessend auf die Symbole.
=== Punkt 2) Standardfunktion zur Textgestaltung 2 ===
Von links nach rechts:<br>
- Format: Auswahl verschiedene Vorformatierungen für Textgestaltung wie Überschrift (Heading) oder Paragraphen<br>
- Font family: Auswahl der Schriftart<br>
- Font size: Auswahl der Schriftgröße<br>
Um diese Gestaltungen auf Text zu übertragen, markieren Sie den zu verändernden Text und klicken anschliessend auf die Symbole.
=== Punkt 3) Bild einfügen ===
Klicken Sie auf dieses Symbol um einen neuen Bereich zu öffnen, der Ihnen erlaubt eine Bilddatei einzufügen, die sich in Ihrem Bilderordner befindet. Dieser neu geöffnete Bereich ist in der nächsten Abbildung dargestellt. (Sie können Bilder über den [[File-Manager]] hochladen.)
[[Datei:Editor 2.jpg]]
==== Punkt 12) Bild einfügen ====
Klicken Sie dieses Symbol, um Ihren Bildordner zu öffnen und Bilder auswählen zu können.<br>
Diesen Weg müssen Sie natürlich nicht einschlagen, Sie können in die Zeile "Image URL" (Punkt 13) auch eine beliebige URL (Bildadresse) eintragen.<br>
Sollten Sie jedoch das Symbol anklicken um eine Bilddatei aus Ihrem Bildordner einzufügen, öffnet sich ein neue Bereich, den Sie schon aus dem [[File-Manager]] kenne sollten und in folgender Abbildung dargestellt ist:
[[Datei:Editor 3.jpg]]
===== Punkt 18) Bild auswählen =====
Sie sehen hier die Übersicht der Bilder, die Sie mit Hilfe des [[File-Manager|File-Managers]] hochgeladen haben. Klicken Sie auf das Bild, welches Sie einfügen möchten.
===== Punkt 19) Bildvorschau =====
Wenn Sie ein Bild angeklickt haben sehen Sie hier eine Vorschau des Bildes.
===== Punkt 20) Einfügen =====
Klicken Sie nun auf den Button "EINFUEGEN" um das Bild einzufügen. Sie gelangen dann zu folgener Ansicht, die Sie schon von Punkt 3 kennen:
[[Datei:Editor 4.jpg]]
===== Punkt 21) URL Ihres Bildes =====
Die URL des Bildes, die Sie unter Punkt 13 manuell eingeben müssen, hat sich in diesem Vorgang nun automatisch eingetragen. Es ist die URL des eben von Ihnen ausgesuchten Bildes.
===== Punkt 22) Einfügen =====
Klicken Sie nun auf den Button "insert" um, das Bild einzufügen.<br>
Sollten Sie unter Punkt 14 und Punkt 15 keinen Titel oder Beschreibung eingegeben, erscheint eine Fehlermeldung, die Sie jedoch dann ignorieren und mit OK bestätigen können.
<br><br>
==== Punkt 13) Bild URL (Image URL) einfügen ====
Sie können ein Bild einfügen wie unter Punkt 12 beschrieben, oder Sie kopieren in diese Zeile einfach eine Bild-URL, d.h. eine Adresse eines Bildes im Internet.<br>
Genau wie nach dem Vorgang unter Punkt 12 wird, nachdem Sie hier die Bild-Adresse eingegeben haben, unter Punkt 16 eine Bildvorschau angezeigt.
==== Punkt 14) Bild Beschreibung ====
Hier können Sie optional eine Bildbeschreibung angeben.
==== Punkt 15) Bild Titel ====
Hier können Sie optional einen Bildtitel angeben.
==== Punkt 16) Bild Vorschau ====
Nachdem Sie Punkt 12 oder Punkt 13 abgeschlossen haben wird hier eine Bildvorschau angezeigt.
==== Punkt 17) Bild einfügen ====
Klicken Sie den Button "insert" um das Bild einzufügen.<br
Sollten Sie unter Punkt 14 und Punkt 15 keinen Titel oder Beschreibung eingegeben, erscheint eine Fehlermeldung, die Sie jedoch dann ignorieren und mit OK bestätigen können.
<br><br>
=== Punkt 4) HTML-Ansicht ===
Hier wechseln Sie zur HTML-Ansicht, d.h. Sie sehen nicht mehr Text und Bilder etc., sondern den reinen Quelltext. Diesen können Sie dort bearbeiten und auch abspeichern.
=== Punkt 5) Textfarbe ===
Auswahl der Textafarbe (Punkt 9)<br>
Um die Textfarbe auf Text zu übertragen, markieren Sie den zu verändernden Text und klicken anschliessend auf dieses Symbol.
=== Punkt 6) [[File-Manager]] öffnen ===
Hier öffnen Sie den [[File-Manager]].
=== Punkt 7) Video (Media) einfügen ===
Hier fügen Sie eine Videodatei in den Editor ein.<br>
Unter Punkt 3 ist beschrieben, wie eine Bilddatei eingefügt werden kann. Dieser Vorgang ist identisch im Vergleich zum Einfügen einer Videodatei.
=== Punkt 8) Beispiel zur Fettschrift ===
Unter Punkt 1 ist beschrieben wie man Schriftt in Fettschrift umgestalten kann.
=== Punkt 9) Beispiel zur Farbgestaltung ===
Unter Punkt 5 ist beschrieben wie man Schriftt farblich gestalten kann.
=== Punkt 10) Beispiel zum Einfügen eines Bildes ===
Unter Punkt 3 ist beschrieben wie man ein Bild einfügen kann.
=== Punkt 11) Vergrößern des Editors ===
"Ziehen" Sie mit der Maus an dem gekennzeichneten "Eck"-Symbol, um den Editor zu vergrößern.
=== Punkt 12) Verlinkung ===
Auf diesem Button, der aktiv wird wenn Sie Text oder ein Bild markieren (anklicken), können Sie Verlinkungen einfügen.<br>
Diese Verlinkung gilt immer für den Text oder das Bild, welches Sie markiert haben.<br>
Im Folgenden wird erklärt, wie man eine externe Website verlinkt und wie eigene Produkte bzw. eigene Onlineshop-Seiten verlinkt werden. Dies wird anhand eines Beispiels illustriert: Wir verkaufen einen DVD-Player, und möchten, dass direkt in der [[Produktübersicht#Punkt_5.29_Beschreibung|Produktbeschreibung]] ein passender TV verlinkt ist. Im Beispiel der normalen Verlinkung einer externen Website (Punkt 25 bis 27) führen wir diesen TV nicht selber in unserem Onlineshop, und möchten zur Herstellerseite dieses TVs verlinken. Im zweiten Beispiel führen wir diesen TV in unserem Onlineshop und möchten direkt zur Produktseite in unserem Onlineshop verlinken (Punkt 28 bis Punkt 33).
[[Datei:Editor 5.jpg]]
In beiden Beispielen gehen wir dazu zu Beginn wie folgt vor: Wir klicken das Bild an (oder markieren den Text) den wir verlinken wollen (Punkt 23). Nun wird der Verlinkungsbutton aktiv (Punkt 24). Diesen klicken wir nun an. Diese Schritte sind in beiden Beispielen identisch.
==== Punkt 25) Normale Verlinkung (zu externer Website) ====
[[Datei:Editor 6.jpg]]
In der Zeile "Link URL" (Punkt 25) tragen Sie den Link ein, der zu der externen Website führt. Extern heisst hier, dass dieser Link nicht zu Ihrem eigenen Onlineshop führt. Links, die zu Seiten oder Produkten in Ihrem eigenen Onlineshop führen, werden unter Punkt 28 bis 33 besprochen.<br>
In der Zeile "Target" ("Ziel", Punkt 26) können Sie angeben, ob der Link in einem neuen Fenster (empfohlen, "open in new window") oder im gleichen Fenster ("open in this window") geöffnet wird. Klicken Sie anschliessend auf den Button "Insert" ("Einfügen", Punkt 27). Das Bild ist nun verlinkt und kann im Onlineshop angeklickt werden<br>
Wenn Sie den Link von dem Bild (oder Text) wieder entfernen wollen, klicken Sie auf das Bild (wie Sie dies schon zuvor zum Verlinken getan haben) und klicken anschliessend den Button rechts neben dem Verlinkungsbutton (Punkt 24b). Die Verlinkung ist nun wieder entfernt.
==== Punkt 25) Verlinkung zu einer Seite (Produktseite etc.) im eigenen Onlineshop ====
[[Datei:Editor 7.jpg]]
Sie möchten das Bild nun mit einem Produkt Ihres eigenen Onlineshops verlinken. Sie können dies natürlich, so wie hier gezeigt, auch mit jeder anderen Seite Ihres Onlineshops tun.<br> Dazu müssen Sie den "Code" der Seite kopieren. Dies wird hier ausführlich beschrieben: [[Inhalt_-_Startseite#Punkt_1.29_Seitencode_eingeben|Seitencode herausfinden]] (Dieser Code steht also auf jeder Seite Ihres Onlineshops oben in der Adresszeile. Diesen müssen Sie kopieren oder abschreiben)<br>
Diesen Code sehen Sie beispielhaft unter Punkt 29.<br>
Sie gehen also folgendermaßen vor: Tragen Sie in die Zeile "Link URL" (Punkt 28) genau das ein, was Sie auf dem Beispielbild unter Punkt 28 sehen. Natürlich müssen Sie den hier im Beispiel eingetragenen Code ("123456") durch Ihren Code ersetzen, d.h. der Code der Seite Ihres Onlineshops.<br>
In dieser Zeile sehen Sie oben folgendes: '''index.php?id=123456'''<br>
Diesen Text tragen Sie auch bei Ihnen in die Zeile ein, ausgenommen der '123456', denn diese Zahl wird durch Ihren Code ersetzt.<br>
In der Zeile "Target" ("Ziel", Punkt 30) wählen Sie am besten "open in this window" (im selben Fenster öffnen) aus, damit der Link im selben Fenster öffnet (empfohlen). Wenn Sie möchten, dass der Link in einem neuen Fenster öffnet, wählen Sie in dieser Zeile "open in new window" (in neuem Fenster öffnen).<br>
Klicken Sie nun, für den letzten Schritt, auf den Reiter "Advanced (Punkt 31). Es öffnet folgende Reiter-Oberfläche:
[[Datei:Editor 8.jpg]]
Das Einzige, was hier zu tun ist, ist in der Zeile "Id" (Punkt 33) 'html_link' einzutragen, wie im Beispielbild gezeigt.<br>
Nun klicken Sie auf den Button "Insert", um den Link einzufügen. Das Bild ist nun mit der Seite Ihres Onlineshops verlinkt.<br>
Wenn Sie den Link von dem Bild (oder Text) wieder entfernen wollen, klicken Sie auf das Bild (wie Sie dies schon zuvor zum Verlinken getan haben) und klicken anschliessend den Button rechts neben dem Verlinkungsbutton (Punkt 24b). Die Verlinkung ist nun wieder entfernt.
== Sonstige Funktionen des Editors ==
=== Dokumente einfügen ===
[[Dokumente_einfügen|siehe dazu 'Dokumente einfügen']]
