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 Divi en curso, le mostraremos cómo crear ventanas emergentes de esquina de contenido bloqueado con Divi y Resort Layout Pack . 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 usar 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 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 que el módulo de texto aparezca como si fuera una ventana emergente.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Instale el complemento Bloom
Descargar Bloom
Lo primero que deberá 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á comprar una membresía . Está en la parte superior de su clase para los complementos de formulario de suscripción emergente .
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 el 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 Tablero 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.
Ajustes de configuración
Una vez que esté en la configuración de configuración, deberá dar 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 del formulario.
- Orientación de 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 el estilo del borde del formulario: segunda opción
Crear diseño con Divi
Agregar nueva fila
Estructura de la columna
¡Ahora podemos cambiar a Divi Builder! Continúe y cree una nueva página usando la página de inicio del Resort Layout Pack . Una vez que se cargue 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 la 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ón: 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 hemos agregado.
- Relleno superior: 0px
- Relleno 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 bloqueado es un módulo de texto. Agregue un título H3 de su elección al cuadro de contenido.
Agregar código abreviado de formulario de suscripció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.
Agregue cualquier contenido que desee que aparezca después de que las personas completen el formulario de suscripción. En el siguiente ejemplo, puede notar 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
Pase 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.
- Título 3 Fuente: Gilda Display
Espaciado
Y para darle forma al módulo, vamos a agregar algunos márgenes personalizados y valores de relleno. También estamos modificando todos estos valores para que el diseño coincida con cualquier tamaño de pantalla que usen sus visitantes.
- Margen superior: -17vw
- Margen izquierdo: 65vw (escritorio), 37vw (tableta), 3vw (teléfono)
- Margen derecho: 0px
- Relleno superior: 5vw (escritorio), 11vw (tableta), 13vw (teléfono)
- Acolchado inferior: 5vw, 11vw (tableta), 13vw (teléfono)
- Relleno izquierdo: 6vw (escritorio), 11vw (tableta), 16vw (teléfono)
- Relleno derecho: 6vw (escritorio), 11vw (tableta), 16vw (teléfono)
Borde
Continúe yendo a la configuración de borde del Módulo de texto y agregue ‘500vw’ en cada una de las esquinas, excepto en la esquina inferior derecha.
Sombra de la caja
Agregue una sombra de cuadro al lado para hacer que el módulo de texto se destaque.
- Fuerza de desenfoque de sombra de cuadro: 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: 500ms
- Retardo de animación: 1000ms
- Intensidad de animación: 16%
Clonar Fila
Una vez que haya terminado de crear la primera ventana emergente de esquina de contenido bloqueado, puede continuar y clonar toda la fila.
Coloque la fila duplicada aquí:
Eliminar el relleno inferior de la sección
Retire el relleno inferior de la sección en la que ha colocado la fila.
- Relleno 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úrate de cambiar también las esquinas redondeadas. Estamos usando ‘500vw’ para cada una de las esquinas excepto para la esquina inferior izquierda.
Cambiar la configuración de animación del módulo de texto
Por último, pero no menos importante, cambia 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 bloqueado 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 completan 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!