Cómo usar bloques dinámicos en formularios

Obtén más información sobre los bloques dinámicos y cómo puedes usarlos en formularios de registro para crear vistas y experiencias distintas para los compradores en dispositivos de escritorio y móviles. Usa la configuración de visibilidad de un bloque para elegir en qué dispositivos se mostrará.

Acerca de los bloques dinámicos

Los bloques dinámicos te permiten controlar qué bloques aparecen según el dispositivo. Puedes configurar bloques para que aparezcan de forma diferente en el formulario según el dispositivo o para que aparezcan en 1 dispositivo, pero no en el otro.

Casos de uso para bloques dinámicos:

• Personaliza la visualización de formularios para diferentes tipos de dispositivos (por ejemplo, móvil y computadora de escritorio) para que los compradores vean un diseño adaptado a su pantalla.
• Crea un solo formulario con diferentes métodos de suscripción a SMS que se muestren según el tipo de dispositivo para optimizar la conversión (es decir, muestra una opción de tocar para enviar SMS en dispositivos móviles y un campo de número de teléfono en dispositivos de escritorio).

Antes de empezar

Abre el formulario en el editor y selecciona Segmentación y comportamiento > Mostrar. En Dispositivos, selecciona Todos los dispositivos para que puedas configurar las vistas de computadora y móvil.

Esta configuración te permitirá configurar vistas separadas para computadoras y dispositivos móviles.

Usa bloques dinámicos para crear vistas diferentes para computadoras y dispositivos móviles

Algunos bloques tienen visibilidad fija. Por ejemplo, las entradas del control de edad y del código de verificación aparecen en todos los dispositivos, mientras que los botones de tocar para enviar texto aparecen solo en dispositivos móviles. Tampoco puedes cambiar la visibilidad del último bloque visible en un paso.

Los bloques y los campos con ajustes de Visibilidad editables pueden hacerse dinámicos, ya sea que ya existan o que los agregues desde el panel Agregar bloques. Para abrir este panel, selecciona Agregar contenido. Para ajustar en qué dispositivos se muestra un bloque, sigue estos pasos:

1. Haz clic en el bloque en el panel de vista previa del formulario (por ejemplo, un bloque de texto).
2. En el menú de configuración del bloque a la izquierda, desplázate hacia abajo hasta Visibilidad.
3. Elige si quieres mostrar el bloque en Computadora, Móvil o Todos los dispositivos.
4. Repite este proceso para cualquier bloque que quieras que sea dinámico.

Para previsualizar cómo se ve el formulario en cada dispositivo, usa el selector de vista en la esquina superior derecha del editor de formularios. Puedes alternar entre el ícono de escritorio y el ícono de dispositivo móvil para ver cada vista.

• La vista de escritorio muestra cómo aparecerá el formulario para los compradores que navegan por el sitio desde una computadora de escritorio. Solo los bloques configurados para Escritorio y Todos los dispositivos serán visibles en esta vista.
• La vista móvil muestra una vista previa de lo que verán los compradores al navegar desde un dispositivo móvil. Muestra los bloques configurados para Móvil y Todos los dispositivos.

Ejemplo

Supongamos que quieres que el texto del encabezado del formulario aparezca de forma distinta en una computadora que en un dispositivo móvil. Para configurarlo:

1. En el selector de vista de la esquina superior derecha, selecciona el ícono de escritorio.
2. Selecciona el texto que quieres editar en la vista previa del formulario y haz los cambios.
3. En el menú de configuración del bloque de texto, desplázate hasta Visibilidad y configura el bloque de texto para que se muestre solo en Escritorio .

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. Para ajustar la vista móvil, cambia a la vista previa móvil seleccionando el ícono de dispositivo móvil en el selector de vista.
5. Selecciona Agregar contenido para abrir el panel Agregar bloques y, luego, arrastra y suelta un nuevo elemento de texto en la vista previa para dispositivos móviles.
6. Personaliza el texto predeterminado del encabezado para compradores en dispositivos móviles. Este texto debe ser diferente del que usaste en la versión de escritorio.
7. En el menú de configuración del bloque de texto, desplázate hacia abajo hasta Visibilidad y configura este bloque de texto para que se muestre en Móvil.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. Opcional: Repite este proceso para otros elementos o campos que quieras mostrar de forma diferente según el tipo de dispositivo (p. ej., muestra una imagen a los compradores en escritorio, pero ocúltala en móvil).
   • Si quieres que las imágenes del formulario sean dinámicas, puedes:
     • Agrega una imagen lateral a las vistas móvil y de computadora, o solo a 1 vista.
     • Usa una imagen lateral en la vista de escritorio y coloca una imagen encima del texto del encabezado en móvil, o viceversa.

Usa bloques dinámicos para optimizar la recopilación del consentimiento de SMS

Si tienes un formulario de registro que recopila el consentimiento para SMS, puedes usar bloques dinámicos para optimizar el método de suscripción a SMS para cada dispositivo (p. ej., mostrar a quienes compran desde el móvil un botón de tocar para enviar un mensaje de texto, mientras que quienes compran desde una computadora de escritorio ven un campo para ingresar el número de teléfono).

Usa los pasos a continuación para un formulario con registro tradicional de SMS. Antes de comenzar, configura SMS en la cuenta y asegúrate de tener un número de envío que pueda recibir mensaje de texto en la región a la que quieres dirigirte. Si el formulario usa Smart Opt-in, sigue la guía de arriba.

1. Abre el formulario existente en el editor y selecciona el paso que recopila el consentimiento de SMS en la barra de menús.
   • Si el formulario aún no recopila números de teléfono, agrega un paso:
     1. Haz clic en + Paso, selecciona Registro en dispositivos móviles y luego haz clic en Siguiente.
     2. Elige mensajería de texto y luego haz clic en Siguiente.
     3. Selecciona la lista a la que deben unirse los nuevos suscriptores y elige doble confirmación de suscripción tradicional para mensajería de texto.
     4. Haz clic en Añadir paso.

2. En el selector de vista de la parte superior derecha, selecciona el icono de escritorio para personalizar la vista de escritorio del formulario.
3. Selecciona el campo del número de teléfono en la vista previa y, en Visibilidad, configúralo para que se muestre en Computadora. Haz lo mismo con el botón Enviar. Mantén visible el texto de divulgación de SMS en ambos dispositivos.

This content requires Functional cookies to be enabled.

Update Cookie Settings

1. Cambia a la vista móvil del formulario seleccionando el ícono de móvil en la esquina superior derecha.
2. Selecciona un botón existente de toque para enviar mensaje de texto o selecciona Agregar contenido para abrir el panel Agregar bloques y arrastra un botón nuevo a la vista previa para dispositivos móviles.
3. Configura la Acción del botón como Suscribirse mediante mensajería de texto. Esta acción hace que el botón sea solo para dispositivos móviles automáticamente.

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. Elige una palabra clave de mensajería de texto y personaliza el mensaje para el botón de tocar para enviar un mensaje de texto. Los suscriptores móviles se unen a la lista asociada con esa palabra clave, así que revisa que coincida con la lista que quieres para los suscriptores de SMS.
5. En Región de envío, elige la región a la que quieres dirigirte. Klaviyo usa el número de envío asociado con esa región.
6. Cambia entre las vistas de escritorio y móvil para asegurarte de que los bloques aparezcan como lo planeaste en cada dispositivo.

Ahora tus bloques dinámicos están configurados para mostrar un campo de número de teléfono en computadoras de escritorio y un botón de tocar para enviar un mensaje de texto en dispositivos móviles. Los compradores en dispositivos móviles deben enviar el texto prellenado para solicitar una suscripción a SMS.

Siguientes pasos

Antes de publicar el formulario de registro, selecciona Editar estilos para cambiar el diseño, las fuentes y los colores para que coincidan con tu marca. Además, asegúrate de agregar y personalizar el texto de consentimiento de SMS.

Para que el formulario o tus cambios estén activos:

1. Haz clic en Publicar o programar.
2. Elige Publicar ahora y resuelve cualquier alerta bloqueante.
3. Haz clic en Publicar ahora para publicar.

Recursos adicionales