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 el 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 complemento Bloom y agregaremos el código abreviado del formulario de opció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 que el módulo de texto aparezca como si fuera 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

Móvil

Instalar el complemento Bloom

Descarga Bloom

Lo primero que debe hacer es descargar el complemento Bloom. Si ya es miembro de Elegant Themes, puede encontrar el complemento yendo al área de miembros. Allí podrá descargar el archivo comprimido. Si aún no es miembro de Elegant Themes, primero deberá adquirir una membresía.

Cargar e instalar Bloom

Una vez que haya descargado Bloom, 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.

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

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

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! Vaya a su Panel de WordPress> Bloom> Formularios de suscripción y cree un nuevo formulario de suscripción.

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

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.

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

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

También estamos cambiando la configuración de estilo de 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
• Elija estilo de borde de forma: segunda opción

Crea diseño con Divi

Agregar nueva fila

Estructura de la columna

¡Ahora podemos cambiar al Divi Builder! Continúe y cree una nueva página utilizando la página de inicio del Resort Layout Pack. 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:

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 de la canaleta: 1

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

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.

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

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

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

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

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

Configuración de texto H3

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

• Fuente del encabezado 3: Gilda Display

Espaciado

Y para darle forma al módulo, vamos a agregar algunos valores de margen y relleno personalizados. También estamos modificando todos estos valores para que el diseño coincida con cualquier 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)

Frontera

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

Sombra de la caja

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

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

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 la animación: 16%

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.

Coloque la fila duplicada aquí mismo:

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

Quite el acolchado inferior de la sección en la que ha colocado 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)

Cambiar las esquinas redondeadas del módulo de texto

Asegúrese de cambiar también las esquinas redondeadas. Estamos usando '500vw' para cada una de las esquinas excepto la de abajo a la izquierda.

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

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear ventanas emergentes de esquina de contenido bloqueadas con Divi, el complemento Bloom y Resort Layout Pack. Puede utilizar esta técnica para convencer a las personas de que formen 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 tratamos de 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!