Cómo crear ventanas emergentes de esquina de contenido bloqueadas con Divi


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo crear ventanas emergentes de esquina de contenido bloqueadas con Divi y Paquete de diseño de resort. El concepto de un formulario de suscripción de contenido bloqueado es simple. Las personas deben ingresar su dirección de correo electrónico y, tan pronto como lo hagan, se revelará el contenido oculto. Puede utilizar este contenido oculto para compartir un código de descuento, por ejemplo. Para que todo esto suceda, usaremos el Florecer y agregue el código abreviado del formulario de suscripción de contenido bloqueado a un módulo de texto que diseñaremos como una ventana emergente. El módulo de texto también incluirá una animación con un retraso de animación para hacer que el módulo de texto parezca una ventana emergente.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

ventanas emergentes de esquina de contenido bloqueado

Móvil

ventana emergente de esquina de contenido bloqueada

Instalar el complemento Bloom

Descarga Bloom

Lo primero que debe hacer es descargar el Florecer enchufar. Si ya es miembro de Elegant Themes, puede encontrar el complemento en el área de miembros. Allí podrás descargar el archivo comprimido. Si aún no es miembro de Elegant Themes, deberá comprar una membresía primero.

ventanas emergentes de esquina de contenido bloqueado

Cargar e instalar Bloom

Una vez que haya descargado Florecer, puede continuar y cargarlo en su sitio web de WordPress yendo a Complementos> Agregar nuevo y haciendo clic en "Cargar complemento" en la parte superior de la página.

ventanas emergentes de esquina de contenido bloqueado

Luego, cargue el archivo comprimido y haga clic en "Instalar ahora".

ventanas emergentes de esquina de contenido bloqueado

No olvide activar el complemento una vez que se haya cargado también.

ventanas emergentes de esquina de contenido bloqueado

Configurar formulario Bloom Optin

Agregar nuevo formulario de contenido bloqueado

¡Ahora podemos comenzar a crear el formulario de contenido bloqueado que, más adelante en esta publicación, usaremos en nuestro diseño Divi! Ir a tu Tablero de WordPress> Bloom> Formularios de Optin y cree un nuevo formulario de suscripción.

ventanas emergentes de esquina de contenido bloqueado

Continúe seleccionando el tipo de suscripción "Contenido bloqueado" y continúe con los ajustes de configuración.

ventanas emergentes de esquina de contenido bloqueado

Configuraciones de configuración

Una vez que esté en la configuración de configuración, deberá darle un nombre a su nuevo formulario de suscripción. También deberá seleccionar un proveedor de correo electrónico de su elección e ingresar los detalles de autenticación.

ventanas emergentes de esquina de contenido bloqueado

Configuración de diseño

El siguiente paso es diseñar el formulario. Más adelante en la publicación, usaremos el código abreviado del formulario de suscripción en un módulo de texto que diseñaremos, por lo que no es necesario que se apliquen demasiadas configuraciones al formulario de suscripción en sí. Asegúrese de dejar vacíos los cuadros de título de suscripción y contenido del mensaje de suscripción. Cambie también la orientación de la imagen.

  • Orientación de la imagen: sin imagen

ventanas emergentes de esquina de contenido bloqueado

Desplácese hacia abajo en la página y realice algunos cambios adicionales en el estilo de suscripción y la configuración del formulario.

  • Color de fondo: #ffffff
  • Orientación del formulario: formulario en la parte inferior

ventanas emergentes de esquina de contenido bloqueado

También vamos a cambiar la configuración de estilo del formulario.

  • Orientación del campo de formulario: campos de formulario apilados
  • Color de fondo del formulario: # f4f4f4
  • Color del botón: #ffffff
  • Color del texto del botón: oscuro
  • Elegir estilo de borde de forma: segunda opción

ventanas emergentes de esquina de contenido bloqueado

Crea diseño con Divi

Agregar nueva fila

Estructura de columna

¡Ahora podemos cambiar al Divi Builder! Continúe y cree una nueva página usando el Paquete de diseño de resortPágina de inicio. Una vez que se cargó el diseño, continúe agregando una nueva fila en la parte superior de la segunda sección utilizando la siguiente estructura de columnas:

ventanas emergentes de esquina de contenido bloqueado

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y realice algunos cambios en la configuración de tamaño.

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

ventanas emergentes de esquina de contenido bloqueado

Espaciado

Vaya a la configuración de espaciado a continuación y agregue "0px" al relleno superior e inferior de la fila. Esto limitará el espacio que ocupa la nueva fila que agregamos.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

ventanas emergentes de esquina de contenido bloqueado

Agregar módulo de texto

Agregar contenido H3

El único módulo que necesitamos para crear la ventana emergente de la esquina de contenido bloqueada es un módulo de texto. Agregue un título H3 de su elección al cuadro de contenido.

ventanas emergentes de esquina de contenido bloqueado

Agregar código corto de formulario de opción de contenido bloqueado

Luego, regrese al complemento Bloom y copie el código abreviado del formulario de suscripción que creó en la parte anterior de este tutorial.

ventanas emergentes de esquina de contenido bloqueado

Agregue el contenido que desee que aparezca después de que las personas completen el formulario de suscripción. En el siguiente ejemplo, puede notar que compartimos un código de cupón, pero puede compartir cualquier tipo de información que desee.

ventanas emergentes de esquina de contenido bloqueado

Color de fondo

Vaya a la configuración de fondo del módulo a continuación y agregue un color de fondo completamente blanco.

  • Color de fondo: #ffffff

ventanas emergentes de esquina de contenido bloqueado

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración de texto a continuación.

  • Fuente de texto: Open Sans
  • Color del texto: # 0f87ff
  • Tamaño del texto: 15px

ventanas emergentes de esquina de contenido bloqueado

Configuración de texto H3

Cambie también la fuente que se está utilizando para su copia H3.

  • Fuente del título 3: Gilda Display

ventanas emergentes de esquina de contenido bloqueado

Espaciado

Y para darle forma al módulo, agregaremos algunos valores de margen y relleno personalizados. También vamos a modificar todos estos valores para que el diseño coincida con el tamaño de pantalla que usen los visitantes.

  • Margen superior: -17vw
  • Margen izquierdo: 65vw (escritorio), 37vw (tableta), 3vw (teléfono)
  • Margen derecho: 0px
  • Acolchado superior: 5vw (escritorio), 11vw (tableta), 13vw (teléfono)
  • Acolchado inferior: 5vw, 11vw (tableta), 13vw (teléfono)
  • Acolchado izquierdo: 6vw (escritorio), 11vw (tableta), 16vw (teléfono)
  • Relleno derecho: 6vw (escritorio), 11vw (tableta), 16vw (teléfono)

ventanas emergentes de esquina de contenido bloqueado

Frontera

Continúe yendo a la configuración del borde del Módulo de texto y agregue "500vw" a cada una de las esquinas, excepto a la de abajo a la derecha.

ventanas emergentes de esquina de contenido bloqueado

Sombra de la caja

Agregue una sombra de cuadro al lado para hacer que el Módulo de texto aparezca.

  • Fuerza de desenfoque de sombra de caja: 150px
  • Color de sombra: rgba (0,0,0,0.3)

ventanas emergentes de esquina de contenido bloqueado

Animación

Por último, también estamos agregando una animación que va de derecha a izquierda para crear el efecto emergente.

  • Repetición de animación: una vez
  • Dirección de animación: izquierda
  • Duración de la animación: 500 ms
  • Retraso de animación: 1000 ms
  • Intensidad de animación: 16%

ventanas emergentes de esquina de contenido bloqueado

Fila de clonación

Una vez que haya terminado de crear la primera ventana emergente de esquina de contenido bloqueada, puede continuar y clonar toda la fila.

ventanas emergentes de esquina de contenido bloqueado

Coloque la fila duplicada aquí mismo:

ventanas emergentes de esquina de contenido bloqueado

Quitar el acolchado de la parte inferior de la sección

Quite el acolchado inferior de la sección en la que colocó la fila.

  • Acolchado inferior: 0px

Cambiar la configuración de espaciado del módulo de texto

Luego, abra la configuración del Módulo de texto y cambie los valores de margen personalizados.

  • Margen izquierdo: 0vw
  • Margen derecho: 65vw (escritorio), 37vw (tableta), 3vw (teléfono)

ventanas emergentes de esquina de contenido bloqueado

Cambiar esquinas redondeadas del módulo de texto

Asegúrate de cambiar también las esquinas redondeadas. Estamos usando "500vw" para cada una de las esquinas excepto para la inferior izquierda.

ventanas emergentes de esquina de contenido bloqueado

Cambiar la configuración de animación del módulo de texto

Por último, pero no menos importante, cambie la dirección de la animación a la derecha y listo.

  • Dirección de animación: Derecha

ventanas emergentes de esquina de contenido bloqueado

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

ventanas emergentes de esquina de contenido bloqueado

Móvil

ventanas emergentes de esquina de contenido bloqueado

Pensamientos finales

En esta publicación, le mostramos cómo crear ventanas emergentes de esquina de contenido bloqueadas con Divi, el Florecer plugin y el Paquete de diseño de resort. Puede utilizar esta técnica para convencer a las personas de que se conviertan en parte de su lista de correo electrónico ofreciendo un código de cupón que aparece una vez que han completado el formulario. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde intentamos poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!