Como usar texto formatado
O texto formatado é o elemento de texto do editor de templates. O estilo se aplica ao texto que você seleciona, e não ao bloco inteiro, então um mesmo elemento pode ter ao mesmo tempo várias fontes, tamanhos, cores e variáveis de produto.
O exemplo clássico é uma linha de preço: o preço anterior riscado em cinza ao lado do preço atual em vermelho e negrito, com os decimais elevados. Antes isso exigia dois ou três elementos de texto separados e alinhados à mão, que se desalinhavam assim que um produto tinha um preço mais longo. Agora é um único elemento que se reorganiza sozinho.
Adicionar texto formatado
Clique em "Texto" na barra de elementos.
A barra de ferramentas e onde ela se aplica
A barra de ferramentas fica acima do editor. O que ela muda depende do que está selecionado:
- Texto selecionado: a alteração vale só para essa seleção.
- Nada selecionado: a alteração define o padrão do elemento, que todos os trechos sem ajuste próprio seguem.
- Cursor em um parágrafo: o alinhamento vale para esse parágrafo.
Alguns controles sempre valem para o elemento inteiro, e a dica de cada um informa isso: altura da linha, preenchimento, estouro e direção do texto.
Controles disponíveis:
| Controle | O que faz |
|---|---|
| Fonte, tamanho, peso, itálico | Os controles tipográficos padrão, incluindo suas fontes personalizadas |
| Preenchimento do texto | Cor sólida ou gradiente com quantas paradas você precisar |
| Sublinhar, tachado | Decorações do texto |
| Elevação | Sobrescrito ou subscrito |
| Realce | Um fundo atrás do texto selecionado |
| Contorno do texto | Um traço ao redor dos caracteres, com espessura própria |
| Sombra do texto | Uma sombra nos caracteres, separada da sombra do elemento inteiro |
| Espaçamento | Espaçamento entre letras, por seleção |
| Transformar | Maiúsculas, minúsculas, iniciais maiúsculas |
| Alinhamento | Esquerda, centro, direita, justificado, por parágrafo |
| Limpar formatação | Remove os ajustes e volta aos padrões do elemento |
Negrito, itálico e sublinhado também funcionam com os atalhos de sempre, Cmd/Ctrl + B, I e U.
Inserir variáveis de produto
Clique em "Inserir variável" para adicionar um campo do produto, um campo extra ou um campo interno. As variáveis aparecem no editor como chips que mostram o valor do produto da pré-visualização atual, com o estilo com que serão renderizadas, para você ver o layout real enquanto escreve.
O seletor mostra a cobertura ao lado de cada campo, por exemplo only 812/1043, para você saber antes de usar um campo quantos dos seus produtos realmente o têm.
Um chip de variável aceita estilo como qualquer outro texto. Selecione-o e mude a fonte, a cor ou o peso, e só esse valor muda.
Formatação numérica por variável
Clique em um chip de variável para abrir as opções de formatação. A formatação é definida no chip, não no elemento, então dois preços no mesmo bloco podem ter formatações diferentes.
Você pode definir:
- Arredondamento: para cima, para baixo ou para o mais próximo
- Decimais: mostrar sempre, ocultar ou mostrar só quando necessário
- Decimal separator: vírgula ou ponto, e o separador de milhar se ajusta de acordo
- Raised decimals: mostra a parte decimal como sobrescrito, para o visual de 199,95 com decimais pequenos
Campos só de texto não mostram a formatação numérica.
Tamanho de texto automático
Ative "Tamanho de texto automático" e o elemento calcula o maior tamanho de fonte que cabe na caixa. Todos os trechos são redimensionados proporcionalmente, então os estilos combinados mantêm seus tamanhos relativos.
Com o tamanho de texto automático ativado, o campo de altura mostra a altura calculada em vez de aceitar um valor, e as alças de redimensionamento superior e inferior são removidas. Arraste as alças laterais para mudar a largura, e o texto se ajusta de novo.
É o que você quer para qualquer campo de tamanho imprevisível, como títulos de produto.
Estouro
O estouro controla o que acontece quando o texto não cabe na caixa:
- Embrulhar: quebra o texto em novas linhas
- Reticências: corta o texto na altura da caixa e termina com reticências
O texto é cortado no nível do caractere, então uma palavra longa é truncada em vez de sumir por completo.
Direção do texto
A direção do texto é definida no elemento, no controle de direção da barra de ferramentas. Use da direita para a esquerda para árabe, hebraico e escritas parecidas.
Elementos de texto existentes
Os elementos de texto criados antes do texto formatado continuam funcionando e podem ser editados, mas não recebem os novos recursos. Se quiser estilos combinados ou tamanho de texto automático em um elemento antigo, adicione um novo elemento de texto formatado e passe o conteúdo para ele.