Cómo activar un formulario Optin después de visitas a páginas específicas

Publicado: 2021-11-14

Los formularios de suscripción emergentes son a la vez uno de los elementos más útiles y molestos del diseño web. Sin ellos, difícilmente puede hacer crecer una lista de clientes devotos, pero es muy poco probable que los visitantes primerizos les presten atención. Es por eso que queremos guiarlo a través del proceso de uso de las opciones de condición de Divi para activar un formulario de suscripción después de que el usuario visite ciertas páginas. No solo es más probable que se conviertan porque han mirado un poco tu sitio, sino también porque no los estás molestando con una ventana emergente que no les pertenece. ¡Profundicemos y veamos cómo podemos mejorar su sitio!

Cómo activar un formulario Optin usando opciones de condición

Para este artículo en particular, vamos a utilizar las opciones de condición de Divi para mostrar un formulario de suscripción para un código de descuento después de que el usuario visite dos páginas particulares en su sitio. Solo aparecerá después de que se cumplan esas condiciones, lo que significa que el descuento solo está disponible para usuarios específicos.

Para este tutorial, usaremos Divi Theme Builder para agregar el módulo de formulario de suscripción al diseño del cuerpo de las páginas, pero si tiene una página o publicación específica, desea que se muestre una opción después de ciertas visitas a la página o publicación. puede seguir exactamente el mismo proceso para las opciones de condición.

Puede encontrar Divi Theme Builder en su panel de administración de WordPress en Divi - Theme Builder en la barra lateral izquierda.

ubicación del generador de temas

Crear una nueva plantilla

Dentro de Divi Theme Builder, desea hacer clic en el botón Agregar nueva plantilla .

formulario de suscripción para páginas específicas

Luego, seleccione las páginas específicas en las que desea que aparezca el formulario de suscripción. Dado que vamos a dar un código de descuento utilizando el módulo de formulario de suscripción, vamos a hacer que el diseño aparezca solo en las páginas de Eventos y Precios .

Copiar módulo de opción de correo electrónico

Dado que estamos utilizando paquetes de diseño prefabricados para esto, vaya a la página de diseño con el formulario de suscripción de correo electrónico ya diseñado e implementado. Haga clic con el botón derecho en la sección contenedora y seleccione copiar sección en el menú contextual.

módulo de copia

Después de eso, elimine la sección de la página porque en su lugar la tendrá en Theme Builder.

Agregar un diseño de cuerpo personalizado

A continuación, vuelva al Generador de temas para crear el diseño general. Hará clic en Agregar cuerpo personalizado en esa plantilla y seleccionará Crear cuerpo personalizado .

cuerpo personalizado

Dentro de eso, seleccione Comenzar desde cero y debería tener una plantilla en blanco para trabajar.

Pegue la sección de opción de correo electrónico

Dentro del editor, haga clic con el botón derecho y seleccione Pegar sección en el menú contextual.

pegar la sección

La opción de correo electrónico completamente diseñada y diseñada debería aparecer de inmediato.

Agregar copia para ofrecer el descuento condicional

A continuación, desea mencionar el descuento que está ofreciendo. Para este módulo, vamos a cambiar el encabezado en un módulo de Texto , pero también puede ir a la Configuración para el formulario Optin y cambiar el texto del título.

opción de correo electrónico

Después de eso, es hora de comenzar a mostrar el contenido de la página.

Agregar contenido de página dinámica

A continuación, si aún no hay una sección en blanco, haga clic en agregar una nueva sección haciendo clic en el ícono azul + y seleccionando Sección regular .

añadir una nueva sección

Cuando tenga la sección en su lugar, agregue una fila de una sola columna .

agregue una fila para una opción de correo electrónico

Seleccione el módulo Publicar contenido en el menú desplegable Insertar módulo . Este es un módulo dinámico que muestra cualquier diseño que ya hayas hecho. En este caso, los diseños prefabricados de eventos y precios del museo se mostrarán en la parte delantera.

Publicar Contenido

En este caso, los diseños prefabricados de eventos y precios del museo se mostrarán en la parte delantera.

Edite el ancho del contenido de la publicación

A continuación, vaya a la configuración de fila para la fila contenedora del módulo Publicar contenido. Navegue a Espaciado en la pestaña Diseño y configure Ancho y Ancho máximo al 100% .

ancho

Eliminar relleno de filas y secciones

Debido a que estamos agregando contenido dinámico a páginas ya diseñadas, queremos mantenerlo lo más fluido posible. Así que vaya a la pestaña Configuración de diseño para todas las secciones y filas individuales y asegúrese de configurar el Relleno superior e inferior en 0 px debajo del encabezado Espaciado . No lo dejes en blanco, ya que hay un espacio predeterminado establecido en Divi para ellos.

relleno

Agregar una animación

A continuación, vaya a la sección de configuración de la que contiene el formulario de suscripción de correo electrónico. En la pestaña Diseño de la sección, vamos a agregar una Animación . Debido a que esta sección se mostrará solo a los visitantes que cumplan con ciertos criterios, queremos llamar su atención sobre ella. Queremos asegurarnos de que no piensen que es solo otra parte del sitio. Lo haremos animando toda la sección para que aparezca después de una duración establecida.

Elegiremos Bounce para el Estilo de Animación y 1000ms (1 segundo) para el Retardo de Animación . Ahora, esta sección solo aparecerá 1 segundo después de que el visitante haya llegado. Puede establecer el retraso en lo que mejor funcione para usted, con cada 1000ms siendo 1 segundo.

demora

Opcional: Establecer posición fija

Si desea que el usuario vea la suscripción de inmediato, en lugar de tener que desplazarse hasta la parte inferior de la página, puede colocarla en la parte inferior de la pantalla. Vaya a la pestaña Avanzado de la sección y busque la configuración de Posición . Seleccione Fijo en el menú desplegable y luego haga clic en el cuadrado central inferior para colocar la sección. A continuación, cambie el Índice Z a 999 para que siempre sea más alto que el resto del contenido de la página.

formulario de suscripción de correo electrónico

Agregar lógica condicional a la sección

Mientras aún se encuentra en la configuración de la sección contenedora, vaya a la pestaña Avanzado y busque las opciones de Condiciones . Así es como va a establecer qué páginas debe ver un visitante en su sitio antes de recibir este formulario de suscripción. Haga clic en el ícono gris + que dice Agregar condición para comenzar.

opciones de condición para el formulario optin

A continuación, seleccione Visita a la página en el subtítulo Interacción .

visitas a la página para activar el formulario de suscripción

Luego, solo necesita elegir las páginas exactas que el visitante debe ver para activar el formulario de suscripción con el descuento. Seleccione las páginas Precios y Eventos de la lista aquí. Debido a que ambas páginas están seleccionadas y ambas están asignadas a la plantilla de Theme Builder, el usuario verá la opción en cualquiera de las páginas, independientemente del orden en que se visiten. Pero ambos deben visitarse para que aparezca el formulario de suscripción.

opciones de condición

También puede hacer esto con Publicar visita , que también se encuentra bajo el subtítulo Interacción . Funciona exactamente de la misma manera, pero con publicaciones de blog en lugar de páginas.

Terminando con el Formulario de Opción Condicional

Una vez que se guarda todo eso, su formulario de suscripción condicional está activo. Ahora, cada vez que alguien visite páginas o publicaciones específicas en su sitio, puede brindarles contenido especial y específico. Poder personalizar su contenido usando estas opciones abre su sitio para tener una experiencia de usuario increíble. Cuál es uno de los mayores factores impulsores de las conversiones. Y ahora puede mostrar el formulario de suscripción para convertirlos como parte de esa experiencia.

¿Cómo usaría las opciones de condición para mostrar un formulario de suscripción?

Imagen destacada del artículo por TMvectorart / shutterstock.com