Utiliza la optimización móvil en los formularios de registro de Klaviyo

Información general

Adapta tus formularios de Klaviyo para ordenadores y dispositivos móviles sin duplicar formularios, lo que te ayudará a publicar más rápido y a mejorar la experiencia de los visitantes que usan dispositivos móviles.

La optimización móvil te permite diseñar experiencias por dispositivo editando las vistas móviles y de escritorio una al lado de la otra, y eligiendo si los cambios se sincronizan entre dispositivos o se mantienen específicos para cada dispositivo.

Antes de empezar

• Algunos tipos de bloque no admiten la desvinculación entre dispositivos. Las excepciones incluyen: consentimiento, girar para ganar, imagen (gestionada por separado) y número de teléfono (consentimiento de varios pasos).

   

Cómo funciona

Activar o desactivar la vista previa del dispositivo dual

Previsualiza el formulario en ordenadores y dispositivos móviles para ver cómo se adaptan las ediciones en todos los dispositivos en tiempo real. Esto reduce el alternar y cambiar de sitio y agiliza la calidad del diseño móvil.

Bloques vinculados o no vinculados

De forma predeterminada, los bloques equivalentes en ordenadores y dispositivos móviles están vinculados: los cambios en una vista se trasladan a la otra. Puedes optar por desvincular bloques para realizar ediciones solo para móviles o ordenadores sin duplicar el formulario.

Puedes desenlazar/volver a enlazar un bloque seleccionado al hacer clic en el botón de desenlazar en el lienzo, o al hacer clic en el botón de desenlazar del panel lateral. 

Cuando un bloque se desvincula:

• Las ediciones solo se aplican a la vista actual del dispositivo; el bloque del otro dispositivo no se modifica.
• Al clonar un bloque desvinculado, se crea el clon solo en la vista de dispositivo actual (al clonar un bloque vinculado, se duplica en ambos dispositivos).

Bloques de reenlazado:

• Al volver a vincular, se vuelve a crear un bloque emparejado en todos los dispositivos. Si el bloque de contraparte se ha eliminado, el reenlazado lo crea para el otro dispositivo para que ambas vistas vuelvan a tener el bloque (luego puedes eliminar los duplicados que no necesites).

Adelantos por dispositivo

Puedes desvincular adelantos a través del panel lateral, de modo que los ordenadores y los dispositivos móviles tengan cada uno su propio estilo de adelanto. Al volver a vincular, se restablece la visibilidad a todos los dispositivos para el adelanto revinculado.

Paso a paso

Abrir vista previa dual

1. Abre el formulario en el editor.
2. Cambia a la vista previa con la opción que muestra el escritorio y los dispositivos móviles uno al lado del otro para evaluar el diseño y el espaciado de un vistazo.

Desvincular un bloque para editarlo en dispositivos específicos

1. Selecciona el bloque que quieras personalizar en un dispositivo móvil.
2. Elige Desenlazar para que las ediciones para móviles no afecten a los ordenadores.
3. Ajusta el diseño de tu dispositivo móvil (por ejemplo, la ubicación, los tamaños de fuente o el espaciado) para que sea legible en pantallas más pequeñas.
4. Repite el proceso para otros bloques según sea necesario.

Vuelve a vincular cuando quieras compartir el comportamiento de nuevo

1. Selecciona el bloque y elige Relink.
2. Si la contraparte falta en el otro dispositivo, el editor la crea automáticamente.
3. Eliminar bloques duplicados.

Establecer adelantos por dispositivo (opcional)

1. Abre la configuración del adelanto y elige Desenlazar.
2. Configura el contenido de adelanto o la visibilidad para ordenadores y dispositivos móviles de forma independiente.

3. Vuelve a vincular más tarde si quieres que un adelanto se aplique a ambos dispositivos.

    

Prácticas recomendadas para formularios móviles

• Prioriza las pantallas más pequeñas: usa fuentes más grandes y textos concisos.

• Aumenta los objetivos de los toques y el espaciado vertical para que los botones y las entradas sean fáciles de usar.

• Considera la opción de pantalla completa en dispositivos móviles para centrarte y tener más claridad, sobre todo en los dispositivos más pequeños.

• Mantén las imágenes intencionales. Si una imagen lateral compite con el contenido de las pantallas pequeñas, escóndela o simplifica el diseño.

   

Limitaciones y comportamientos que debes conocer

• Un bloque vinculado es un único bloque con visibilidad en el dispositivo configurada tanto para ordenadores como para móviles. Cualquier edición que hagas en cualquiera de las vistas actualizará ese bloque compartido.

• Cuando desenlazas un bloque, el editor crea un segundo bloque debajo del capó y establece cada bloque en un dispositivo diferente (solo un escritorio, solo un móvil). A partir de ese momento, las ediciones no se sincronizarán entre ellas.

• La desvinculación no es compatible con algunos tipos de bloque: Divulgación, Girar para ganar, Imagen (gestionada por separado en el trabajo de imagen lateral) y Número de teléfono (consentimiento de varios pasos).

• La clonación se comporta de manera diferente en función del estado del enlace: los clones de bloques vinculados aparecen en ambos dispositivos; los clones de bloques no vinculados solo aparecen en la vista actual del dispositivo.

• Cuando vuelves a vincular, el bloque seleccionado se convierte en la fuente de la verdad y se configura para mostrarse en ambos dispositivos. Si falta una contraparte, el editor la crea; si existen varias versiones, es posible que tengas que eliminar manualmente cualquier bloque extra que no quieras conservar.

   

Resultado

Ahora deberías poder crear un formulario de registro que esté optimizado para dispositivos móviles sin tener que crear dos formularios distintos. 

Solución de problemas

• No veo ningún enlace o reenlace en un bloque:
  Es posible que el tipo de bloque no admita la desvinculación (consulta las excepciones).

• Mi cambio de dispositivo móvil afectó a los ordenadores (o viceversa):
  Asegúrate de que el bloque esté desvinculado antes de editar la versión específica del dispositivo.

• Mi enlace ha creado un bloque extra:
  Esto es normal si faltaba la contraparte. Elimina el duplicado que no necesites después de volver a vincular.

   

Próximos pasos

• Introducción a los formularios de registro

• Conceptos básicos: diseño de formularios

• Cómo hacer pruebas A/B con un formulario de registro