Configurar as definições do modelo in-app

Estas configurações se aplicam a todo o modelo in-app de uma vez, em vez de a um único bloco. Primeiro, abra ou crie um modelo no editor integrado (Conteúdo → In-apps), depois use Configurações e Configurações do in-app como descrito abaixo.

Configurar o estilo de todo o modelo

As configurações do modelo controlam o estilo de todo o modelo in-app: tamanho e fundo do documento, aparência do popup e estilos padrão para os blocos.

Abra a aba Configurações no painel direito.

Seções de Configurações recolhidas, de Documento a Padrões de Divisor, no painel direito

Comece com a aparência compartilhada, depois o tamanho e, em seguida, os padrões para novos blocos:

Defina o Esquema de cores e a Tipografia para que as cores e as fontes permaneçam consistentes em todo o modelo.
Defina Documento e Popup para tamanho, margens, fundo e como a mensagem se posiciona sobre o fundo escurecido.
Use as seções de padrões apenas quando quiser que novos blocos correspondam automaticamente ao modelo.

Na tela de edição, altere um único bloco quando essa parte precisar ter uma aparência diferente. Os padrões se aplicam onde um bloco individual não os substitui. Para limpar as substituições de estilo no modelo e retornar aos padrões, use Redefinir estilos personalizados no menu ⋮ da barra superior. Consulte Criar mensagens in-app no editor integrado.

Use Documento para controlar o tamanho da mensagem e o espaçamento na tela de edição. Use Popup para controlar como a mensagem se posiciona sobre o fundo escurecido. Não há configuração de altura. O popup cresce com seu conteúdo.

Documento

Em Documento, defina o preenchimento (padding), uma imagem de fundo, o espaço entre os blocos e um raio de canto padrão para as imagens.

Para alterar a largura do popup no telefone, use estes dois campos em Documento.

Largura máxima (px) é a largura máxima que o popup pode ter, em pixels. Em uma tela grande, o popup não ultrapassará esse número.

Margens laterais (px) fica logo abaixo de Preenchimento. Define o espaço vazio à esquerda e à direita do popup. Um valor se aplica a ambos os lados. Altere este campo quando quiser que o popup pareça mais largo ou mais estreito:

Aumente o número para deixar mais espaço vazio e tornar o popup mais estreito.
Diminua o número para tornar o popup mais largo.
Insira um número negativo e o editor o tratará como 0.

Documento aberto com Largura máxima, Preenchimento, Margens laterais em 0 px e a dica de largura efetiva

Novos modelos começam com 0 px de margens laterais, então o popup preenche a largura da tela.

Verifique a dica abaixo de Largura máxima para ver qual será a largura do popup com seus valores atuais.

Em Popup, defina o raio do canto e a cor da sobreposição para como a mensagem se posiciona sobre o fundo escurecido.

Esquema de cores e tipografia

Em Esquema de cores, defina funções de cores nomeadas (título, destaque, links, fundo, bordas e mais). Essas funções atualizam as cores em todo o modelo de uma vez. Os blocos existentes mantêm as cores que você já definiu neles.

Em Tipografia, defina a família de fontes padrão e o dimensionamento para o texto no modelo.

Variante de modo escuro

Variante de modo escuro permite que você defina um segundo conjunto de cores para quando o modelo for exibido no modo escuro.

Em Esquema de cores, ative a Variante de modo escuro.
Defina as cores separadas para o modo escuro.
Use o ícone de sol/lua na barra superior para verificar o modo claro vs. escuro enquanto edita.

Este seletor na tela de edição não é o mesmo que o painel de Visualização somente leitura. Até que você defina suas próprias cores escuras, o seletor pode derivá-las automaticamente. Consulte Criar mensagens in-app no editor integrado.

Seção Esquema de cores com a Variante de modo escuro ativada e funções de cores escuras em Configurações

Padrões de bloco e layout

Use estas seções para que o novo conteúdo corresponda ao modelo até que você estilize um bloco na tela de edição:

Padrões de bloco: estilos iniciais compartilhados para blocos que você adicionar mais tarde.
Padrões de colunas: espaçamento para cada layout de Colunas (preenchimento externo, preenchimento dentro de cada coluna e o espaço entre as colunas).
Padrões de cartão: aparência inicial para contêineres de Cartão que agrupam conteúdo no layout.
Padrões de grupo de botões: espaçamento e alinhamento quando vários botões estão juntos como um grupo.
Padrões de botão: aparência inicial para novos blocos de Botão para que os CTAs permaneçam consistentes em todo o modelo.
Padrões de divisor: estilo de linha inicial, cor, espessura e largura para novos blocos de Divisor.

Quando terminar em Configurações, clique em Salvar na barra superior para manter as alterações do modelo.

Configurar a aparência do in-app no dispositivo

Configurações do in-app controlam como a mensagem aparece e se comporta no dispositivo: posição, animações, gestos de deslizar e o botão de fechar. Posição, animações e deslizar se aplicam no iOS e Android Nativo. O estilo do botão de fechar é diferente. Ele é armazenado com este modelo e aparece em todas as plataformas que exibem a mensagem.

Clique em Configurações do in-app na barra superior.

Botão de configurações do in-app na barra superior do editor, entre Desfazer, Refazer e Salvar

Posição na tela

Escolha Tela cheia, Superior, Centro ou Inferior.

Para uma mensagem em tela cheia, defina também a Largura máxima em Documento, conforme descrito em Documento.

Opções de Posição na Tela nas configurações do in-app: Tela cheia, Superior, Centro, Inferior

Animações

Animação de apresentação / Animação de fechamento: Nenhuma, Esmaecer, Esquerda, Direita, Para cima ou Para baixo. Escolha Padrão para usar o mesmo movimento de abrir/fechar que seu aplicativo já usa para in-apps.
Duração da animação (MS): 100 a 3000 milissegundos. Deixe em branco para manter o tempo usual do seu aplicativo.

Campos de Animação de apresentação, Animação de fechamento e Duração da animação nas configurações do in-app

Deslizar para fechar

Ative qualquer combinação de Esquerda, Direita, Para cima e Para baixo.

Botão de fechar

Ative ou desative Mostrar botão de fechar.

Quando estiver ativado, defina:

Posição: Superior direito, Superior esquerdo, Inferior direito ou Inferior esquerdo.
Fundo: uma cor ou Transparente.
Raio do canto: arredonda os cantos do fundo do botão de fechar. Disponível apenas quando o Fundo é uma cor (não Transparente). Defina 0–16 px. 16 px cria um círculo (padrão). 0 px cria um quadrado.
Cor do ícone: cor do ícone de fechar.
Margem: espaço ao redor do botão de fechar em cada lado (Superior, Direita, Inferior, Esquerda).

Configurações do in-app Mostrar botão de fechar com Posição, Fundo, Raio do canto, Cor do ícone e Margem

Diferente da posição, animações e deslizar, o estilo do botão de fechar é armazenado com este modelo e aparece em todas as plataformas que exibem a mensagem, não apenas no iOS e Android Nativo.

Clique em Aplicar para salvar suas escolhas de Configurações do in-app, ou em Cancelar para descartá-las.
Abra a Visualização no menu ⋮ da barra superior para verificar a posição, as animações e o botão de fechar antes de salvar.
Clique em Salvar na barra superior para armazenar o modelo.