Cores e modelos
Estilize as cores, os botões e os modelos de um único bloqueio e veja o resultado ao vivo antes de salvar.
Cada bloqueio do Sami B2B Lock, Password Protect mantém as próprias configurações de design (cores, estilo de botão e algumas opções de exibição), totalmente separadas de todos os outros bloqueios. Isso significa que o seu catálogo de atacado protegido por código de acesso pode ter uma aparência bem diferente da mensagem “faça login para ver esta coleção”, mesmo que ambos sejam criados com o mesmo app. Nada do que você fizer nesta página afeta outros bloqueios.
Abrir o painel de design de um bloqueio
Seção intitulada “Abrir o painel de design de um bloqueio”- Abra o app e acesse Locks; depois abra o bloqueio que você quer reestilizar (ou crie um novo).
- Na aba Lock setup, encontre o cartão Preview à direita e clique em Customize templates.
Clique em Customize templates no cartão Preview do editor de bloqueios.
- Isso abre o painel de tela cheia Customize templates. A barra lateral esquerda lista as telas que este bloqueio pode mostrar a quem compra: Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link e Country Restriction, além de um controle Collapse sidebar na parte inferior. Clique em uma tela para carregar as configurações de Translation e Design na coluna do meio, com uma prévia ao vivo à direita.
O painel Customize templates: escolha uma tela à esquerda, estilize-a no meio e confira o resultado à direita.
- Na coluna do meio, role além da seção Translation (abordada em Traduzir mensagens do bloqueio) até a seção Design logo abaixo. Tudo neste guia está nessa seção Design.
Cada cor é uma amostra com o valor hexadecimal ao lado. Clique na amostra (ou no ícone de lápis) para abrir o seletor, escolha ou digite uma cor, e a prévia ao vivo à direita é atualizada imediatamente.
Na tela Passcode, por exemplo, você tem:
| Campo | O que estiliza |
|---|---|
| Color button text | O rótulo do botão Submit |
| Color text | O texto da mensagem de bloqueio |
| Color input passcode | O texto que a pessoa digita no campo de código de acesso |
| Box shadow color | A sombra do cartão, quando Box shadow está ativado |
| Background button | O preenchimento do botão Submit |
| Background notification | O fundo do cartão de bloqueio |
| Background input passcode | O preenchimento do campo de código de acesso |
Cada cor mostra uma amostra e o valor hexadecimal; clique para abrir o seletor.
Opções de sombra e imagem do logotipo
Seção intitulada “Opções de sombra e imagem do logotipo”Duas opções ficam no topo da seção Design, acima dos seletores de cor:
- Box shadow: adiciona uma sombra ao redor do cartão de bloqueio (a cor é definida em Box shadow color, abaixo).
- Use image: mostra a ilustração de bloqueio no cartão. Desative para ter um cartão somente com texto.
Ative Box shadow ou Use image para mudar a apresentação do cartão de notificação.
Placeholder card
Seção intitulada “Placeholder card”Selecione Placeholder card na barra lateral para estilizar o que as pessoas veem no lugar de um produto bloqueado quando ele aparece em uma lista, como em uma página de coleção.
A tela Placeholder card controla como os itens bloqueados aparecem nas listagens de produtos.
CSS personalizado por bloqueio
Seção intitulada “CSS personalizado por bloqueio”Na parte inferior da seção Design há um editor Custom css. Tudo o que você colocar ali vale apenas para os widgets deste bloqueio. É um bom lugar para um pequeno ajuste que o seu tema precisa (um tamanho de fonte, uma margem) sem mexer na folha de estilos do próprio tema.
Cada bloqueio tem o próprio editor Custom css para estilos pontuais.
O painel de prévia ao vivo
Seção intitulada “O painel de prévia ao vivo”A coluna da direita do painel Customize templates sempre mostra uma prévia ao vivo, com o estilo da loja virtual, da tela selecionada: as alterações de cor e estilo aparecem instantaneamente, sem salvar. No topo do painel, um seletor Desktop preview / Mobile preview permite conferir como a mesma tela é exibida em cada tamanho.
Alterne entre a prévia para desktop e para dispositivos móveis para conferir os dois layouts antes de salvar.
Como todo esse painel fica dentro do editor de um bloqueio específico, a prévia sempre reflete as configurações desse bloqueio (conteúdo, regras e design), e não um exemplo genérico.