Kleuren en sjablonen
Pas de kleuren, knoppen en sjablonen van één vergrendeling aan en bekijk het resultaat live voordat je opslaat.
Elke vergrendeling in Sami B2B Lock, Password Protect heeft eigen ontwerpinstellingen (kleuren, knopstijl en een paar weergaveschakelaars) die volledig los staan van elke andere vergrendeling. Je groothandelscatalogus met toegangscode kan er dus totaal anders uitzien dan je bericht “log in om deze collectie te zien”, ook al zijn ze met dezelfde app gemaakt. Niets wat je op deze pagina doet, heeft invloed op een andere vergrendeling.
Het ontwerppaneel van een vergrendeling openen
Section titled “Het ontwerppaneel van een vergrendeling openen”- Open de app en ga naar Locks. Open vervolgens de vergrendeling waarvan je de stijl wilt aanpassen (of maak een nieuwe).
- Zoek op het tabblad Lock setup de kaart Preview aan de rechterkant en klik op Customize templates.
Klik op Customize templates in de kaart Preview van de vergrendelingseditor.
- Hiermee open je het paneel Customize templates op volledig scherm. De linkerzijbalk toont de schermen die deze vergrendeling aan een klant kan tonen: Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link en Country Restriction, plus onderaan een bedieningselement Collapse sidebar. Klik op een scherm om de instellingen voor Translation en Design in de middelste kolom te laden, met een live voorbeeld rechts.
Het paneel Customize templates: kies links een scherm, pas het in het midden aan en controleer rechts het resultaat.
- Scrol in de middelste kolom voorbij het gedeelte Translation (beschreven in Vergrendelingsberichten vertalen) naar het gedeelte Design eronder. Alles in deze handleiding bevindt zich in dat gedeelte Design.
Kleuren
Section titled “Kleuren”Elke kleur is een kleurstaal met de hex-waarde ernaast. Klik op het kleurstaal (of het potloodpictogram) om de kiezer te openen, kies of typ een kleur en het live voorbeeld rechts wordt direct bijgewerkt.
Voor het scherm Passcode krijg je bijvoorbeeld:
| Veld | Bepaalt de stijl van |
|---|---|
| Color button text | Het label op de knop Submit |
| Color text | De tekst van het vergrendelingsbericht |
| Color input passcode | Tekst die de klant in het veld voor de toegangscode typt |
| Box shadow color | De slagschaduw van de kaart, als Box shadow aan staat |
| Background button | De vulling van de knop Submit |
| Background notification | De achtergrond van de vergrendelingskaart |
| Background input passcode | De vulling van het veld voor de toegangscode |
Elke kleur toont een kleurstaal en hex-waarde. Klik om de kiezer te openen.
Schakelaars voor slagschaduw en logo-afbeelding
Section titled “Schakelaars voor slagschaduw en logo-afbeelding”Twee schakelaars staan helemaal bovenaan het gedeelte Design, boven de kleurkiezers:
- Box shadow: voegt een slagschaduw toe rond de vergrendelingskaart (de kleur ervan stel je hieronder in met Box shadow color).
- Use image: toont de vergrendelingsillustratie op de kaart. Zet deze uit voor een kaart met alleen tekst.
Zet Box shadow of Use image aan om te wijzigen hoe de meldingskaart wordt weergegeven.
Placeholder card
Section titled “Placeholder card”Selecteer Placeholder card in de zijbalk om de stijl aan te passen van wat klanten zien in plaats van een vergrendeld product wanneer dat in een lijst verschijnt, zoals op een collectiepagina.
Het scherm Placeholder card bepaalt hoe vergrendelde artikelen in productlijsten verschijnen.
Aangepaste CSS per vergrendeling
Section titled “Aangepaste CSS per vergrendeling”Onderaan het gedeelte Design staat een editor Custom css. Alles wat je hier invoert, geldt alleen voor de widgets van deze ene vergrendeling. Het is een goede plek voor een kleine aanpassing die je thema nodig heeft (een lettergrootte, een marge) zonder de eigen stylesheet van je thema aan te raken.
Elke vergrendeling heeft een eigen editor Custom css voor eenmalige opmaak.
Het paneel met live voorbeeld
Section titled “Het paneel met live voorbeeld”De rechterkolom van het paneel Customize templates toont altijd een live voorbeeld in de stijl van je webshop van het scherm dat je hebt geselecteerd. Wijzigingen in kleur en stijl verschijnen direct, zonder op te slaan. Bovenaan het paneel kun je met een schakelaar Desktop preview / Mobile preview controleren hoe hetzelfde scherm in elk formaat wordt weergegeven.
Schakel tussen desktop- en mobiel voorbeeld om beide indelingen te controleren voordat je opslaat.
Omdat dit hele paneel zich in de editor van één specifieke vergrendeling bevindt, weerspiegelt het voorbeeld altijd de eigen instellingen van die vergrendeling (content, regels en ontwerp) en niet een algemeen voorbeeld.