Shop-Designer

Unter Shop Design öffnet sich der Designer. Links wählen Sie Bausteine, in der Mitte sehen Sie Ihren Shop, rechts bearbeiten Sie das gewählte Element.

Vergrössern

1. 1Bereiche: Startseite, Header, Mobil-Header, Footer und Design. Eine eigene Seite erscheint hier als zusätzlicher Tab.
2. 2Linke Leiste: Blöcke, Elemente und Struktur.
3. 3Gerät: Vorschau für Desktop, Tablet und Mobil.
4. 4Speichern und Veröffentlichen: der Status links daneben zeigt, ob alles gespeichert ist.
5. 5Werkseinstellungen: setzt das ganze Design des aktiven Themes zurück. Mehr dazu unten.

Ein Block ist ein fertiger Abschnitt, etwa ein Titelbild mit Zugangscode-Karte oder eine Galerie. Links stehen die beliebtesten. Mehr Blöcke… öffnet die Block-Bibliothek mit allen.

Vergrössern

Die Bibliothek ordnet nach Kategorien wie Hero, Shop, Bilder & Galerie, Preise & Pakete, Kontakt und Social Media. Ein Klick fügt den Block am Ende der Seite ein. Im Header und Footer erscheinen nur passende Blöcke.

Klicken Sie in der Vorschau auf ein Element. Es bekommt einen Rahmen mit kleiner Werkzeugleiste, rechts öffnen sich seine Einstellungen.

Vergrössern

1. 1Inhalt, Stil, Erweitert: Texte und Bilder, dann Abstände, Grösse, Anordnung, Hintergrund und Rahmen, zuletzt die Sichtbarkeit.

• Werkzeugleiste: verschieben, duplizieren, löschen. Bei Texten öffnet der Stift die Bearbeitung direkt in der Vorschau.
• Stil: Gruppen mit grünem Punkt enthalten eigene Werte.
• Bilder: Jedes Bildfeld öffnet Ihre Medienbibliothek. JPG, PNG und WebP bis 10 MB.
• Struktur: zeigt alle Elemente als Baum. Dort ändern Sie die Reihenfolge per Ziehen.

Unter Elemente fügen Sie einzelne Bausteine ein. Ziehen Sie ein Element in die Vorschau oder klicken Sie es an.

Vergrössern

1. 1Elemente: nach Gruppen geordnet.

In Texten setzt {{year}} das aktuelle Jahr und {{tenant}} den Namen Ihres Studios ein. Praktisch für die Copyright-Zeile.

Die Kopfzeile gibt es zweimal: Header für grosse Bildschirme und Mobil-Header für Tablet und Handy. So passt jede genau zu ihrem Gerät.

Vergrössern

1. 1Gescrollt? und Unterseite? simulieren, wie die Kopfzeile beim Scrollen und auf Unterseiten aussieht.

• Header-Elemente: Header-Leiste, Logo, Navigation, Warenkorb-Button, Zugangscode und Konto-Button.
• Das Logo kommt aus Ihren Einstellungen. Über Logo-Quelle wählen Sie auch ein eigenes Bild.
• Ein neuer Header-Block kommt zusätzlich dazu. Löschen Sie die alte Kopfzeile danach selbst.

Mit dem Geräte-Schalter sehen Sie Ihren Shop so, wie Eltern ihn auf dem jeweiligen Gerät sehen.

• Stellen Sie Abstände oder Schriftgrössen in der Tablet- oder Handy-Ansicht ein, gelten sie nur dort.
• Ein oranger Punkt zeigt, dass ein Wert von Desktop abweicht. Ein Klick darauf übernimmt wieder den Desktop-Wert.
• Unter Erweitert blenden Sie ein Element auf einzelnen Geräten aus.

Eltern sehen immer die zuletzt veröffentlichte Fassung. Ihre Arbeit bleibt ein Entwurf, bis Sie veröffentlichen.

1. 1Speichern sichert den Entwurf. Der Status wechselt auf Gespeichert.
2. 2Veröffentlichen fragt kurz nach und stellt den Entwurf dieses Bereichs live.
3. Wiederholen Sie das für jeden Bereich, den Sie geändert haben.

• Wechseln Sie den Bereich mit offenen Änderungen, speichert Pixalo den Entwurf automatisch.
• Schliessen Sie das Fenster mit offenen Änderungen, fragt der Browser vorher nach.
• Veröffentlichen darf nur der Inhaber. Teammitglieder mit Zugriff auf Shop Design können speichern.

Im Tab Design legen Sie das Aussehen für den ganzen Shop fest, auch für Galerie, Warenkorb und Kasse.

Vergrössern

1. 1Hinweis: Diese Werte gelten überall im Shop.
2. 2Website-Farben: Primär-, Sekundär- und Akzentfarbe mit Vorschau.

• Website-Hintergrund und Website-Farben.
• Primärer und sekundärer Button: Farben, Hover-Farbe, Rahmen und Eckenradius.
• Eingabefelder und Karten-Stil: Farben, Rahmen, Schatten und Badge-Farben.
• Schriftarten: je eine für Überschriften und Fliesstext, aus Google Fonts.

Unter Einstellungen › Website Theme wählen Sie bei Designs das Grunddesign Ihres Shops. Galerie, Fotoseite, Warenkorb, Kasse und Kundenkonto stellen Sie dort in den übrigen Bereichen ein. Mehr unter Website Theme.

• Pixalo speichert Ihre Gestaltung pro Theme. Wechseln Sie zurück, ist Ihre frühere Gestaltung wieder da.
• Ein Theme, das Sie noch nie benutzt haben, startet mit seiner Vorlage. Sie ist sofort live.
• Auch die Farben aus dem Design-Tab gehören zum jeweiligen Theme.