Perfiles de color y plantillas CSS

Puedes guardar plantillas de mensajes en la aplicación y en el navegador en el panel de control para crear rápidamente nuevas campañas y mensajes con tu estilo.

Vaya a Plantillas > Plantillas de mensajes In-App.

Desde esta página, puedes editar las plantillas existentes o hacer clic en + Crear y elegir Perfil de color o Plantilla CSS para crear nuevas plantillas y utilizarlas en tus mensajes dentro de la aplicación.

Perfil de color

Puede personalizar la combinación de colores de la plantilla de mensajes introduciendo un código de color HEX o haciendo clic en el cuadro de color y seleccionando un color con el selector de color.

Haz clic en Guardar perfil de color cuando hayas terminado.

Gestión de perfiles de color

También puedes duplicar y archivar plantillas. Más información sobre la creación y gestión de plantillas y contenido creativo en Plantillas y medios.

Plantilla CSS

Puedes personalizar una plantilla CSS completa para tu mensaje modal web in-app.

Nombre y etiquete su Plantilla CSS, luego elija si será o no su plantilla por defecto. Puede escribir su propio CSS en el espacio proporcionado. Este espacio ya está rellenado con el CSS que se muestra en la vista previa del mensaje, y puedes ajustarlo ligeramente para adaptarlo a tus necesidades.

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 puedes ver, puedes editarlo todo, desde el color de fondo hasta el tamaño y el peso de la fuente, y mucho más.

Gestión de plantillas CSS

También puedes duplicar y archivar plantillas. Más información sobre la creación y gestión de plantillas y contenido creativo en Plantillas y medios.

Modal con CSS (sólo web)

Si decides utilizar un Modal Web sólo con mensaje CSS, puedes aplicar tu propia plantilla o escribir tu propio CSS en el espacio proporcionado. Este espacio ya está rellenado con el CSS que se muestra en la vista previa del mensaje, pero siéntete libre de ajustarlo ligeramente para satisfacer tus necesidades.

Si decides aplicar tu propia plantilla, haz clic en Aplicar plantilla y elige una de la galería de plantillas de mensajes de la aplicación. Si no tiene ninguna opción, puede cargar una plantilla CSS utilizando el generador de plantillas CSS.