Plugin installieren
Die Installation wird wie üblich durch den Plugin Manager getätigt.
Nach der Installation haben Sie folgende Einstellungen:
Aktivieren des Plugins
Festlegen ob Lazy load aktiviert werden soll
Festlegen ob Aos load aktiviert werden soll
Festlegen des Codes für die Preview
Wichtig: Beim Aktivieren oder Deaktivieren von Lazy Load oder AOS muss das Theme neu kompiliert werden.
Erlebniswelt erstellen
Nach der Installation sollte der komplette Cache sowie das Theme neu kompiliert werden.
Das Backend muss dann neu geladen werden!.
Unter Marketing > Erlebniswelten, finden Sie eine Übersicht der erstellten Erlebniswelten.
Um eine neue Erlebniswelt zu erstellen klicken Sie oben links auf "Einträge hinzufügen".
Erlebniswelt konfigurieren
Es öffnet sich ein neues Fenster, in dem Sie Einstellungen zur Erlebniswelt machen können.
Stammdaten:
Aktivieren: Aktivieren der Erlebniswelt
Vollflächig: Anzeigen der Erlebniswelt in Fullmodus.
Landigpage: Anzeigen der Erlebniswelt auch als Landigpage via Seo Url der Erlebniswelt
Subshops: Durch doppelklicken auf das rote Kreuz unter der Spalte Selektiert, können Sie die Erlebniswelt je Subshop aktivieren
Search Engine Optimization: Erstellen von Metadaten, Metakeywords, SEO Titel sowie SEO URL
Erstellen der Komponenten der Erlebniswelt
Nach dem Speichern der Erlebniswelt, können Sie dann mittels Klicken des letzten Icons in der Übersicht der Erlebniswelten, in den Konfigurationsmodus gelangen.
LInks befindet sich die Sektion / Bühne in dem die Komponenten die Sie benötigen angezeigt werden.
Oben Sind drei Buttons positioniert:
Vorschau:
Durch klicken auf diesen Button, können Sie eine Vorschau im Frontend anzeigen lassen. Daher ist es empfehlenswert das Passwort bzw den Code der Preview in den Plugineinstellungen zu ändern, da nur durch diesen Code die Preview angezeigt wird.Damit vermeiden Sie dass unerlaubte User die preview mittels dem Standard Code (Der Installation) sehen können.
Elemente:
Durch klicken dieses Buttons erscheint rechts neben der Bühne dann die Elemente die zur Verfügung stehen
Konfiguration:
Durch klicken dieses Buttons erscheint rechts neben der Bühne z.B. das Schnellpositionierung der Elemente.
Sofern die Erlebniswelten keine Komponenten enthalten, erscheint eine sogenannte First Dropzone. In der können Sie die Elemente per Drag und Drop auf ziehen.
Elemente
Sofern Sie oben auf den Button "Elemente" klicken, erscheint rechts dann die Übersicht aller Elemente (Text, Bilder, Videos). Ecommerce sowie Custom sind noch zur Zeit in Entwicklung.
Die Elemente können Sie per Drag und Drop auf die Bühne ziehen.
Unterhalb,oberhalb sowie zwischen der gesetzten Elementen, erscheinen dann auch sogenannte Dropzonen (blau).
Lassen Sie dann das Element los. Das Element wird dann hinzugefügt und die Seite neu geladen.
Prüfen Sie dann ob die Elemente die korrekte Position haben.
Die Positionen können Sie dann unter "Konfiguration" einstellen,
oder wenn Sie mit der Maus über das Element fahren.
Das eingefügte Element können Sie bearbeiten indem Sie über das Element mit der Maus fahren.
Es erscheint dann der Konfigurationsbutton, der Löschen Button und die Möglichkeit die Position zu ändern
Einstellungen der Komponenten
Nachdem eine Komponente bzw. Element auf die Bühne gesetzt wurde und die Seite neu geladen wurde, können Sie dieses bearbeiten.
Fahren SIe daher einfach über das Element und erscheint der Button Bearbeiten, der Button löschen und ein Feld zum Ändern der Position.
Nachdem Sie auf Bearbeiten klicken, öffnet sich ein. neues Fenster mit vielen Einstellungen zur Komponente.
Inhalte Standard (Block): Unter diesem Tab befinden sich Standard- sowie Einstellungen von Komponenten die lediglich einen Block benutzen . Ein Block wäre zum Beispiel das Element "Text", das Bearbeiten von Elementen wie Zwei Spalten benötigen dann die Konfiguration von Inhalte Standard und Inhalte Block 1 usw.
Bezeichnung (Block): Tragen Sie hier den Titel ein
Style des AOS Loading: Hier können Sie auswählen ob das Element beim Laden einen Effekt haben sollte. Dazu müsste Aos aktiviert werden im Plugin. Die Effekte können Sie unter http://michalsnik.github.io/aos/ sich anschauen.
Style der Bezeichnung (Block): Wählen Sie hier ob der Titel fett, kursiv etc. sein sollte.
Bold text: Fettdruck.
Bolder weight text (relative to the parent element).: Fettgedruckter Text (relativ zum übergeordneten Element).
Normal weight text: Normalgewichtiger Text.
Light weight text: Leichter Text.
Leichterer Text (relativ zum übergeordneten Element).
Italic text: Kursiver Text.
Text with normal font style: Text mit normaler Schriftart
Art der Überschrift ( Block): Wählen Sie hier den HTML Tag aus für den Titel
Aktiv: Aktivieren des Elements
Anzeige umkehren: Kehrt die Anzeige z.B. beim Hero Text Links um. Anstatt das Bild rechts zu zeigen, wird dieses spiegelverkehrt auf der linken Seite positioiniert und der Text rechts
Full Anzeige: Vollanzeige des Hero mit Text Links
Sortierung (Block): Sortierreihenfolge des Elements
Ansicht der Komponente:
Standard: Das Element wird mittig angezeigt
Halbansicht: der äussere KOntainer des Elements ist vollflächig, der innere Kontainer aber mittig. Ideal um den äusseren Kontainer schwarz zu färben, siehe auch die einzelnen Element dieses Handbuchs.
Volanzeige: Anzeige des ELements vollflächig, z.B. für Banner oder Slider
Animation bei den Bildern: Sie können bei einem Element mit Bildern, diesen Animationen zuweisen. (erstes Block)
Vertikale Anordung (Block): vertikale Anordnung der Bilder sowie der inneren Elemente (erstes Block)
Anzeige (Block): Bezogen auf die Bilder (Standard, Strecken, Anpassen) (erstes Block)
Url: Manche Elemente (mit Buttons) können auch verlinkt werden. Tragen Sie hier die Url ein (erstes Block)
Bei dem Element "ImageSlider", müssen Sie hier die Verlinkungen kommagetrennt eingeben z.B. https://www.pixeleyes.de,https://www.pixeleyes.de .
Button Text (Block): Tragen Sie bei einer Verlinkung den Text des Buttons ein, z.B. Mehr Infos, Details, zum Produkt etc. (erstes Block)
CSS Klasse des Buttons (Block): Hier haben Sie die Möglichkeit aus mehreren Button Styles (Bootstrap) ihren gewünschten CSS Style für den Buttons auszuwählen (erstes Block). Siehe auch unter https://getbootstrap.com/docs/5.0/components/buttons/
btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-danger
btn-outline-warning
btn-outline-info
btn-outline-light
btn-outline-dark
btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
btn-link
Min Height (Block): Mindesthöhe des Bildes
Wichtige HInweise:
Bei der oberen Erklärung finden Sie bei manchen Positionen die Definition (Block).
Da manche Elemente bis zu vier Blöcke haben können, z.B. ein Element mit vier Bildern und Texten , ist die Einstellung für den jeweiligen Block gedacht (Standard, A-D)
Inhalte Standard für Bild 1 und Text 1,
Inhalte Block 1 für Bild 2 und Text 2,
Inhalte Block 2 für Bild 3 und Text 3
Inhalte Block 3 für Bild 4 und Text 4
....
Die Einstellungen je Tab (Inhalte Block 1-4 etc.) sind identisch
Bilderblock 1 - 3:
Sollten Sie Elemente mit Bildern nutzen wollen, laden Sie hier je Block ein Bild hoch. Lediglich beim ImageSlider, sofern Sie mehrere Bilder einbinden wollen, können Sie unter Bilder Block 1 mehrere Bilder hochladen.
Videos: Bei Elementen wie Vimeo und Youtube, können Sie hier die Einstellungen vornehmen
Artikel: Bei E-Ecommerce Artikeln können Sie hier den bzw. die Artikel zuweisen