Cómo ocultar un enlace de descarga con un formulario de suscripción en Divi. Podrá hacer crecer su lista de correo electrónico y sus visitantes podrán descargar contenido valioso inmediatamente 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.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vista previa del caso de uso

El formulario de suscripción de contenido personalizado y bloqueado que vamos a agregar a la página de destino tiene este aspecto:

libro electronico

Después de que alguien se suscriba a su formulario de opción, aparecerá el siguiente botón (en lugar del formulario de opción) en el que puede hacer clic e iniciar una descarga de inmediato:

libro electronico

Parte 1: Descargue e instale el complemento de 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.

libro electronico

Paso 2: Cargue e instale Bloom

Una vez que descargue el complemento Bloom, vaya a su panel de WordPress> Complementos> Agregar nuevo> Cargar Bloom y asegúrese de activarlo también .

libro electronico

Parte 2: crear un formulario optin de contenido bloqueado

Paso 1: Ve a Bloom y haz clic en New Optin

Lo primero que haremos es crear un nuevo formulario de contenido bloqueado para nuestro sitio web. Para hacer eso, vaya a Bloom> Optin Forms> Y haga clic en ‘New Optin’ .

libro electronico

Paso 2: Seleccione el formulario de contenido bloqueado Optin

Una vez que haga clic en ‘Nueva Optin’, verá aparecer una amplia gama de formas optin. El que necesitaremos es el ‘Contenido bloqueado’.

libro electronico

Paso 3: Configurar la integración del formulario

Lo siguiente que tendrá que hacer es dar un nombre a su nuevo formulario optin y habilitar una integración de formulario con el proveedor de correo electrónico que está utilizando.

libro electronico

Paso 4: configuración de diseño

Ahora que ha terminado la parte práctica de la forma optin, puede seguir adelante y cambiar el diseño de la misma. Lo primero que deberá hacer es eliminar el título y el mensaje optin por completo. Luego, seleccione ‘Imagen sobre el 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.

libro electronico

Desplácese hacia abajo en la página Diseño y asegúrese de que los siguientes cambios se apliquen a su estilo, configuración y estilo de formulario optin:

  • 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

libro electronico

Paso 5: Código CSS adicional

Por último, pero no menos importante, vamos a añadir algo de código CSS adicional que hará que nuestro formulario de suscripción voluntaria mirada simplemente 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;
}

libro electronico

Parte 3: Agregar el formulario optin de contenido bloqueado a la página de destino

Paso 1: Cambiar el espaciado de sección de héroe

Ahora que hemos creado el formulario optin de contenido bloqueado, estamos listos para comenzar a agregarlo a la página de destino. Comience abriendo la página de inicio con el generador visual, abriendo la configuración de la sección de héroe y cambiando el relleno personalizado en:

  • Superior: 2%
  • Inferior: 0px

libro electronico

Paso 2: eliminar la fila actual

Continúa eliminando la fila que se está utilizando actualmente en la sección de héroe.

libro electronico

Paso 3: agregue una fila de una columna

Y, en cambio, agregue una fila con una columna a su sección.

libro electronico

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.

libro electronico

Paso 5: Cambiar 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 de texto: 22px
  • Color del texto: # f2f2f2

libro electronico

Paso 6: Cambiar la subcategoría de texto de 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.

libro electronico

Paso 7: cambiar el tamaño

A continuación, abra la subcategoría de dimensionamiento y aplique la siguiente configuración:

  • Ancho: 388 px
  • Alineación del módulo: centro

libro electronico

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.

libro electronico

Paso 9: Agregue contenido bloqueado Optin Form Shortcode al módulo de texto

Lo primero que necesitará agregar a este módulo de texto es el código corto del formulario optin de contenido bloqueado que hemos creado al comienzo de esta publicación.

libro electronico

libro electronico

Paso 10: Agregue un 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 desea compartir con sus visitantes de forma gratuita. Una vez que haya agregado el archivo comprimido, copie el enlace asignado a su archivo comprimido.

libro electronico

Paso 11: Agregue el enlace de descarga entre el contenido bloqueado Optin Form Shortcode

Justo en medio de su código abreviado de formulario optin, 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>

libro electronico

libro electronico

Paso 12: Agregar 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’.

libro electronico

Paso 13: Configuración de texto

Pase a la pestaña Diseño, abra la subcategoría Texto y aplique los siguientes cambios:

  • Fuente de texto: Poppins
  • Peso de fuente de texto: Regular
  • Tamaño del texto: 27 px
  • Color del texto: # 8a1fbb
  • Orientación del texto: centro

libro electronico

Paso 14: dimensionamiento

Luego, abra la subcategoría Dimensionamiento y use la siguiente configuración para ello:

  • Ancho: 47% (escritorio), 100% (tableta y teléfono)
  • Alineación del módulo: centro

libro electronico

Paso 15: espaciado

Este módulo de texto también necesitará el siguiente relleno personalizado:

  • Superior: 0px
  • Inferior: 25px

libro electronico

Paso 16: Configuración de borde

Luego, abra la subcategoría Borde y agregue ’20px’ a cada una de las esquinas.

libro electronico

Paso 17: Box Shadow

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 utilizando su configuración predeterminada:libro electronico

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!