Este tutorial explica cómo integrar un formulario de suscripción a una newsletter utilizando el módulo Probance pop-ups.
Requisitos previos:
– El formulario de suscripción a la newsletter de Probance debe estar configurado en tu back-office de WooCommerce antes de continuar. Consulta nuestra guía dedicada para saber cómo hacerlo.
– El módulo Probance pop-ups debe estar instalado en tu proyecto.
1. Crear el pop-up
Para crear un nuevo pop-up, abre el menú Probance pop-ups y haz clic en Add new.
- En el campo Título, introduce el nombre de tu pop-up.
- En el editor, escribe el contenido de tu pop-up. Aquí debes integrar el shortcode del formulario de suscripción a la newsletter con los parámetros que desees mostrar en esta versión.
También puedes incluir otros elementos como títulos o textos, y darles formato dentro del editor. La pestaña Texto te permite cambiar al modo HTML y organizar el contenido de tu pop-up con más flexibilidad.
Importante: Si el shortcode ya se utiliza en otro lugar de tu web, agrega un parámetro
idy aumenta su valor con cada integración. Por ejemplo, usa[probance_newsletter id=’1′]
- En la lista Displayed on pages de la sección Displaying, marca las páginas del sitio en las que deseas que se muestre el pop-up. Recomendamos no marcar las páginas en las que el formulario ya esté integrado.
- También en la sección Displaying, marca la opción Check opt-in. Esta opción permite restringir la visualización del pop-up a los visitantes que no estén identificados o suscritos a la newsletter.
- En el campo Displaying trigger de la sección Custom style, selecciona el modo de activación del pop-up. Hay 3 opciones disponibles:
- Delay: el pop-up aparece tras un cierto tiempo en la página. Indica el tiempo de espera en segundos en el campo Delay.
- Scroll: el pop-up se muestra cuando el visitante alcanza un determinado nivel de desplazamiento en la página. Indica este nivel en porcentaje en el campo Scroll.
- Manual: esta opción anula la visualización automática del pop-up, permitiéndote definir tus propios disparadores a nivel del tema.
- En el campo Frequency of display, especifica el intervalo de espera entre dos visualizaciones del pop-up para un mismo visitante. Esta duración puede indicarse en minutos, horas o días.
- Haz clic en Guardar borrador o Publicar para guardar tus cambios.
Nota: un pop-up publicado no se mostrará a los visitantes mientras no esté activado.
Puedes obtener una vista previa de tu pop-up en cualquier momento durante su construcción haciendo clic en Previsualizar.
2. Configurar una imagen
La sección Image settings te permite configurar una imagen que se mostrará en el pop-up, a la derecha o a la izquierda del contenido.
- Haz clic en Upload para seleccionar una imagen de tu galería o importar una desde tu directorio.
- En el campo Image position, selecciona la posición de la imagen con respecto al contenido.
- Los campos Width y Height te permiten especificar las dimensiones de la imagen en el pop-up. Puedes introducir valores en píxeles o en porcentajes.
- Para obtener una vista previa del pop-up con la imagen, haz clic en Previsualizar.
- Haz clic en Guardar borrador o Publicar para guardar tus cambios.
3. Modificar la apariencia del pop-up
De forma predeterminada, el pop-up construido con el módulo hereda los estilos de tu tema de WordPress. Si hay reglas de estilo definidas en la página de configuración de tu formulario, también se aplicarán en el pop-up.
Puedes añadir reglas de estilo a tus pop-ups desde el menú Custom CSS: esta sección te permite definir CSS personalizado para tus pop-ups sin necesidad de modificar tu tema de WordPress.
4. Activar la pop-up
En la página de edición de tu pop-up, marca la opción Enabled en la sección Displaying.
Si el pop-up aún está en estado de borrador, haz clic en Publicar. En caso contrario, haz clic en Actualizar para guardar los cambios.