Usar la optimización para móviles en formularios de registro de Klaviyo

Introducción

Aprende a personalizar un formulario de registro del sitio web para escritorio y dispositivos móviles sin crear formularios independientes.

La optimización para dispositivos móviles te permite diseñar experiencias por dispositivo al editar las vistas para dispositivos móviles y de escritorio en paralelo, y al elegir si los cambios en los bloques se sincronizan entre dispositivos o siguen siendo específicos del dispositivo.

Antes de empezar

La vista previa Ambos está disponible cuando el formulario está configurado para mostrarse en Todos los dispositivos. Cambiar este ajuste también cambia qué dispositivos pueden ver tu formulario.

• Algunos tipos de bloques no permiten desvincular, incluidos los campos de entrada de email y número de teléfono, el texto de divulgación, los bloques de cupones, los bloques de spin-to-win y los campos de entrada de código de suscripción. Los bloques de imagen permiten desvincular. Las imágenes laterales tienen ajustes de dispositivo independientes.

Cómo funciona

Alternar la vista previa en dos dispositivos

Selecciona Ambos en el selector de vista previa del dispositivo para ver escritorio y móvil en paralelo mientras editas. Selecciona Escritorio o Móvil para centrarte en 1 dispositivo.

Bloques enlazados frente a no enlazados

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

Selecciona un bloque compatible y, a continuación, haz clic en Desvincular o Vincular en los controles del lienzo o en la parte superior del panel de configuración del bloque.

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 desvinculado, el clon se crea solo en la vista del dispositivo actual (al clonar un bloque vinculado, se duplica en ambos dispositivos).

Vincular bloques de nuevo:

• La vinculación hace que el bloque seleccionado sea visible en ambos dispositivos. No fusiona ni elimina la otra versión específica del dispositivo. Si esa versión sigue existiendo, ambos bloques aparecen en ese dispositivo hasta que elimines la versión no deseada.

Teasers por dispositivo

Desvincula un teaser en el panel de configuración para crear versiones separadas para ordenador y móvil que puedas diseñar de forma independiente. La vinculación conserva el teaser seleccionado, lo muestra en ambos dispositivos y elimina el otro teaser. Cuando los teaser están desvinculados, la visibilidad por dispositivo es fija.

Paso a paso

Abrir vista previa dual

1. En la página Formulario de registro, selecciona Editar para el formulario que quieres personalizar.
2. Abre Segmentación y comportamiento y, a continuación, selecciona Mostrar. En Dispositivos, selecciona Todos los dispositivos si quieres que el formulario aparezca tanto en escritorio como en móvil.
3. Selecciona Ambos en el interruptor de vista previa del dispositivo, encima del formulario, para evaluar el diseño y el espaciado en paralelo.

Desvincula un bloque para ediciones específicas del dispositivo

1. Selecciona el bloque que quieres personalizar en móvil.
2. Haz clic en Desvincular en los controles del lienzo o en la parte superior del panel de configuración del bloque.
3. Selecciona el bloque en la vista previa para móviles y luego ajusta el contenido, la posición, el tamaño de la fuente o el espaciado para pantallas más pequeñas.
4. Repite la acción en otros bloques según sea necesario.

Para personalizar el escritorio, selecciona el bloque en la vista previa de escritorio después de desvincularlo.

Vincula un bloque para compartir las ediciones de nuevo

1. Selecciona el bloque específico del dispositivo cuyo contenido y estilo quieres usar en ambos dispositivos.
2. Haz clic en Enlace en los controles del lienzo o en la parte superior del panel de configuración del bloque. El bloque seleccionado ahora aparece en ambos dispositivos.
3. Revisa ambas vistas previas. Si la otra versión específica del dispositivo sigue apareciendo, selecciona ese bloque no deseado, haz clic en Eliminar y, a continuación, confirma con Eliminar bloque.

Configura teasers por dispositivo (opcional)

Los teaser están disponibles para formularios popup, desplegables y de página completa.

1. Selecciona teaser encima del formulario para abrir su configuración. Si el formulario no tiene un teaser, esto crea uno. Haz clic en Desvincular en la parte superior del panel de configuración.
2. Selecciona Móvil en el conmutador de vista previa del dispositivo y personaliza el contenido y el estilo del teaser para móvil.
3. Selecciona Escritorio en el conmutador de vista previa del dispositivo y personaliza el contenido y el estilo del teaser para escritorio.

La vinculación conserva el teaser seleccionado y elimina el teaser del otro dispositivo. Para volver a usar 1 teaser en ambos dispositivos, selecciona la vista del dispositivo con el teaser que quieras conservar y, a continuación, haz clic en Vincular en su panel de configuración.

Prácticas recomendadas para formularios móviles

• Da prioridad a las pantallas más pequeñas: usa fuentes más grandes y un texto conciso.
• Aumenta los objetivos táctiles y el espaciado vertical para que los botones y las entradas sean fáciles de usar.
• Considera un formulario de página completa para mejorar el enfoque y la claridad, especialmente en dispositivos más pequeños. Cambiar el tipo de formulario se aplica a ambas vistas del dispositivo.
• Haz que las imágenes tengan 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 único bloque con la visibilidad del dispositivo configurada tanto para escritorio como para móvil. Cualquier edición que hagas en cualquiera de las vistas actualiza ese mismo bloque compartido.
• Cuando desvinculas un bloque, el editor crea versiones separadas solo para escritorio y solo para móvil. Las ediciones en 1 versión no cambian la otra.
• Al desvincular, se separan los ajustes de bloque. Los ajustes de todo el formulario, como el tipo de formulario y los estilos de campo, siguen aplicándose a ambos dispositivos.
• Algunos tipos de bloque, incluidos los campos de entrada de email y número de teléfono, el texto de divulgación, los bloques de cupón, los bloques de gira y gana y los campos de entrada del código de suscripción, no se pueden desvincular. Los bloques de imagen se pueden desvincular; las imágenes laterales usan ajustes de dispositivo independientes.
• La clonación se comporta de forma diferente según el estado del enlace: los clones de bloques vinculados aparecen en ambos dispositivos; los clones de bloques no vinculados aparecen solo en la vista del dispositivo actual.
• Cuando vinculas un bloque, la versión seleccionada aparece en ambos dispositivos y las ediciones futuras se comparten. Cualquier otra versión específica del dispositivo permanece en su sitio hasta que la elimines.

Revisa y publica los cambios

Las ediciones se guardan automáticamente. Publica los cambios cuando todo esté listo para que los visitantes vean el formulario actualizado.

1. Revisa cada paso del formulario y el teaser en Escritorio y Móvil. En el caso de los botones cuya vinculación hayas eliminado o que hayas clonado, selecciona cada versión y comprueba la acción de clic, la lista de envío y el destino, según corresponda.
2. Selecciona Publicar o programar para abrir el panel de publicación y resolver cualquier alerta del formulario que esté bloqueando.
3. Para publicar los cambios inmediatamente, selecciona Publicar ahora y luego haz clic en el botón Publicar ahora.

Solución de problemas

• No veo Desvincular o Vincular en un bloque:
  Comprueba si el tipo de bloque admite la desvinculación (consulta Antes de empezar).
• Mi cambio en móvil afectó al escritorio (o viceversa):
  Selecciona el bloque no vinculado en la vista previa del dispositivo que quieres editar. Los cambios en la configuración de todo el formulario, como el tipo de formulario y los estilos de campo, siguen afectando a ambos dispositivos.
• Veo bloques duplicados después de vincular:
  Al vincular se muestra el bloque seleccionado en ambos dispositivos sin eliminar la otra versión. Elimina la versión específica del dispositivo que no quieras.

Próximos pasos

• Primeros pasos con formularios de registro.
• Conceptos básicos: diseño de formularios móviles.
• Cómo hacer pruebas A/B de un formulario de registro.