Flexbox

Einleitung

Mit Flexbox fesseln Sie Ihre Online-Shopper schon ab dem ersten Klick. Erstellen Sie per Drag’n’Drop im Handumdrehen attraktive, emotionsgeladene «Eye-Catcher» für Ihre Shop-Besucher. Von eingebetteten Videos und Bildern im Shop über Texte und Farben bis hin zu ganzen Artikeln – Ihren Ideen sind keine Grenzen gesetzt.

Kurzübersicht

In folgender Darstellung werden einige grundsätzliche Funktionen des Flexbox-Systems gezeigt:

Flexboxen erstellen

Bitte definieren Sie Schriftarten und deren Grösse für den Shop im Layout-Management bevor Sie mit den Boxenerstellung beginnen.

Die Listenansicht

Eine Übersicht aller Flexbox finden Sie indem Sie im Hauptmenü auf „Eigene Inhalte” und dann „Flexboxen bearbeiten” gehen. Dort finden Sie eine Liste mit allen Flexboxen, die Sie erstellt haben.

Für bereits erstellte Flexboxen stehen folgende Fuktionen zur Verfügung:

Stift

Gestaltungsmaske wird geöffnet

Zahnrad

Einstellungen der Flexbox

Dokumente

Flexbox duplizieren

Auge

Sichtbarkeitssteuerung

Abfalleimer

Flexbox löschen

Falls die Mehrsprachigkeit im Shop aktiviert ist, wird die Spalte ‘Lokalisieren’ angezeigt. Mit Klick auf die gewünschte Flagge, wird eine separate Flexbox erstellt (siehe Beispiel Versandoptionen). Damit können Sie die Texte für die jeweiligen Sprachen erfassen. Falls Sie beispielsweise nur ein Bild haben, ist dies nicht nötig und die Box wird für alle Sprachen verwendet.

Flexbox hinzufügen

Eine neue Flexbox erstellen Sie, indem Sie „Flexbox hinzufügen” klicken und einen Namen vergeben. Alle weiteren Felder sind vorerst optional.

Abstände anpassen

In den Einstellungen der Flexbox finden Sie den Reiter „Abstände”. Hier können Sie pro Flexbox die Abstände nach Ihren Vorstellungen anpassen. Haben Sie mehrere Flexboxen auf einer Seite, so greifen diese Einstellungen trotzdem nur bei der Flexbox, bei der Sie die Abstände angepasst haben.

Abstand aussen

Mit „Abstand aussen” passen Sie die Abstände zwischen den einzelnen Inhaltselemente an. Sollen z.B. die einzelnen Texte nicht so dicht aneinander stehen oder die Bilder mehr Platz einnehmen, müssen Sie hier die Werte anpassen. Wenn die Seitenabstände grösser als Null Pixel sein sollen, achten Sie für ein optimales Ergebnis bitte darauf, dass Sie folgende Grundsätze einhalten:

• Oben/Unten: Abstände in Pixel (fügen Sie px hinter dem Wert an)
  
• Links/Rechts im Verhältnis zur Box: Abstände zwingend in Prozent (fügen Sie % hinter dem Wert an)
  
  

Tipp: Jede Flexbox hat bis zu 12 Spalten. Bei sehr grossen Abständen wird jede einzelne Spalte entsprechend kleiner. Man sollte nicht zu hohe Abstände verwenden, da man sonst nicht mehr alle 12 Spalten brauchen kann.

Abstand innen

Mit „Abstand innen” passen sie die Innenabstände der Inhaltelemente an, also z.B. den Abstand zwischen Aussenkante des Hintergrundbildes und Aussenkante des eingefügten Textes.

Veröffentlichen

Hier wird die Flexbox veröffentlicht, also für den Kunden sichtbar. Voraussetzung ist, dass sie irgendwo verknüpft wurde. Zusätzlich kann beispielsweise bei zeitlich begrenzten Aktionen eine Aktivierungsdauer bestimmt werden. Es ist möglich, mehrere Flexboxen auf einer Seite darzustellen. Mit der Position entscheiden Sie, welche Flexbox zuoberst (Position 1) und welche danach folgen.

Gestaltung einer Flexbox

Der Editor

Für die Gestaltung bietet das Modul einen integrierten Editor, der aus folgenden Komponenten besteht:

Die Werkzeugleiste

Mithilfe von der Werkzeugleiste hat man Zugriff auf folgende Funktionen:

• Zugriff auf die Einstellungen der Flexbox
  
• Inhalte hinzufügen
  
• Aktivieren der Vorschau
  
• Ungespeicherte Änderungen speichern
  
• Anzeige der Statusleiste mit Veröffentlichungsfunktion
  
• Wechsel der aktiven Bildschirmgrösse
  
  

Verschiedene Bildschirmgrössen

Mit den drei Ansichten können Sie unterschiedliche Anordnungen pro Bildschirmgrösse definieren. In der mobilen Ansicht sind die Boxen standardmässig immer in der ganzen Breite dargestellt. Bei folgenden Auflösungen wechseln die Ansichten:

• Mobile: 0 – 767px
  
• Tablet: 768 – 991px
  
• Desktop: 992 - 1199px
  (Neuere iPads verfügen über ein Auflösung von mehr als 992px, weshalb die Desktop-Darstellung gewählt wird.)
  
• Desktop gross: ab 1200px
  
  

Die Statusleiste

Rechts oben werden diverse nützliche Hinweise angezeigt:

Speicherstatus

Zeigt an, ob es ungespeicherte Änderungen gibt oder ob alles gespeichert ist.

Veröffentlichung

Zeigt den Status an und verändert ihn. Bei der Veröffentlichung werden die ungespeicherten Änderungen vorherig automatisch abgespeichert und folgende Änderungen automatisch veröffentlicht.! Wenn die Flexbox veröffentlicht ist, wird die Schrift grün angezeigt, andernfalls grau.

Der Gestaltungsbereich

Wie in den Abbildungen 6 und 7 ersichtlich, steht ein Gestaltungsbereich zur Verfügung, welcher mit mehreren Boxen verschiedener Inhaltstypen flexibel angeordnet werden können. Zum Verschieben einer Boxen halten Sie die Taste gedrückt und platzieren Sie die Box am gewünschten Ort. Die restlichen Elemente ordnen sich automatisch um die Box herum an. Um die Grösse zu verändern, halten Sie die Taste über einem der Symbole in den unteren Ecken gedrückt und ziehen die Box in die gewünschte Form. Weiter können Sie jede einzelne Box bearbeiten, ausblenden und löschen.

In der Vorschau oben rechts wechseln Sie zur Ansicht, wie es kundenseitig schlussendlich aussehen wird.

Inhaltstypen

Mit dem Button ‘Inhalt hinzufügen’ erstellen Sie eine neue Box und stehen zuerst vor der Auswahl, welcher Inhaltstyp es ein soll. Folgende stehen zur Auswahl:

Text

Dieser Inhaltstyp ermöglicht es Ihnen, mit dem herkömmlichen Text-Editor zu arbeiten. Sie können Text einfügen und nach Ihrem Wünschen formatieren. Erstellen Sie eine Tabelle oder laden Sie ein Video oder mehrere Bilder hoch.

Bild

Damit können Sie Bilder grossflächig als Hintergrundbild benutzen

Video

Damit können Sie via HTML-Code externe Videos (z.B. Youtube, Vimeo etc.) einbinden.

Galerie

Damit können Sie Ihre eigenen Bildergalerien in Ihre Flexbox einsetzen. Wobei nur das erste Bild beim Aufrufen der Seite dargestellt wird. Die restlichen werden bei Klick auf den Inhalt dargestellt. Mit der Beschreibung die Galerie noch ergänzt werden.

Accordion

Mehrere ein- und ausklappbare Textfelder.

Artikel

Hiermit verknüpfen Sie einen im Webshop angelegten Artikel.

HTML

Damit können Sie reinen HTML-Code einfügen. HTML-Kenntnisse sind von Vorteil.

Titel

Jeder Box können Sie einen Titel geben, welcher auch im Gestaltungsbereich sichtbar ist. Ob der Titel im Webshop angezeigt werden soll, wird mittels ‘Titel einblenden’ gesteuert. Ebenso kann die Farbe nach Wunsch angepasst werden. Wenn Sie den Titel nicht einblenden möchten, dann dient dieser zur Hilfe und Orientierung.

Farben

Wählen Sie die Farben im Quadrat aus oder geben Sie RGB oder Hex-Werte direkt ins Feld ein. Angezeigt werden automatisch immer die RGB-Werte mit einem Zusatzwert für die Transparenz, welche Sie ebenfalls mit dem Regler ganz rechts steuern können.

Tab ‘Erweitert’

Ebenfalls bei jeder Box stehen erweiterte Einstellungen zur Verfügung:

- Link: Verlinken Sie die Box mit einer internen oder externen Seite, einem Artikel oder einer Kategorie.

- Hintergrundfarbe

- Hintergrundbild

- CSS-Klassen: Hier werden vordefinierte CSS-Klassen verwendet (CSS-Kenntnisse notwendig).

Anzeigeorte bestimmen

Es gibt verschiedene Orte an denen Flexboxen angezeigt werden können. Die einzelne Flexbox ist dabei nicht an einen Ort gebunden, sondern kann an mehreren Orten gleichzeitig genutzt und angezeigt werden. Mögliche Anzeigeorte sind Kategorien, Inhaltsseiten und eigene Flexbox-Seiten, die Startseite oder der Footer.

Überall, wo eine Flexbox angezeigt werden kann, ist die folgende Verknüpfungsbox sichtbar.

Auswahl

In der Mitte haben Sie die Auswahlbox mit allen vorhandenen Flexboxen. Über das Feld „Suchen…” können Sie die Liste einschränken, um bei einer grossen Anzahl Flexboxen besser Ihren passenden Inhalt zu finden. Wichtig ist noch, dass hier nur Flexboxen angezeigt werden, die nicht übersetzt sind. D.h. Sie verknüpfen immer die Flexbox in der Hauptsprache. Wechselt der Besucher im Shop auf eine andere Sprache, wird automatisch die passende Flexbox dieser Sprache angezeigt.

Zugeordnet

In der rechten Spalte der Verbindungsbox sehen Sie die Inhalte, die Sie bereits verknüpft haben. Damit deutlich sichtbar ist, ob die Inhalte auch für Besucher sichtbar sind, wechselt das sonst grüne Auge-Icon auf rot, wenn z.B. „Veröffentlicht” ausgeschaltet ist oder „Aktiv von” bzw. „Aktiv bis” den Anzeigezeitpunkt eingeschränkt haben und dadurch die Inhalte ausgeschaltet sind.

Neue Flexbox

Unterhalb der vorhandenen Flexboxen haben Sie noch den Button „Neue Flexbox”. Wenn Sie diesen Button klicken, gelangen Sie direkt in den Flexbox-Editor und ihre neu erstellte Flexbox wird automatisch der zuvor bearbeiteten Kategorie oder Inhaltsseite zugewiesen.

Achten Sie bitte darauf, dass Sie mögliche Anpassungen in der Kategorie oder der Inhaltsseite speichern, bevor Sie diesen Button klicken.

Installation

Systemanforderungen

Um das Flexbox Modul installlieren zu können, ist ein PepperShop Professional oder Enterprise der Version 6.0 erforderlich.

Dateien kopieren und hochladen

Das Flexbox Modul besteht aus mehreren Dateien und Verzeichnissen, die man in den installierten PepperShop kopieren muss. Dazu entpackt man zuerst das mitgelieferte ZIP-Archiv. Es sind folgende Dateien enthalten, hier mit den Zielverzeichnissen dargestellt:

{shopdir}/shop/Admin/assets/flexbox
{shopdir}/shop/Admin/classes/flexbox
{shopdir}/shop/Admin/html_templates/flexbox
{shopdir}/shop/Admin/flexbox_editor.php
{shopdir}/shop/assets/flexbox
{shopdir}/shop/classes/flexbox
{shopdir}/shop/language/html_templates/flexbox_inhalte.tpl.html
{shopdir}/shop/language/html_templates/flexbox.tpl.html
{shopdir}/shop/resources/flexbox

Die Dateien lassen sich einfach via FTP oder SCP zum Webserver hochladen. Der Platzhalter {shopdir} steht dabei für das Shopverzeichnis auf dem Webserver, wo unter anderem die Datei index.php zusammen mit README.txt zu finden ist.

Aktivierung

Dieses Modul ist sofort aktiviert, sobald der Schritt “[Dateien kopieren und hochladen]” abgeschlossen ist.