Página de senha
O que você vai aprender
- Pra que serve esta section
- Como funciona a tela de carregamento
- O efeito de vidro fosco no conteúdo
Pra que serve
É a página de "loja fechada" completa: fundo em tela cheia (cor, imagem/GIF ou vídeo, com versões separadas pra desktop e celular), uma tela de carregamento com logo animado antes de revelar a página, e uma caixa central com o conteúdo (blocks livres: texto, formulário de inscrição, etc.) sobre um efeito de vidro fosco.
ℹ️ A tela de carregamento aparece só uma vez por sessão do navegador: ela some sozinha depois da duração configurada e não volta a aparecer se a pessoa atualizar a página ou enviar um formulário (só volta numa aba anônima nova, ou depois de fechar e reabrir o navegador). Isso é intencional, pra não repetir a animação toda vez que a pessoa interage com a página.
Como adicionar
Esta section já vem no template de senha por padrão. Você ajusta as configurações e adiciona os blocks de conteúdo (normalmente Texto, Inscrição (senha) e Botão de senha).
Como configurar
Plano de fundo
| Configuração | Pra que serve |
|---|---|
| Estilo | Cor sólida, Imagem/GIF, ou Vídeo. |
| Desktop / Celular | Versões separadas de imagem ou vídeo pra cada dispositivo (opcional, cai no desktop se não preencher a de celular). |
| Sobreposição de mídia | Camada de cor sobre o fundo, pra dar contraste ao conteúdo. |
Conteúdo
| Configuração | Pra que serve |
|---|---|
| Esquema de cores | Cor da caixa de conteúdo central. |
| Raio do canto | Arredondamento da caixa. |
| Sombra projetada | Sombra sutil atrás da caixa. |
| Desfoque | Ativa o efeito de vidro fosco (fundo semitransparente e borrado) atrás do conteúdo. |
Tela de carregamento
| Configuração | Pra que serve |
|---|---|
| Mostrar tela de carregamento | Liga/desliga a animação de entrada. |
| Logo | Logo mostrado durante o carregamento (opcional). |
| Duração | Quanto tempo a tela de carregamento fica visível antes de sumir. |
Boas práticas
- Pra testar a tela de carregamento repetidamente durante a configuração, use uma aba anônima/privada a cada teste, senão ela só aparece na primeira vez.
- O fundo é em tela cheia, sem proporção fixa. Envie imagens grandes (pelo menos 1920px de largura no desktop) mas comprimidas, veja Dimensão de imagem, essa costuma ser a primeira (e às vezes única) página que o visitante vê antes do lançamento.