Crie o design de uma contagem regressiva
Altere cores, fontes, fundos, bordas e espaçamento para que a contagem regressiva combine com a sua loja.
Um modelo dá a você um visual inicial. A guia Design é onde você o torna seu, ou o reconstrói por completo, já que todas as partes são editáveis.
Os cronômetros e as datas estimadas de entrega têm uma guia Design completa. As contagens de estoque e de carrinho têm menos opções e as mantêm dentro da guia Settings.
A guia Design, com a prévia sendo atualizada conforme você altera as configurações.
Trocar de modelo
Seção intitulada “Trocar de modelo”Você não fica preso ao design escolhido no início. Abra o seletor de modelos dentro do construtor e escolha outro. As estações ficam em guias no topo: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas e Winter Sales.
Trocar de modelo substitui o design. O texto, o horário e as condições são mantidos.
Design do cronômetro
Seção intitulada “Design do cronômetro”A guia Design do cronômetro tem quatro seções, além do CSS personalizado.
Design Main Section
Seção intitulada “Design Main Section”O contêiner externo da contagem regressiva, o painel dentro do qual todo o resto fica.
| Grupo | Controles |
|---|---|
| Background | Uma cor sólida ou uma imagem enviada. Com cor, você tem uma Main background color com valores separados para Left e Right: um preenchimento liso usa a mesma cor nos dois, e um degradê usa duas |
| Overlay image | Escurece uma imagem de fundo enviada para que o texto continue legível sobre ela |
| Text | A fonte de toda a contagem regressiva. Ative Use custom font style para escolher uma família e um peso de fonte |
| Padding | Espaço dentro do painel, definido como Top / Right e Bottom / Left |
| Border | Tamanho, raio, estilo (Solid, Dotted ou Dashed) e cor da borda |
| Shadow | Yes ou No |
Element styling: Title and Subtitle
Seção intitulada “Element styling: Title and Subtitle”Title e Subtitle têm, cada um, a própria fonte, tamanho de fonte, cor e margens. É aqui que você faz o título se destacar e o subtítulo ficar em segundo plano, ou aproxima os dois.
Design Timer Section
Seção intitulada “Design Timer Section”Os próprios dígitos.
| Grupo | Controles |
|---|---|
| Font | Timer font size para os números e Label font size para as palavras abaixo deles |
| Border | Tamanho e estilo da caixa ao redor de cada unidade |
| Color | Number color, Data text color para os rótulos, Background color para a caixa de cada unidade, Dot color para os separadores e Border color |
| Padding | Espaço dentro da caixa de cada unidade |
Definir fundo e borda nas unidades dá o visual em caixas; deixar os dois em branco dá números simples sobre o painel.
Se você ativou o botão, ele tem a própria borda (raio, tamanho, estilo), cores (fundo, texto, borda) e padding.
Design Mobile Section
Seção intitulada “Design Mobile Section”Tamanhos de fonte separados para celulares, descritos no app como “Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.”
Você pode definir tamanhos específicos para celular de Title, Subtitle, Timer number e Timer label, além do padding no celular.
Vale reservar um minuto para esta seção em toda contagem regressiva. Um título que fica bom em 25px no computador costuma ser grande demais no celular, e quatro unidades de cronômetro no tamanho do computador muitas vezes quebram de linha ou transbordam.
Design da data estimada de entrega
Seção intitulada “Design da data estimada de entrega”A guia Design de uma data de entrega é dividida de acordo com as duas partes dela:
- Design Main Widget: a mensagem, com fontes, cores, tamanho, bordas e espaçamento.
- Design Process Widget: a barra Ordered → Dispatched → Delivered, com ícones, cores e espaçamento.
Se o seu layout for Message only ou Progress bar only, só a metade correspondente importa.
Design das contagens de estoque e de carrinho
Seção intitulada “Design das contagens de estoque e de carrinho”Estas duas têm os controles de design dentro da guia Settings.
Stock countdown oferece Alignment, cores separadas para a mensagem, o controle deslizante, o número do estoque e o fundo, e uma Animation: None, Flash ou Pulse.
Cart countdown oferece posição, cores para a mensagem, o cronômetro e o fundo, bordas e fontes.
CSS personalizado
Seção intitulada “CSS personalizado”Todo tipo termina com uma caixa Custom CSS (Developer Zone) para o que os controles não cobrem. Consulte CSS personalizado.
Dicas práticas
Seção intitulada “Dicas práticas”Aproveite o seu tema. Uma contagem regressiva com as cores da sua marca parece parte da loja; uma com os padrões do modelo parece colada por cima. A cor de destaque do seu tema costuma ser o fundo certo.
O contraste importa mais que a cor. Os números são o ponto central: garanta que fiquem legíveis sobre o que estiver atrás deles, inclusive no menor tamanho da faixa.
Confira em uma página real. A prévia mostra a contagem regressiva sozinha, sobre o próprio fundo. A sua página de produto tem preço, botão e imagens disputando atenção com ela.
Confira em um celular. Use a Design Mobile Section em vez de aceitar o que os tamanhos do computador fazem em uma tela pequena.