Conteúdo e elementos da barra
Os seis elementos que uma barra pode conter, como ordená-los e como os grupos fazem um banner dizer duas coisas.
O painel Content é o primeiro ícone na lateral do construtor. Ele reúne tudo o que a barra diz.
Os elementos aparecem da esquerda para a direita na barra, na ordem em que estão nesta lista.
Como adicionar e ordenar
Seção intitulada “Como adicionar e ordenar”- Add element abre um menu com os seis tipos. O novo elemento vai para o final da lista.
- Arraste a alça à esquerda de uma linha para movê-la. A barra segue a ordem daqui.
- Passe o mouse sobre uma linha para ver os botões de duplicar e excluir.
- Clique em uma linha para abrir as configurações dela na coluna à direita.
Os seis elementos
Seção intitulada “Os seis elementos”A mensagem. Defina as palavras, o tamanho, negrito, itálico, sublinhado e uma cor própria.
Deixe a cor vazia e o texto segue a cor de texto da própria barra, então mudar o estilo da barra leva a mensagem junto.
Countdown
Seção intitulada “Countdown”Um cronômetro ao vivo dentro da barra. Ele tem três modos:
| Modo | O que quem visita a loja vê |
|---|---|
| Count down to a date | Todas as pessoas veem o mesmo tempo restante |
| Fixed minutes per visitor | Cada pessoa recebe o próprio relógio ao chegar |
| Daily recurring | Funciona em dias da semana escolhidos, entre dois horários |
Você também escolhe quais unidades aparecem (dias, horas, minutos, segundos), se as legendas das unidades aparecem sob os números e o que elas dizem. Deixe uma legenda em branco para usar o padrão em inglês.
When the timer ends define o que acontece quando chega a zero: ocultar o banner, mantê-lo em zero ou reiniciá-lo.
Um rótulo mais uma ação:
| Ao clicar | O que faz |
|---|---|
| Open a link | Envia a pessoa para uma URL |
| Scroll to a section | Vai até uma parte da página atual, por seletor CSS |
| Apply a discount code | Aplica o código ao carrinho da pessoa |
Para um link, você também pode ativar Open in a new tab, que mantém a sua loja aberta por trás.
O restante é estilo: forma (quadrada, arredondada, pílula), tamanho da fonte, predefinição de tamanho, negrito/itálico/sublinhado, fundo, cor do rótulo e borda.
Discount code
Seção intitulada “Discount code”O código em si, exibido com contorno tracejado. Ative Copy on click e a pessoa copia o código ao clicar nele, sem selecionar nem digitar.
Defina o estilo com um estilo de borda, raio dos cantos e uma cor própria.
Um logotipo ou selo. Cole uma URL ou envie um arquivo e o campo é preenchido sozinho. Defina a altura e o texto alternativo.
O texto alternativo é o que os leitores de tela anunciam e o que aparece se a imagem não carregar.
Line break
Seção intitulada “Line break”Nada para ver. Tudo o que vem depois começa em uma nova linha, então uma barra longa pode ocupar duas linhas em vez de uma só espremida.
Arraste-o entre dois elementos para dividir a barra onde quiser.
Um elemento, duas telas
Seção intitulada “Um elemento, duas telas”Abra qualquer elemento, exceto uma quebra de linha, e a seção Style dele começa com Device settings, com três ícones: um olho, um computador e um celular.
Device settings fica no topo de Style, e tudo abaixo dele segue o ícone escolhido.
O olho é o caso comum: o que você define vale para as duas telas.
Os ícones de computador e celular restringem as configurações abaixo deles a essa tela. Escolha o celular, reduza o tamanho da fonte para 12 e só os celulares recebem 12; os computadores mantêm o que o olho definiu. Tudo em Style se divide assim: tamanhos de fonte, tamanhos dos números e rótulos de um cronômetro, as cores dele e quais unidades ele mostra, a altura de uma imagem, a forma e o tamanho de um botão, a borda e a cor de um código de desconto.
Escolher uma tela também revela uma opção Hide on desktop ou Hide on mobile. É assim que você remove um elemento que não cabe no celular, como uma frase longa ou uma imagem, sem criar um segundo banner. Ele continua aparecendo na outra tela.
Uma quebra de linha não tem seção Style, então ela mantém um controle simples Show on: Both screens, Desktop only ou Mobile only.
Grupos: um banner, duas mensagens
Seção intitulada “Grupos: um banner, duas mensagens”Abaixo da lista de elementos fica Add group.
Um grupo é o caso comum. Adicione um segundo e a barra alterna entre eles: o primeiro grupo aparece, depois o segundo e depois volta ao primeiro. Cada grupo tem seus próprios elementos, então um banner pode alternar entre “Free shipping over $50” e “Sale ends tonight”.
A velocidade da troca e se ela é feita com fade ou deslize estão em Animação e grupos.