Página de entrada
O que você vai aprender
- Pra que serve esta section e onde ela deve ficar
- Como funciona a tela de carregamento
- Os 3 tipos de fundo disponíveis
Pra que serve
✨ Recurso exclusivo deste tema: uma "porta de entrada" em tela cheia, pensada como primeira impressão de marca antes do visitante ver a loja em si. Mostra um fundo (cor, imagem ou vídeo) ocupando a tela toda, com logo e até 5 botões centralizados por cima, normalmente usados como um menu de entrada (ex: "Feminino", "Masculino", "Nova coleção").
Essa é a section que gera o grupo de configuração Página de entrada que aparece listado junto das outras sections no Editor de temas, ela é pensada pra ser a única (ou primeira) section de um template dedicado de entrada do site, não pra conviver empilhada com outras sections numa página comum.
💡 Ao carregar a página pela primeira vez numa aba (sessão do navegador), aparece uma tela de carregamento com logo e barra de progresso por alguns segundos antes do fundo aparecer. Recarregar a mesma página (F5) na mesma aba não mostra a tela de novo, ela só reaparece se o visitante abrir o site numa aba/sessão nova.
Como configurar
Fundo
| Configuração | Pra que serve |
|---|---|
| Estilo | Cor sólida, Imagem/GIF, ou Vídeo. |
| Cor | Só aparece com estilo "Cor". |
| Imagem (desktop/celular) | Só aparece com estilo "Imagem/GIF", permite enviar uma versão diferente pro celular. |
| Vídeo (desktop/celular) | Só aparece com estilo "Vídeo", mesma lógica de versão separada por dispositivo. |
| Sobreposição da mídia | Camada de cor (sólida ou gradiente) por cima da imagem/vídeo de fundo, útil pra manter contraste dos botões. |
Conteúdo
| Configuração | Pra que serve |
|---|---|
| Esquema de cores | Cor de fundo/texto do cartão central onde ficam o logo e os botões. |
| Raio do canto | Arredondamento do cartão central. |
| Bordas | Nenhuma ou Sólida. |
| Sombra | Ativa uma sombra sutil ao redor do cartão. |
| Desfoque de fundo | Deixa o fundo do cartão semitransparente com efeito de desfoque (o fundo da página aparece borrado atrás dele), em vez de sólido. |
Ajustes
| Configuração | Pra que serve |
|---|---|
| Largura no desktop | Largura máxima do cartão central. |
| Espaçamento | Distância entre o logo e os botões, e entre os botões entre si. |
Tela de carregamento
| Configuração | Pra que serve |
|---|---|
| Mostrar tela de carregamento | Liga/desliga esse efeito por completo. |
| Cor de fundo | Cor da tela de carregamento. |
| Logo | Imagem mostrada centralizada durante o carregamento (pode ser diferente do logo principal da loja). |
| Largura do logo | Tamanho do logo na tela de carregamento. |
| Duração | Quanto tempo a barra de progresso demora até a tela sumir, em segundos. |
Boas práticas
- Use esta section como única section de um template de página dedicado (ex: uma "Home de entrada"), não misturada com o restante do conteúdo da loja.
- Se usar vídeo de fundo, prefira arquivos leves e curtos em loop, o mesmo cuidado de performance de qualquer vídeo de fundo vale aqui, ainda mais sendo a primeira coisa que o visitante carrega.
- Os botões (até 5) usam o block Botão comum, edite rótulo, link e estilo de cada um neles.