Usa la optimización para móviles en el formulario de registro de Klaviyo
Introducción
Adapta tus formularios de Klaviyo para ordenador y móvil sin duplicarlos; así podrás publicar más rápido y mejorar la experiencia de los visitantes desde dispositivos móviles.
La optimización para móviles te permite diseñar experiencias por dispositivo al editar las vistas de móvil y escritorio en paralelo, y al elegir si los cambios en los bloques se sincronizan entre dispositivos o se mantienen específicos del dispositivo.
Antes de empezar
- Algunos tipos de bloque no permiten desvincularlos entre dispositivos. Las excepciones incluyen: aviso legal, gira para ganar, imagen (se gestiona por separado) y número de teléfono (consentimiento de varios pasos).
Cómo funciona
Alternar vista previa de dos dispositivos
Previsualiza tu formulario en escritorio y móvil, uno al lado del otro, para ver cómo se adaptan las ediciones en todos los dispositivos en tiempo real. Esto reduce los cambios de un lado a otro y acelera la calidad del diseño para móviles.
Bloques vinculados vs. no vinculados
De forma predeterminada, los bloques equivalentes en escritorio y móvil están vinculados: los cambios en una vista se aplican a la otra. Puedes elegir desvincular los bloques para hacer ediciones solo para móvil o solo para escritorio sin duplicar el formulario.
Puedes desvincular/volver a vincular un bloque seleccionado haciendo clic en el botón de desvincular en el lienzo o haciendo clic en el botón de desvincular del panel lateral.
Cuando se desvincula un bloque:
- Las ediciones solo se aplican a la vista del dispositivo actual; el bloque del otro dispositivo no cambia.
- Al clonar un bloque no vinculado, la copia se crea solo en la vista del dispositivo actual (al clonar un bloque vinculado, se duplica en ambos dispositivos).
Volver a enlazar bloques:
- Al volver a vincular, se crea de nuevo un nuevo bloque emparejado en todos los dispositivos. Si se ha eliminado el bloque correspondiente, al volver a vincular se crea para el otro dispositivo, de modo que ambas vistas vuelvan a tener el bloque (luego puedes eliminar los duplicados que no necesites).
Teasers por dispositivo
Puedes desvincular los teaser a través del panel lateral, para que el escritorio y el móvil tengan cada uno su propio estilo de teaser. Al volver a vincularlo, la visibilidad se restablece en todos los dispositivos para el teaser que se vuelve a vincular.
Paso a paso
Abrir vista previa dual
- Abre tu formulario en el editor.
- Cambia a la vista previa con el conmutador que muestra tanto el escritorio como el móvil uno al lado del otro para evaluar el diseño y el espaciado de un vistazo.
Desvincular un bloque para ediciones específicas de cada dispositivo
- Selecciona el bloque que quieres personalizar en móvil.
- Selecciona Desvincular para que las ediciones móviles no afecten al escritorio.
- Ajusta tu diseño móvil (por ejemplo, la ubicación, los tamaños de fuente y el espaciado) para que se lea bien en pantallas más pequeñas.
- Repite el proceso con otros bloques según sea necesario.
Vuelve a vincularlo cuando quieras volver a compartir el comportamiento
- Selecciona el bloque y elige Volver a vincular.
- Si falta el equivalente en el otro dispositivo, el editor lo crea automáticamente.
- Eliminar bloques duplicados.
Configura teaser por dispositivo (opcional)
- Abre la configuración del teaser y elige Desvincular.
- Configura el contenido del teaser o la visibilidad para escritorio y móvil de forma independiente.
- Vuelve a vincularlo más tarde si quieres que un teaser se aplique a ambos dispositivos.
Prácticas recomendadas para los formularios móviles
- Da prioridad a las pantallas más pequeñas: usa fuentes más grandes y texto conciso.
- Aumenta las zonas táctiles y el espaciado vertical para que los botones y los campos de entrada sean fáciles de usar.
- Considera el modo de pantalla completa en móviles para mejorar la concentración y la claridad, especialmente en dispositivos más pequeños.
- Mantén las imágenes con un propósito. Si una imagen lateral compite con el contenido en pantallas pequeñas, escóndela o simplifica el diseño.
Limitaciones y comportamientos que debes conocer
- Un bloque vinculado es un bloque único con la visibilidad del dispositivo configurada tanto en ordenadores como en dispositivos móviles. Cualquier cambio que hagas en cualquiera de las vistas actualiza ese mismo bloque compartido.
- Cuando desvinculas un bloque, el editor crea un segundo bloque internamente y configura cada bloque para un dispositivo distinto (uno solo para escritorio y otro solo para móvil). A partir de ese momento, las ediciones no se sincronizan entre ellos.
- La desvinculación no se admite en algunos tipos de bloque: Divulgación, Gira para ganar, Imagen (gestionado por separado en el trabajo de imágenes laterales) y Número de teléfono (consentimiento en varios pasos).
- La clonación se comporta de forma diferente según el estado del enlace: los clones de los bloques enlazados aparecen en ambos dispositivos; los clones de los bloques no enlazados aparecen solo en la vista del dispositivo actual.
- Cuando vuelves a vincular, el bloque seleccionado se convierte en la fuente de confianza y se configura para mostrarse en ambos dispositivos. Si falta un bloque correspondiente, el editor lo crea; si existen varias versiones, es posible que tengas que eliminar manualmente los bloques adicionales que no quieras conservar.
Resultado
Ahora deberías poder crear un formulario de registro optimizado para dispositivos móviles sin crear dos formularios separados.
Solución de problemas
- No veo desvincular/revincular en un bloque:
Es posible que el tipo de bloque no sea compatible con la desvinculación (consulta las excepciones). - Mi cambio móvil afectó al escritorio (o viceversa):
Asegúrate de que el bloque esté desvinculado antes de editar la versión específica del dispositivo. - Mi revinculación creó un bloque adicional:
es lo esperado si faltaba el correspondiente. Elimina el duplicado que no necesitas después de volver a vincularlo.