Perfis de cores e modelos CSS

Você pode salvar modelos de mensagens no aplicativo e no navegador no painel para criar rapidamente novas campanhas e mensagens usando seu estilo.

Vá para Modelos > Modelos de mensagens no aplicativo.

Nessa página, você pode editar os modelos existentes ou clicar em + Criar e escolher Perfil de cor ou Modelo CSS para criar novos modelos a serem usados em suas mensagens no aplicativo.

Perfil de cores

Você pode personalizar o esquema de cores do modelo de mensagem inserindo um código de cor HEX ou clicando na caixa colorida e selecionando uma cor com o seletor de cores.

Clique em Save Color Profile (Salvar perfil de cor ) quando terminar.

Gerenciamento de perfis de cores

Você também pode duplicar e arquivar modelos! Saiba mais sobre como criar e gerenciar modelos e conteúdo criativo em Templates & Media.

Modelo CSS

Você pode personalizar um modelo CSS completo para sua mensagem in-app modal da Web.

Nomeie e marque seu modelo CSS e, em seguida, escolha se ele será ou não seu modelo padrão. Você pode escrever seu próprio CSS no espaço fornecido. Esse espaço já está pré-preenchido com o CSS mostrado na visualização da mensagem e você deve se sentir à vontade para ajustá-lo ligeiramente para atender às suas necessidades.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.ab-message-header, .ab-message-text {
  color: #333333;
  text-align: center;
}

.ab-message-header {
  font-size: 20px;
  font-weight: bold;
}

.ab-message-text {
  font-size: 14px;
  font-weight: normal;
}

.ab-close-button svg {
  fill: #9b9b9b;
}

.ab-message-button {
  border: 1px solid #1b78cf;
  font-size: 14px;
  font-weight: bold;
}
.ab-message-button:first-of-type {
  background-color: white;
  color: #1b78cf;
}
.ab-message-button:last-of-type, .ab-message-button:first-of-type:last-of-type {
  background-color: #1b78cf;
  color: white;
}

.ab-background {
  background-color: white;
}

.ab-icon {
  background-color: #0073d5;
  color: white;
}

.ab-page-blocker {
  background-color: rgba(51, 51, 51, .75);
}

Como você pode ver, é possível editar tudo, desde a cor do plano de fundo até o tamanho e o peso da fonte, e muito mais.

Gerenciamento de modelos CSS

Você também pode duplicar e arquivar modelos! Saiba mais sobre como criar e gerenciar modelos e conteúdo criativo em Templates & Media.

Modal com CSS (somente na Web)

Se optar por usar uma mensagem Web Modal com CSS somente para a Web, você poderá aplicar seu próprio modelo ou escrever seu próprio CSS no espaço fornecido. Esse espaço já está pré-preenchido com o CSS mostrado na visualização da mensagem, mas fique à vontade para ajustá-lo ligeiramente para atender às suas necessidades.

Se você optar por aplicar seu próprio modelo, clique em Aplicar modelo e escolha na galeria de modelos de mensagens no aplicativo. Se você não tiver nenhuma opção, poderá carregar um modelo CSS usando o construtor de modelos CSS.