Färger och mallar
Utforma färger, knappar och mallar för ett enskilt lås och förhandsgranska resultatet live innan du sparar.
Varje lås i Sami B2B Lock, Password Protect har egna designinställningar (färger, knappstil och ett par visningsreglage) helt skilda från alla andra lås. Det betyder att din lösenkodsskyddade grossistkatalog kan se helt annorlunda ut än meddelandet ”logga in för att se den här kollektionen”, trots att båda är byggda med samma app. Inget du gör på den här sidan påverkar något annat lås.
Öppna ett låss designpanel
Section titled “Öppna ett låss designpanel”- Öppna appen och gå till Locks. Öppna sedan det lås du vill ändra utseendet på (eller skapa ett nytt).
- På fliken Lock setup letar du upp kortet Preview till höger och klickar på Customize templates.
Klicka på Customize templates i kortet Preview i låseditorn.
- Då öppnas helskärmspanelen Customize templates. Det vänstra sidofältet listar de skärmar som det här låset kan visa för en kund: Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link och Country Restriction, plus en kontroll Collapse sidebar längst ned. Klicka på en skärm för att läsa in dess inställningar för Translation och Design i mittenkolumnen, med en liveförhandsgranskning till höger.
Panelen Customize templates: välj en skärm till vänster, utforma den i mitten och kontrollera resultatet till höger.
- Scrolla i mittenkolumnen förbi avsnittet Translation (beskrivs i Översätt låsmeddelanden) till avsnittet Design under det. Allt i den här guiden finns i avsnittet Design.
Färger
Section titled “Färger”Varje färg är en färgruta med sitt hexvärde bredvid. Klicka på färgrutan (eller pennikonen) för att öppna väljaren, välj eller skriv en färg, så uppdateras liveförhandsgranskningen till höger direkt.
För skärmen Passcode får du till exempel:
| Fält | Utformar |
|---|---|
| Color button text | Texten på knappen Submit |
| Color text | Texten i låsmeddelandet |
| Color input passcode | Text som kunden skriver i lösenkodsfältet |
| Box shadow color | Kortets skugga, när Box shadow är på |
| Background button | Knappen Submits fyllning |
| Background notification | Låskortets bakgrund |
| Background input passcode | Lösenkodsfältets fyllning |
Varje färg visar en färgruta och ett hexvärde. Klicka för att öppna väljaren.
Reglagen Box shadow och logotypbild
Section titled “Reglagen Box shadow och logotypbild”Två reglage finns högst upp i avsnittet Design, ovanför färgväljarna:
- Box shadow lägger till en skugga runt låskortet (färgen anges av Box shadow color nedan).
- Use image visar låsillustrationen på kortet. Stäng av det för ett kort med bara text.
Slå på Box shadow eller Use image för att ändra hur notifieringskortet presenteras.
Platshållarkort
Section titled “Platshållarkort”Välj Placeholder card i sidofältet för att utforma det kunder ser i stället för en låst produkt när den visas i en lista, till exempel på en kollektionssida.
Skärmen Placeholder card styr hur låsta produkter visas i produktlistor.
Anpassad CSS per lås
Section titled “Anpassad CSS per lås”Längst ned i avsnittet Design finns en editor för Custom css. Allt du lägger in där gäller bara det här låsets widgetar. Det är ett bra ställe för en liten justering som ditt tema behöver (en teckenstorlek, en marginal) utan att röra temats egen stilmall.
Varje lås har sin egen Custom css-editor för enstaka stiländringar.
Panelen med liveförhandsgranskning
Section titled “Panelen med liveförhandsgranskning”Högerkolumnen i panelen Customize templates visar alltid en live-förhandsgranskning i butikens stil av den skärm du valt. Dina färg- och stiländringar syns direkt, utan att du sparar. Högst upp i panelen låter en växlare mellan Desktop preview och Mobile preview dig kontrollera hur samma skärm ser ut i respektive storlek.
Växla mellan dator- och mobilförhandsgranskning för att kontrollera båda layouterna innan du sparar.
Eftersom hela panelen finns i ett specifikt låss editor återspeglar förhandsgranskningen alltid det låsets egna inställningar (innehåll, regler och design), inte ett allmänt exempel.