Para agregar una dimensión visual adicional a tus campañas y aumentar su impacto, puedes mostrar imágenes de fondo en tus plantillas o en los bloques que las componen.
Este tutorial explica cómo agregar una imagen de fondo a un bloque en el editor Fastbuilder.
1. Seleccionar una imagen
- Selecciona tu bloque en el editor y luego abre la pestaña Contenido.
- Activa la opción Imagen de fondo.
- Haz clic en el icono de Imagen para abrir la galería.
- Importa o selecciona tu imagen, luego haz clic en Usar esta imagen para confirmar.
Nota: Para no ralentizar la carga del correo electrónico, elige archivos de menos de 1 MB en formato JPEG o PNG comprimido.
2. Dar formato al fondo
Una vez seleccionada tu imagen, puedes ajustar su visualización, siempre en la pestaña Contenido, para dar formato a su fondo.
- El campo Posición te permite definir dónde debe colocarse la imagen dentro del bloque. Puedes alinearla con la parte superior, inferior, izquierda o derecha del bloque, o centrarla.
- El campo Repetir te permite definir si la imagen debe repetirse y de qué manera. Por defecto, la imagen no se repite y solo se muestra una vez. Los modos de repetición disponibles son los siguientes.
- Horizontal: la imagen se repite a lo largo de todo el ancho del bloque.
- Vertical: la imagen se repite a lo largo de toda la altura del bloque.
- Horizontal y vertical: la imagen se repite tanto en ancho como en alto dentro del bloque.
- Con espacio: la imagen se muestra completa en ancho y alto para llenar todo el espacio disponible en el bloque, sin ser recortada ni redimensionada.
- Sin espacio: la imagen se muestra completa en ancho y alto para llenar todo el espacio disponible en el bloque y puede ser redimensionada.
- El campo Tamaño te permite definir cómo debe ajustarse el tamaño de la imagen al espacio a llenar. Por defecto, tu imagen no se redimensiona y mantiene su tamaño original. Las opciones disponibles son las siguientes:
- Cubrir: La imagen se redimensiona (conservando las proporciones) para llenar todo el espacio disponible en el bloque.
- Contener: La imagen se redimensiona (conservando las proporciones) para llenar el ancho del bloque.
3. Compatibilidad con los proveedores de correo electrónico
Cuando diseñes una plantilla, es esencial tener en cuenta las posibles diferencias de visualización, no solo según los dispositivos, sino también según las aplicaciones y los navegadores.
Por ejemplo, algunos proveedores de correo electrónico, como Outlook en Windows, no son compatibles con las imágenes de fondo en HTML y CSS. Por lo tanto, estas imágenes no se mostrarán en tus plantillas.
Para garantizar una legibilidad óptima para todos tus destinatarios, recuerda configurar un color de fondo para todos los bloques que contengan una imagen de fondo. Este color debe ofrecer un contraste suficiente con el texto y los otros elementos del bloque.
Puedes ajustar el color de fondo de un bloque en la pestaña Estilo.