Crie o design de um banner
Fundo, cores, espaçamento, o botão de fechar e como transformar a barra inteira em um link.
O painel Design é o ícone de pincel na lateral do construtor. Ele abrange tudo sobre a aparência da barra, exceto os elementos em si.
As configurações de Design valem para a barra inteira, e não para um único elemento.
Aparência e fundo
Seção intitulada “Aparência e fundo”Três estilos de fundo:
| Estilo | O que você define |
|---|---|
| Solid | Uma cor |
| Gradient | Uma cor inicial, uma cor final e um ângulo |
| Image | Uma imagem que cobre a barra |
| Configuração | O que ela abrange |
|---|---|
| Font | A fonte. Deixe a fonte do tema, a menos que a barra precise de uma própria. |
| Text | A cor do texto da barra |
| Accent | Botões, códigos de desconto e o cronômetro, a menos que algum tenha uma cor própria |
Vale entender bem o Accent. Defina-o uma vez e o botão, o contorno do código e o cronômetro o acompanham. Dê uma cor própria a um elemento e ele deixa de acompanhar.
Botão de fechar e link
Seção intitulada “Botão de fechar e link”Duas coisas separadas, ambas sobre o que acontece quando alguém interage com a barra.
Botão de fechar
Seção intitulada “Botão de fechar”Ative-o e um × aparece na extremidade da barra. Defina a cor dele e a cor ao passar o mouse.
Depois que a pessoa fecha o banner, ele permanece fechado para ela: o app lembra isso no navegador, então ele não reaparece na página seguinte.
Barra inteira clicável
Seção intitulada “Barra inteira clicável”Ative esta opção e um clique em qualquer ponto da barra abre o link definido abaixo dela. Open in a new tab mantém a sua loja aberta por trás.
Os cliques em um botão ou em um código de desconto dentro da barra continuam fazendo o que fazem; o link da barra não os intercepta.
Como os elementos se alinham dentro da barra.
| Configuração | O que faz |
|---|---|
| Alignment | Esquerda, centralizado, direita ou distribuído |
| Gap between elements | O espaço entre cada elemento |
| Wrap on small screens | Ativado, a linha quebra em outra linha quando falta espaço. Desativado, ela se comprime, o que pode cortar mensagens longas. |
Espaçamento
Seção intitulada “Espaçamento”Vertical padding é a altura da barra. Horizontal padding é a margem em cada extremidade.
Uma barra fina parece um aviso; uma alta parece uma seção da página. A maioria das barras de anúncio funciona melhor na versão fina.
CSS personalizado
Seção intitulada “CSS personalizado”No final do painel, Custom CSS (Developer Zone) aceita regras que se aplicam somente dentro deste banner. Elas não alcançam o restante do seu tema.
Use-o para o que os painéis não cobrem: uma sombra de texto, um espaçamento entre letras, uma borda diferente em um elemento.