Advanced CMS. Copyright 2015 silbersaiten.de Service&Support:

Transkript

1 Advanced CMS Copyright 2015 silbersaiten.de Service&Support:

2 1. Installation Nachdem Sie das Modul Advanced CMS heruntergeladen und installiert haben, sollte das Modul in Ihrer Modulliste zu finden sein. 2. Funktionen Das Modul finden Sie anschließend unter Voreinstellungen > Advanced CMS.# Klicken Sie auf Neu, um eine neue CMS-Seite zu erstellen, oder bearbeiten Sie Ihre vorhandenen CMS-Seiten. Geben Sie nun zunächst einen Titel für Ihre CMS-Seite an. Geben Sie nun eine freundliche URL für Ihre CMS-Seite an. Diese ersetzt die unübersichtliche vorgefertigte URL für Ihre CMS-Seite.

3 Sie können zudem Meta Beschreibung, Meta Schlüsselwörter und einen Meta-Titel angeben, damit Ihre Cms-Seite mittels Suchfunktionen besser gefunden werden kann. Klicken Sie nun auf Row Container. Dadurch wird Ihrer CMS-Seite ein neuer Row Container hinzugefügt, in den Sie verschiedene Inhalte einpflegen können. Sie benötigen solche Row Container für alle Inhalte (Text, Bild, Video usw.), die Sie einpflegen möchten. Sie können so viele Row Container hinzufügen, wie Sie benötigen. Klicken Sie dazu einfach erneut auf Row Container. Fügen Sie nun die gewünschten Blöcke Ihren Row Containern hinzu, indem Sie den jeweiligen Block anklicken. Achten Sie darauf, dass Sie vorher den gewünschten Row Container angewählt haben. Über folgende Felder verfügen sämtliche Blöcke: Titel-Feld: Geben Sie in das Titel-Feld den Titel dieses Blocks ein (optional). Der Titel wird im Front-End angezeigt und betitelt den jeweiligen Block. Referenz-Feld: Geben Sie in das Referenz-Feld des jeweiligen Blocks einen Titel für den Block ein. Das dient der Übersichtlichkeit und hilft Ihnen sich bei mehreren Blöcken zurecht zu finden.

4 CSS-Klasse: Das Feld CSS-Klasse dient dem finalen Layout Ihrer CMS-Seite im Frontoffice. Sie können damit die Breite der einzelnen Blöcke definieren. Um die Blockbreite zu definieren, nutzen Sie die CSS-Klasse col-md-x. Geben Sie für X den Wert ein, den das Feld breit sein soll. 12 ist dabei die Breite der gesamten CMS-Seite. Geben Sie also col-md-6 ein, um den Block über die Hälfte der CMS-Seite zu ziehen. Geben Sie dem nächsten Block nun ebenfalls den Wert col-md-6, damit die beiden Blöcke nebeneinander stehen und sich über die gesamte Breite der CMS-Seite erstrecken. Sie können auch mehr als zwei Blöcke nebeneinander anordnen, solange der Gesamtwert nicht die Zahl 12 übersteigt. Sie können die Größe natürlich auch verschieden aufteilen. Beispiel: Geben Sie dem Text Block den Wert col-md-4 und dem Bild Block den Wert col-md-8, damit Sie relativ wenig Text neben einem größeren Bild haben Achtung: Der Gesamtwert sollte innerhalb eines Row Containers nicht die Zahl 12 übersteigen. Nutzen Sie stattdessen einen neuen Row Container. Aktiv: Hier können Sie den jeweiligen Block aktivieren oder deaktivieren. Bei deaktivierten Blöcken wird Ihnen in der Übersicht die Referenz in rot angezeigt, während aktivierte Blöcke eine grüne Referenz haben. Deaktivierte Blöcke sind nur im Back-Office sichtbar. Folgende Blöcke stehen Ihnen zur Verfügung: Text Block: In Text Blöcke können Sie einfache Texte ohne spezielle Formatierungen (z.b. Kursiv, Absatz) einfügen. Sie können Formatierungen mithilfe von HTML-Tags hinzufügen (z.b. <p>text</p> für einen Absatz), allerdings ist es in diesem Fall einfacher, den HTML Block zu nutzen, in dem die Formatierungen einfach geändert werden können. Der Text Block dient also speziell für unformatierte, lange Texte.

5 Bearbeiten Sie den Inhalt des Text Blocks, indem Sie auf die Zahnräder in dem Block klicken. Geben Sie in das Text-Feld den gewünschten Text ein. Achten Sie dabei darauf, die richtige Sprache ausgewählt zu haben. HTML Block: HTML Blöcke sind sehr vielfältig. In einen HTML-Block können Sie Texte einfügen und diese mit den einfach dargestellten Formatierungen bearbeiten. Zudem können HTML Blöcke Videos darstellen und Google Maps anzeigen. Text: Um einen Text einzupflegen, geben Sie einfach den Text ein und bearbeiten ihn mit den verfügbaren Formatierungen. Video / Map: Um ein Video oder eine Map einzupflegen, klicken Sie auf den Button Video einfügen/bearbeiten.

6 Es öffnet sich nun ein neues Fenster. Klicken Sie hier auf den Tab Einbetten. An dieser Stelle Müssen Sie einen Einbettungscode einfügen. Hier einige Beispiele, wo dieser Code zu finden ist: Einbettungscode Youtube: Gehen Sie auf die Seite des gewünschten Videos und klicken Sie auf teilen. Nutzen Sie nicht den Link der erscheint sondern gehen Sie nun auf den Tab Einbetten. Kopieren Sie diesen Link in Ihre CMS-Seite, in das Einbetten-Fenster. Google Maps: Suchen Sie Ihren gewünschten Kartenausschnitt und klicken Sie anschließend auf das Zahnrad in der unteren rechten Ecke. Wählen Sie die Option Karte einbetten oder teilen. Kopieren Sie den Link in das Einbetten-Fenster Ihrer CMS-Seite. Bild Block: Mit diesem Block können Sie Ihrer CMS-Seite Bilder hinzufügen. Klicken Sie auf Datei auswählen, um ein Bild von Ihrer Festplatte zu nutzen. Warten Sie bis das Bild in der Galerie erscheint. Nun können Sie dem eine URL hinzufügen, auf die es weiterleitet, wenn ein Kunde darauf klickt. Nutzen Sie dazu den Shortcut {cms:%id%}. Ersetzen Sie %id% durch die ID der gewünschten Seite auf die das Bild weiterleiten soll.

7 Bild Slider Block: Mit diesem Block fügen Sie Ihrer CMS-Seite einen Bilder Slider hinzu. Geben Sie die Geschwindigkeit und Animation des Sliders an und laden Sie die gewünschten Bilder hoch (Bsp.: Kollegium). Produkt Slider Block: Mit diesem Block fügen Sie Ihrer CMS-Seite einen Produkt Slider hinzu. Geben Sie in das Feld Slider die Namen der gewünschten Produkte ein, die im Slider erscheinen sollen. Sie können die Größe der Bilder im Slider festlegen und ob Preis, Name oder zum Warenkorb hinzufügen mit in dem Slider angezeigt werden soll.

8 Kategorie Slider Block: Mit diesem Block fügen Sie Ihrer CMS- Seite einen Kategorien-Slider hinzu. Wählen Sie dazu unter Slider einfach die gewünschten Kategorien aus und geben Sie bei Bild-Größe die gewünschte Größe an. Die Bild-Größe wird zusätzlich so skaliert, dass Sie zu Ihrer Blockbreite passt. Formular Block: Mit diesem Block können Sie Formulare auf Ihrer CMS Seite darstellen, die Sie zuvor mit dem Modul Formmaker erstellt haben. Um diese Option zu nutzen, müssen Sie das Modul Formmaker besitzen und installiert haben. Dies ist beispielsweise

9 bei Gewinnspielen oder ähnlichem eine nützliche Funktion. Wählen Sie einfach unter Form das gewünschte Formular aus. Sie können die Blöcke innerhalb der Row Container wie gewünscht verschieben, indem Sie sie hin und her ziehen. Sie können auch Row Container miteinander tauschen, indem Sie sie nach oben oder unten verschieben. Unter Ihren Row Containern sehen Sie eine kleine Liste mit Shortcuts. Diese können Sie beispielsweise in URL-Verknüpfungen nutzen, um direkt auf eine andere Seite von Ihnen weiter zu leiten, z.b. von einem Produktbild auf die Produktseite mit dem Shortcut {product:%id%}. %id% Wird dabei immer durch die ID der gewünschten Seite ersetzt. Sie müssen die Einstellungen für Ihre verschiedenen Sprachen seperat vornehmen. Dadurch haben Sie die Möglichkeit auf der englischen CMS-Seite beispielsweise andere Produkte anzuzeigen als auf der deutschen CMS- Seite. Wenn Sie mit Ihrer CMS-Seite zufrieden sind, speichern Sie Ihre Ergebnisse und klicken Sie auf den Button Ansicht im Frontoffice oben auf der Seite erscheint., der Neu in Import/Export Sie können die Struktur im xml Forma abspeichern, um sie abzusichern, oder auf einer anderen Installation wieder herzustellen. Beachten Sie bitte dabei, dass nur die Struktur gespeichert wird und die Referenzen der Inhalte. Fall in der neuen Installation z.b. die Bilder oder Produkte fehlen, auf die verwiesen wird, diese auch nicht angezeigt werden. Hier müssten Sie die Blockeinstellungen manuell anpassen.

10 Custom CSS Sie können CSS pro Sprach gleich hier anpassen, wenn Sie Zusatzklassen vergeben Linke/Rechte Spalte steuern Sie können für jeden Block festlegen, ob die Linke oder Rechte Spalte mit angezeigt wird und ob der Header angezeigt werden soll. Bei Landing Pages ist es häufig sinnvoll, den Header auszublenden.

11 Interaktion mit Gallerique Das Modul Gallerique, was extra zu beziehen ist, erstellt Galerien für Ihren Shop, die sich in anderen Teilen des Shops einbinden lassen. Ist das Modul installiert, wird es von AdvancedMCS erkannt und ein Tab wird dargestellt. Damit können Sie die Funktion in einen Block integrieren und dort die existierenden Galerien auswählen. das könnte dann so aussehen

12 Shortcut Integration mit [displaycms id=3] können Sie nun den Inhalt eines CMS Punktes direkt in Ihre Beschreibung einsetzen Neu in Image Slider Block - ist oben beschrieben Titel Feld bei allen Elementen - ist oben beschrieben Delete Button bei Bildern - Bilder können nun gelöscht werden Neues Element - Modul (experementell) Sie können ein neues Element vom Typ Modul erstellen. Das Modul erkennt andere Module, die in Ihrer Pestashop Installation vorhanden sind. Nachdem Sie eins auswählen wird Ihnen die Hookauswahl angezeigt, in die das Modul eingreift. Wenn Sie eins davon markieren, wird Ihnen in der Spalte das Modulaussehen dargestellt, was in diesem Hook initiiert wird. Das Verhalten hängt auch von den Moduleinstellungen ab. Falls beispielsweise Sie die Darstellung des Moduls für die linke Spalte wählen, die aber in den Positions- oder Moduleinstellungen unterdrückt wird, wird es auch hier nicht dargestellt. Beispiel

13 bewirkt die Ausgabe: bewirkt die Ausgabe Probieren Sie verschiedene Ausgaben, um unterschiedliche Ergebnisse zu erreichen. bitte bedenken Sie, dass aus technischen Gründen der Inhalt und nicht immer die Funktionsweise und das Aussehen komplett übergeben werden kann, weil diese Teile sich in diversen andern Hooks befinden. Deshalb muß manchmal mit CSS oder weiteren Javascript Einstellungen nachgeholfen werden.