Cómo añadir imágenes laterales en formularios de registro
Qué aprenderás
Descubre cómo añadir una imagen de alta calidad a la izquierda o a la derecha del formulario de registro para ofrecer una experiencia de registro atractiva que se ajuste al diseño de tu marca.
Antes de empezar
Las imágenes laterales aparecen a la izquierda o a la derecha del contenido del formulario. Las imágenes laterales no están disponibles para los formularios de banner. Al usar una imagen en un formulario, hay algunas cosas que debes tener en cuenta:
- Usa una imagen JPEG, PNG o GIF. Los archivos JPEG equilibran bien la calidad y el tamaño en imágenes coloridas, mientras que los archivos PNG pueden mantener las imágenes transparentes o los logotipos nítidos.
- Asegúrate de usar una imagen de calidad razonablemente alta para obtener los mejores resultados.
- Intenta mantener las imágenes entre 600 y 1000 px de ancho y por debajo de 2000 px de alto en el caso de las imágenes de ancho completo para equilibrar la calidad y el tiempo de carga. Las imágenes de menos de ancho completo pueden ser más pequeñas que 600 px.
- Al igual que con todas las imágenes que se ven en la web, los archivos de mayor tamaño provocan tiempos de carga más lentos.
- Procura que el tamaño del archivo sea de 50-100 KB para las imágenes laterales y de menos de 200 KB para las imágenes de fondo, para garantizar que la imagen se vea de alta calidad sin ralentizar tu sitio.
- Añade texto alternativo a las imágenes que transmiten información para que los visitantes que usan lectores de pantalla puedan entenderlas. Deja el texto alternativo en blanco en las imágenes puramente decorativas.
Al cargar una imagen en el editor de formularios, usa un archivo de 5 MB o menos. Mantén la imagen nítida en el tamaño en el que se muestra, usa un tamaño de archivo manejable y prueba el aspecto del formulario en ordenador y en móvil.
Añade una imagen lateral a tu formulario
Para añadir una imagen a ambos lados del contenido de tu formulario de registro:
- Ve a la pestaña formularios de registro.
- Junto al formulario, abre el menú de tres puntos y haz clic en Editar.
Si el formulario se creó antes de julio de 2021 y usa una imagen de fondo alineada a la derecha o a la izquierda como imagen lateral, elimínala antes de usar la función de imagen lateral. En Estilos, desactiva Imagen de fondo. Luego, abre Relleno y elimina cualquier exceso de relleno del lado derecho o izquierdo.
- En Estilos, abre Imagen lateral. Selecciona Imagen izquierda o Imagen derecha para elegir dónde aparece la imagen.
- Selecciona el paso del formulario que quieras editar y luego haz clic en el marcador de posición de imagen vacío en la vista previa del formulario.
- Haz clic en Seleccionar imagen para abrir el selector de imágenes. Elige una imagen de la biblioteca de imágenes de Klaviyo, sube una imagen o importa una nueva imagen desde una URL.
Asegúrate de usar una imagen de calidad razonablemente alta para obtener los mejores resultados. Al igual que ocurre con todas las imágenes que se ven en la web, los archivos de mayor tamaño ralentizan los tiempos de carga. Procura que el tamaño del archivo sea de 50-100 KB para las imágenes laterales, para que tu imagen se vea de alta calidad sin ralentizar tu sitio.
En un formulario de varios pasos, selecciona cada paso, incluido el mensaje de éxito, y elige su imagen lateral. Puedes usar una imagen diferente en cada paso. La ubicación, el tamaño y la configuración de dispositivo de la imagen lateral se aplican en todo el formulario.
Opciones de visualización de la imagen lateral
Estilos de formulario
Cuando añades una imagen lateral por primera vez a un formulario emergente o desplegable, el ancho del formulario se establece en 780 px y el tamaño de la imagen lateral se define de forma predeterminada como Mediano. Los formularios de página completa mantienen la configuración de ancho existente. Los formularios incrustados pueden ocupar todo el ancho del contenedor de tu sitio web.
En Estilos, ajusta Ancho en la configuración del tipo de formulario para cambiar el ancho del formulario. En el caso de los popups, los desplegables y los formularios incrustados estándar, también puedes ajustar Altura mínima para evitar que los pasos más cortos recorten contenido de imagen importante.
Para cambiar el espacio que ocupa la imagen lateral, abre Estilos > Imagen lateral y elige Pequeño, Mediano o Grande. La opción Personalizado en Posición de imagen cambia el ancho de la imagen dentro de esa área, en lugar del tamaño del área.
La imagen lateral del formulario está oculta en los dispositivos móviles de forma predeterminada para dejar más espacio para el contenido del formulario. Para mostrarla en escritorio y móvil, abre Estilos > Imagen lateral. En Dispositivos, selecciona Todos los dispositivos.
Estilos de imagen lateral
Haz clic en la imagen lateral en la vista previa del formulario para abrir la configuración. Usa Imagen para ajustar la imagen y Color de fondo para rellenar cualquier espacio a su alrededor.
- Texto alternativo
Describe la imagen para los visitantes que usan lectores de pantalla. Deja el texto alternativo vacío si la imagen es meramente decorativa. - Posición de la imagen
Esto determina cómo encajará la imagen en el área de imagen lateral. Selecciona entre las siguientes opciones:- Contener
La imagen completa aparecerá dentro de la sección y no se recortará en absoluto. Si la imagen no encaja con precisión en el área de la imagen, el color de fondo de la sección rellenará las áreas que queden sin cubrir. - Portada
La imagen llenará completamente el área de imagen lateral. Es posible que algunas partes de la imagen se recorten para que la imagen llene el espacio. - Personalizado
Selecciona tu propio ancho para la imagen.
- Contener
- Posición de la imagen cuadrícula de alineación
Elige si la imagen está centrada o alineada en la parte superior, inferior, izquierda o derecha del área de imagen. - Color de fondo
Si utilizas una imagen más pequeña en el formulario, establece un color de fondo para rellenar el espacio vacío que queda detrás.
Revisa y publica el formulario
- Selecciona cada paso del formulario, incluido el mensaje de confirmación, y revísalo en las vistas previas de escritorio y móvil. Comprueba el recorte y la alineación de la imagen, especialmente en los pasos con menos contenido.
- Cuando estés listo para aplicar los cambios, haz clic en Publicar o programar. Revisa las alertas y resuelve los problemas que bloquean la publicación, y luego selecciona Publicar ahora y haz clic en Publicar ahora.
Recursos adicionales
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.
- Understanding styles for a sign-up form
Learn how to use Klaviyo’s sign-up form builder to design your form by editing the design settings available in the Styles section. Style settings apply across your sign-up form, including in all of a form’s steps and in its success message.
- Getting started with Canva for Images
Learn how to integrate Klaviyo with Canva in order to bring images from Klaviyo into Canva, and designs from Canva into your Klaviyo image library. Once Canva designs are in your Klaviyo image library, you can use them within email templates, SMS content, sign-up forms, and more.