Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete 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 agregar un formulario de suscripción de libro electrónico con una descarga inmediata a la página de destino del paquete de diseño SEO de Divi . Esta forma de abordar sus formularios de suscripción es una situación en la que todos ganan, tanto para usted como para sus visitantes. Podrá hacer crecer su lista de correo electrónico y sus visitantes podrán descargar contenido valioso justo después de compartir su nombre y dirección de correo electrónico con usted. No tendrá que proporcionar a sus visitantes un correo electrónico que contenga la descarga; podrán hacer clic en el botón de descarga de inmediato.
El formulario de suscripción de contenido personalizado y bloqueado que vamos a agregar a la página de destino se ve así:
Después de que alguien se suscriba a su formulario de suscripción, aparecerá el siguiente botón (en lugar del formulario de suscripción) en el que pueden hacer clic e iniciar una descarga de inmediato:
La puesta en marcha
1. Instale y active el tema Divi
2. Instale complementos
3. Descargue el paquete de diseño e importe el archivo SEO_All.json a su biblioteca de temas Divi.
4. Cree nuevas páginas para cada diseño.
5. Crea tu menú principal.
Si está confundido con la configuración mencionada anteriormente, puede encontrar instrucciones más detalladas sobre cómo configurar su diseño correctamente consultando estos 10 pasos para usar un paquete de diseño para su nuevo proyecto .
Parte 1: Descargue e instale el complemento Bloom
Paso 1: Descarga Bloom
Lo primero que deberá hacer es descargar el complemento Bloom . Si es miembro de Elegant Themes, puede encontrar el complemento en el Área de miembros después de iniciar sesión. Si aún no es miembro de Elegant Themes, vaya a la siguiente página para convertirse en miembro de nuestra comunidad empoderada.
Paso 2: Cargue e instale Bloom
Una vez que descargue el complemento Bloom, vaya a su tablero de WordPress> Complementos> Agregar nuevo> Cargar Bloom y asegúrese de activarlo también .
Parte 2: crear un formulario de suscripción de contenido bloqueado
Paso 1: Vaya a Bloom y haga clic en Nueva opción
Lo primero que vamos a hacer es crear un nuevo formulario de suscripción de contenido bloqueado para nuestro sitio web. Para ello, vaya a Bloom > Formularios de suscripción > Y haga clic en ‘Nueva suscripción’ .
Paso 2: seleccione el formulario de suscripción de contenido bloqueado
Una vez que haga clic en ‘Nueva opción’, verá que aparece una amplia gama de formularios de suscripción. El que necesitaremos es el de ‘Contenido bloqueado’.
Paso 3: Integración del formulario de configuración
Lo siguiente que deberá hacer es dar un nombre a su nuevo formulario de suscripción y habilitar una integración de formulario con el proveedor de correo electrónico que está utilizando.
Paso 4: Configuración de diseño
Ahora que ha terminado la parte práctica del formulario optin, puede continuar y cambiar el diseño del mismo. Lo primero que deberá hacer es eliminar el título de suscripción y el mensaje de suscripción por completo. Luego, seleccione ‘Imagen arriba del texto’ como Orientación de la imagen y seleccione ‘ section-bg-graph.png ‘ como su imagen. Esta imagen, después de agregar el paquete de diseño SEO a su sitio web, ya está presente en su carpeta de medios.
Desplácese hacia abajo en la página Diseño y asegúrese de que los siguientes cambios se apliquen a su estilo de opción, configuración de formulario y estilo de formulario:
- Color de fondo: #FFFFFF
- Orientación del formulario: formulario en la parte inferior
- Campos de nombre: campo de nombre único
- Color de fondo del formulario: #8a1fbb
- Color del botón: #000000
- Color del texto del botón: Claro
Paso 5: código CSS adicional
Por último, pero no menos importante, agregaremos un código CSS adicional que hará que nuestro formulario de suscripción se vea un poco mejor:
|
01
02
03
04
05
06
07
|
.et_bloom .et_bloom_form_header img, .et_bloom .et_bloom_form_header .et_bloom_form_text {padding: 0px !important;}.et_bloom .et_bloom_form_container .et_bloom_form_header {padding: 0px !important;} |
Parte 3: Agregar formulario de suscripción de contenido bloqueado a la página de destino
Paso 1: cambiar el espaciado de la sección del héroe
Ahora que hemos creado el formulario de suscripción de contenido bloqueado, estamos listos para comenzar a agregarlo a la página de destino. Comience abriendo la página de destino con el generador visual, abriendo la configuración de la sección principal y cambiando el relleno personalizado a:
- Superior: 2%
- Abajo: 0px
Paso 2: eliminar la fila actual
Continúe eliminando la fila que se está utilizando actualmente dentro de la sección principal.
Paso 3: agregue una fila de una columna
Y, en su lugar, agregue una fila con una columna a su sección.
Paso 4: clone el módulo de texto ‘Nuestros servicios’ y colóquelo en una nueva fila
Luego, clone el módulo de texto ‘Nuestros servicios’ dentro de la segunda sección de la página y colóquelo dentro de la fila que acaba de crear.
Paso 5: cambiar la subcategoría de texto
Tendremos que hacer algunas modificaciones a este módulo de texto. Además de cambiar el contenido, realice los siguientes cambios en la subcategoría Texto:
- Color del texto: Claro
- Tamaño del texto: 22px
- Color del texto: #f2f2f2
Paso 6: Cambiar la subcategoría del texto del encabezado
Desplácese hacia abajo en la pestaña Diseño, abra la subcategoría Texto del encabezado y cambie el Tamaño del texto del encabezado a ’36px’ también.
Paso 7: cambiar el tamaño
A continuación, abra la subcategoría Dimensionamiento y aplique la siguiente configuración:
- Ancho: 388px
- Alineación del módulo: Centro
Paso 8: Agregar nuevo módulo de texto
Justo debajo del módulo de texto que acaba de editar, agregue otro módulo de texto.
Paso 9: agregue el código abreviado de formulario de Optin de contenido bloqueado al módulo de texto
Lo primero que deberá agregar a este módulo de texto es el código abreviado del formulario de suscripción de contenido bloqueado que hemos creado al comienzo de esta publicación.
Paso 10: agregue el archivo comprimido descargable a los medios y copie el enlace
Luego, agregue un archivo comprimido a su carpeta de medios que contenga el contenido que le gustaría compartir con sus visitantes de forma gratuita. Una vez que haya agregado el archivo comprimido, copie el enlace asignado a su archivo comprimido.
Paso 11: agregue un enlace de descarga entre el código abreviado del formulario Optin de contenido bloqueado
Justo entre el código abreviado de su formulario de suscripción, agregue el enlace a su archivo comprimido. Asegúrese de usar su propia URL de archivo comprimido para el ‘href’:
|
01
|
<a target="_blank" href="">Download the Free E-book</a> |
Paso 12: agregue color de fondo al módulo de texto
A continuación, abra la subcategoría Fondo de su módulo de texto y cambie el color de fondo a ‘#FFFFFF’.
Paso 13: Configuración de texto
Pase a la pestaña Diseño, abra la subcategoría Texto y aplique los siguientes cambios:
- Fuente del texto: Poppins
- Peso de fuente de texto: regular
- Tamaño del texto: 27px
- Color del texto: #8a1fbb
- Orientación del texto: Centro
Paso 14: Dimensionamiento
Luego, abra la subcategoría Tamaño y use la siguiente configuración para ello:
- Ancho: 47 % (escritorio), 100 % (tableta y teléfono)
- Alineación del módulo: Centro
Paso 15: Espaciado
Este módulo de texto también necesitará el siguiente relleno personalizado:
- Superior: 0px
- Abajo: 25px
Paso 16: Configuración de borde
Luego, abre la subcategoría Borde y agrega ’20px’ a cada una de las esquinas.
Paso 17: Sombra de cuadro
Por último, aplique una sombra de cuadro sutil a su módulo de texto haciendo clic en la siguiente opción de sombra de cuadro y usando su configuración predeterminada:
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo agregar un formulario de suscripción de libro electrónico a su sitio web que inmediatamente es seguido por un botón de descarga para el paquete de diseño de SEO gratuito de Divi usando Bloom. Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tienes alguna pregunta; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!