Farben und Vorlagen
Gestalten Sie Farben, Buttons und Vorlagen einer einzelnen Sperre und sehen Sie das Ergebnis vor dem Speichern live in der Vorschau.
Jede Sperre in Sami B2B Lock, Password Protect hat ihre eigenen Design-Einstellungen – Farben, Button-Stil und einige Anzeigeschalter –, völlig getrennt von allen anderen Sperren. Das bedeutet: Ihr mit Passcode geschützter Großhandelskatalog kann ganz anders aussehen als Ihre Nachricht „Melden Sie sich an, um diese Kollektion zu sehen“, obwohl beide mit derselben App erstellt sind. Nichts, was Sie auf dieser Seite tun, wirkt sich auf andere Sperren aus.
Design-Panel einer Sperre öffnen
Abschnitt betitelt „Design-Panel einer Sperre öffnen“- Öffnen Sie die App und gehen Sie zu Locks. Öffnen Sie dann die Sperre, die Sie neu gestalten möchten (oder erstellen Sie eine neue).
- Suchen Sie im Tab Lock setup rechts die Karte Preview und klicken Sie auf Customize templates.
Klicken Sie in der Karte „Preview“ des Sperren-Editors auf „Customize templates“.
- Dadurch öffnet sich das Vollbild-Panel Customize templates. Die linke Seitenleiste listet die Bildschirme auf, die diese Sperre Kaufenden anzeigen kann – Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link und Country Restriction – sowie unten die Steuerung Collapse sidebar. Klicken Sie auf einen Bildschirm, um seine Einstellungen für Translation und Design in der mittleren Spalte zu laden, mit einer Live-Vorschau rechts.
Das Panel „Customize templates“: Wählen Sie links einen Bildschirm, gestalten Sie ihn in der Mitte und prüfen Sie das Ergebnis rechts.
- Scrollen Sie in der mittleren Spalte am Bereich Translation vorbei (beschrieben unter Sperrnachrichten übersetzen) zum Bereich Design darunter. Alles in dieser Anleitung findet sich in diesem Bereich „Design“.
Jede Farbe ist ein Farbfeld mit ihrem Hex-Wert daneben. Klicken Sie auf das Farbfeld (oder das Stiftsymbol), um die Auswahl zu öffnen, wählen oder tippen Sie eine Farbe, und die Live-Vorschau rechts aktualisiert sich sofort.
Für den Bildschirm Passcode erhalten Sie zum Beispiel:
| Feld | Gestaltet |
|---|---|
| Color button text | Die Beschriftung des Submit-Buttons |
| Color text | Den Text der Sperrnachricht |
| Color input passcode | Den Text, den Kaufende in das Passcode-Feld eingeben |
| Box shadow color | Den Schlagschatten der Karte, wenn Box shadow eingeschaltet ist |
| Background button | Die Füllung des Submit-Buttons |
| Background notification | Den Hintergrund der Sperrkarte |
| Background input passcode | Die Füllung des Passcode-Felds |
Jede Farbe zeigt ein Farbfeld und einen Hex-Wert; klicken Sie, um die Auswahl zu öffnen.
Schalter für Schlagschatten und Logo-Bild
Abschnitt betitelt „Schalter für Schlagschatten und Logo-Bild“Zwei Schalter stehen ganz oben im Bereich Design, über den Farbauswahlen:
- Box shadow – fügt einen Schlagschatten um die Sperrkarte hinzu (seine Farbe legen Sie unten mit Box shadow color fest).
- Use image – zeigt die Sperr-Illustration auf der Karte. Schalten Sie sie aus für eine Karte nur mit Text.
Schalten Sie „Box shadow“ oder „Use image“ ein, um die Darstellung der Benachrichtigungskarte zu ändern.
Platzhalterkarte
Abschnitt betitelt „Platzhalterkarte“Wählen Sie Placeholder card in der Seitenleiste, um zu gestalten, was Kaufende anstelle eines gesperrten Produkts sehen, wenn es in einer Liste erscheint, etwa auf einer Kollektionsseite.
Der Bildschirm „Placeholder card“ steuert, wie gesperrte Artikel in Produktlisten erscheinen.
Benutzerdefiniertes CSS pro Sperre
Abschnitt betitelt „Benutzerdefiniertes CSS pro Sperre“Am Ende des Bereichs Design finden Sie einen Editor Custom css. Alles, was Sie hier eintragen, gilt nur für die Widgets dieser einen Sperre – ein guter Ort für eine kleine Anpassung, die Ihr Theme braucht (eine Schriftgröße, ein Abstand), ohne das Stylesheet Ihres Themes selbst anzutasten.
Jede Sperre hat ihren eigenen Editor „Custom css“ für einmalige Anpassungen.
Das Live-Vorschau-Panel
Abschnitt betitelt „Das Live-Vorschau-Panel“Die rechte Spalte des Panels Customize templates zeigt immer eine Live-Vorschau im Stil Ihres Onlineshops für den ausgewählten Bildschirm – Ihre Änderungen an Farben und Stil erscheinen sofort, ohne zu speichern. Oben im Panel können Sie mit einem Umschalter Desktop preview / Mobile preview prüfen, wie derselbe Bildschirm in der jeweiligen Größe dargestellt wird.
Wechseln Sie zwischen Desktop- und Mobile-Vorschau, um beide Layouts vor dem Speichern zu prüfen.
Da dieses ganze Panel im Editor einer bestimmten Sperre liegt, spiegelt die Vorschau immer die eigenen Einstellungen dieser Sperre wider – Inhalte, Regeln und Design – und kein allgemeines Beispiel.