Configurações de estilo de mensagens no app
A experiência de edição de arrastar e soltar é dividida em duas seções: Build e Preview & Test. Este artigo aborda o que você precisa saber para trabalhar na guia Build do editor e pressupõe que você já criou uma mensagem no app.
Estilos no nível da mensagem
Você pode definir determinados estilos para serem aplicados em todos os blocos relevantes da sua mensagem no app a partir da guia Message Styles. Por exemplo, você pode querer personalizar a fonte de todo o texto ou a cor de todos os links na sua mensagem.
Os estilos nesta seção são usados em toda a sua mensagem, exceto quando você os substitui para um bloco específico. Se a sua mensagem tiver várias páginas, você também pode substituir os estilos no nível da mensagem para páginas individuais, exceto o tipo de exibição e a largura máxima.
Para uma experiência de design mais fácil, recomendamos configurar os estilos no nível da mensagem antes de personalizar os estilos no nível do bloco.
Para retornar à guia Message Styles a qualquer momento:
- Clique no botão X de fechar nas propriedades de blocos individuais
- Selecione o contêiner da mensagem, o botão X de fechar da mensagem ou o plano de fundo do editor
Fontes personalizadas
Aceitamos os seguintes tipos de arquivo para fontes: .ttf, .woff, .otf e .woff2. Para saber mais, consulte Arquivos de ativos.
Você pode adicionar múltiplas variações de uma família de fontes, pois algumas opções de estilo podem não estar disponíveis para fontes personalizadas. Atualmente, não oferecemos suporte para adicionar fontes via URL.
Para adicionar uma fonte personalizada:
- Acesse a seção Content na guia Message styles.
- Clique em Add custom font.
- Faça upload da sua fonte usando a biblioteca de mídia.
A fonte no nível da mensagem será aplicada apenas à mensagem atual e a quaisquer mensagens duplicadas, mas não a modelos futuros.
Componentes da mensagem
O editor de arrastar e soltar usa dois componentes principais para compor mensagens no app: linhas e blocos. Todos os blocos devem ser colocados em uma linha.
Botão X de fechar
Para mensagens no app do tipo modal e tela cheia, você pode personalizar o botão de fechar exibido como no canto superior direito da sua mensagem. As opções de personalização incluem posição do botão, tamanho, cor de preenchimento, cor de fundo, estilo da borda e raio da borda.
Estilização com span
Adicionar estilização com span ao texto dentro de mensagens no app permite uma personalização aprimorada da aparência da mensagem, possibilitando o uso de diferentes cores de texto, fontes e tamanhos. A estilização com span oferece aos seus usuários uma experiência mais envolvente e visualmente atraente, direcionando a atenção deles para informações importantes e melhorando a clareza geral da mensagem.
Linhas
Linhas são unidades estruturais que definem a composição horizontal de uma seção da mensagem usando células.
Quando uma linha é selecionada, você pode adicionar ou remover o número de colunas necessárias na seção Column customization para colocar diferentes elementos de conteúdo lado a lado.
Você também pode deslizar para ajustar o tamanho das colunas existentes.
Como prática recomendada, formate as propriedades de linha e coluna antes de formatar qualquer um dos blocos dentro das linhas. Existem muitos lugares onde você pode ajustar o espaçamento e o alinhamento, então começar pela base facilita a edição ao longo do processo.
Imagem de fundo
Você pode adicionar uma imagem de fundo a uma linha no painel Row properties. Ative a opção Background image e forneça uma URL de imagem ou selecione uma imagem da biblioteca de mídia. Por fim, configure o texto alternativo, o tamanho, a posição e se a imagem se repete para criar padrões ao longo da linha.
Blocos
Blocos representam diferentes tipos de conteúdo que você pode usar na sua mensagem. Arraste um para dentro de um segmento de linha existente, e ele se ajustará automaticamente à largura da célula.
Antes de adicionar blocos, configure os estilos no nível da mensagem para o contêiner da mensagem, fonte, cores e qualquer outra coisa que você queira personalizar. Depois, você pode personalizar blocos individuais conforme necessário. O botão de fechar permanecerá na seção superior da sua mensagem para que os usuários sempre tenham a opção de dispensar a mensagem.
Cada bloco tem suas próprias configurações, como controle granular de preenchimento (padding). O painel do lado direito alterna automaticamente para um painel de estilização do elemento de conteúdo selecionado. Para saber mais, consulte Propriedades dos blocos do editor.
Ao criar sua mensagem no app, você pode selecionar uma visualização para celular, tablet ou desktop na barra de ferramentas para pré-visualizar como sua mensagem no app ficará para seus grupos de usuários. Isso garante que seu conteúdo seja responsivo, e você pode fazer os ajustes necessários ao longo do caminho.
Detalhes criativos
Tela cheia em telas maiores
Em um tablet ou navegador de desktop, uma mensagem no app em tela cheia ficará centralizada na tela do app. Quaisquer edições na largura máxima da mensagem em tela cheia serão aplicadas apenas a dispositivos tablet e desktop.
Adicionando uma imagem de fundo
Você pode adicionar uma imagem ao fundo da sua mensagem a partir da guia Message styles.
- Na área do canvas, selecione o contêiner de fundo. Esta é a seção rolável da sua mensagem.
- Na guia Message styles, ative a opção Background image.
- Adicione uma imagem da sua biblioteca de mídia ou insira a URL onde sua imagem está hospedada.
Se você estiver com dificuldade para selecionar um determinado bloco, pode usar a seta para cima na barra de ferramentas inline do bloco para mover o foco para cada bloco pai.
Adicionando Liquid
Para adicionar Liquid à sua mensagem no app, selecione Add Personalization na barra de ferramentas do editor. Aqui, você pode adicionar vários tipos de personalização, como atributos padrão, atributos de dispositivo, atributos personalizados e muito mais.
Em seguida, pegue o snippet Liquid gerado e insira-o na sua mensagem. Após projetar e criar sua mensagem no app, acesse Preview & Test para pré-visualizar sua mensagem.
Usando o assistente de copywriting com IA
Quando um bloco de texto é selecionado na sua mensagem no app, clique em na barra de ferramentas do bloco para abrir o assistente de copywriting com IA. O assistente de copywriting com IA envia um breve nome ou descrição do produto para a ferramenta de geração de texto GPT3 da OpenAI para gerar textos de marketing semelhantes aos escritos por humanos para suas mensagens.
Você pode economizar alguns cliques destacando o texto dentro do bloco antes de clicar no ícone. O texto destacado será adicionado à ferramenta, e o texto será gerado imediatamente.
Redefinindo estilos para o padrão
Propriedades que você alterou em relação ao estilo padrão são marcadas com um ponto laranja. Para redefinir uma propriedade específica para seu estilo padrão, passe o mouse sobre o campo e selecione Reset to default.
Você também pode redefinir toda a estilização de um elemento selecionado clicando em ao lado do nome do painel de propriedades e selecionando Reset to default styles.
Copiando e colando estilos
Após fazer alterações na estilização de um elemento, você pode copiar e colar esses estilos em outro elemento. Ao colar estilos, apenas as propriedades relevantes para aquele elemento são aplicadas.
- Com o elemento selecionado, clique em ao lado do nome do painel de propriedades (por exemplo, se você tiver um botão selecionado, ao lado de “Button properties”).
- Clique em Copy styles e selecione o elemento onde deseja aplicar o estilo copiado.
- Clique em novamente e escolha Paste styles.
Atalhos de teclado
Você também pode usar atalhos de teclado para copiar e colar estilos:
| Ação | Mac | Windows |
|---|---|---|
| Copiar estilos | ⌘ + Shift + c | Ctrl + Shift + c |
| Colar estilos | ⌘ + Shift + v | Ctrl + Shift + v |