Personalizar widgets y micrositios con el editor de contenido

El editor de contenido te permite crear widgets y micrositios que coincidan perfectamente con la identidad de tu marca, garantizando una experiencia coherente y confiable para tus clientes. Un punto de contacto bien marcado es fundamental para impulsar un alto nivel de interacción y la adopción del programa.

Controles de marca centralizados

Puedes encontrar y actualizar fácilmente los elementos de diseño principales de tu marca usando la opción de estilo de widget o micrositio. Todas las configuraciones de marca se encuentran en una sección dedicada a la marca.

Los widgets o micrositios se ven diferentes según el contexto del usuario, como si ha iniciado sesión, si ocurre un error o si se visualiza en un dispositivo móvil. Las vistas previas de nuestro editor te permiten alternar fácilmente entre todos los estados posibles de tu widget o micrositio.

Nota: La vista previa es más aplicable a los widgets (por ejemplo, widgets de acceso instantáneo) y componentes (por ejemplo, efectivo, intercambio de recompensas). Para previsualizar micrositios, necesitarías navegar a las diferentes páginas de micrositios para ver los estados.

Esto elimina la necesidad de completar acciones manualmente para ver cómo se verá un componente. Ahora puedes editar con confianza el texto y el diseño de cada paso del recorrido del usuario, incluyendo:

• Vistas con sesión iniciada vs. sin sesión

• Mensajes de error y de éxito

• Diferentes pasos en un flujo multipartes (como la verificación de pago en efectivo)

Para personalizar el estilo de tu marca:

1. En el menú de navegación izquierdo, seleccione [Engage] → Contenido.

   • Para widgets, selecciona Editar widgets y para micrositios, selecciona Editar contenido.

2. En el menú izquierdo, selecciona si deseas editar en el Micrositio o en el Widget.

3. Selecciona la plantilla de página que deseas editar y, luego, selecciona Estilo de widget/Estilo de micrositio.

4. Selecciona el color de tu marca para cambiar el color principal presente en tu widget o micrositio.

5. A continuación, selecciona el estilo de fuente que te gustaría usar.

6. [Opcional] Continúa con las opciones de estilo restantes para personalizar completamente la identidad de tu marca dentro del widget o micrositio.

   

Referencia de elementos del editor de estilo

Elemento de estilo	Descripción
Color principal de la marca	Este color se usará en diferentes elementos de tu widget o micrositio, por lo que es importante completar este paso. Selecciona el color principal de tu marca. Este color también se usa en las secciones de Botón primario y Botón secundario más abajo en las opciones de edición.
Fuente	Selecciona el estilo de fuente que te gustaría que apareciera en tu widget o micrositio.
Color	Selecciona los distintos colores y acentos que te gustaría que aparecieran en tu widget o micrositio: • Fondo Selecciona un color que te gustaría que tuviera el fondo de tu widget o micrositio. • Texto Puedes cambiar el color de la fuente tanto para el texto principal como para el texto atenuado dentro del widget o micrositio. • Color de acento Cambia los colores de tus acentos. Estos incluyen elementos como pestañas o iconos dentro del widget o micrositio. • Colores adicionales Puedes ajustar aún más los colores y acentos para cada elemento según el tipo de widget o micrositio.
Botón primario	Selecciona el esquema de color que te gustaría que tuviera tu botón primario o principal. También puedes ajustar la cantidad de píxeles para el radio del borde alrededor del botón. Expande el Estado hover sección para seleccionar o cambiar más el color al que cambia tu botón cuando un usuario pasa el cursor sobre él o interactúa con el botón.
Botón secundario	Selecciona el esquema de color que te gustaría que tuviera tu botón secundario. También puedes ajustar la cantidad de píxeles para el radio del borde alrededor del botón. Expande el Estado hover sección para seleccionar o cambiar más el color al que cambia tu botón cuando un usuario pasa el cursor sobre él o interactúa con el botón.
Borde	Cambia el color y el contorno del borde de tus componentes, como tablas o tarjetas, dentro de tu widget o micrositio. • Color Selecciona el color de tu borde. • Grosor Introduce una unidad en píxeles para determinar el grosor de tu borde. • Radio del borde Introduce una unidad en píxeles para determinar el radio de tu borde.
Campos de formulario	Selecciona el color que te gustaría para los distintos campos de formulario dentro de tu widget o micrositio. Estos incluyen cualquier campo de entrada que complete el usuario. También puedes introducir una unidad en píxeles para cambiar el tamaño del radio del borde. Expande el Opciones avanzadas sección para personalizar aún más los colores del estado seleccionado o del estado hover de tus campos de formulario.
Tamaño del widget	Cambia el tamaño de tus widgets dentro de la plantilla. Puedes ajustar las dimensiones tanto para widgets incrustados como emergentes. Selecciona un tamaño mínimo y máximo y, en las opciones desplegables, selecciona la unidad de medida. Elige establecer las medidas en píxeles o en porcentaje.