Divi Layout Block abre la puerta a muchas formas convenientes de integrar las potentes funciones de diseño de Divi Builder con el editor de bloques predeterminado de WordPress (Gutenberg). Esto le permite escribir la mayoría de los contenido de la publicación de su blog utilizando la conocida interfaz de bloques de Gutenberg, luego inyecte diseños Divi donde se necesite un diseño o funcionalidad personalizados. Un bloque de diseño Divi puede incluir cualquier cosa que puedas crear en Divi Builder, pero también es excelente para incluir algo tan simple y esencial como un formulario de suscripción.

En este tutorial, veremos cómo agregar un formulario suscripción a una publicación de blog de Gutenberg utilizando el bloque de diseño Divi.

Resultado posible

Resultado final divi

Importar el bloque de diseño JSON

Descargue el diseño en la biblioteca Divi

Para importar el archivo JSON que pudo descargar arriba, vaya a su biblioteca Divi en el backend de su panel de WordPress y haga clic en 'Importar y exportar'.

Importación Divi

Luego seleccione el archivo JSON en su carpeta de descarga y haga clic en "Importar diseños de Divi Builder".

Importar json divi 1

Agregue un nuevo Divi Block dentro de la publicación de Gutenberg

Una vez que se ha importado su diseño, puede acceder a su mensaje de Gutenberg y agregar un nuevo bloque de diseño Divi.

Diseño Divi

Importe un archivo JSON desde presentaciones guardadas

Luego haga clic en "Cargar de la biblioteca", vaya a "Sus diseños guardados" y seleccione el diseño para importar el bloque de diseño Divi CTA en su publicación de blog. Eso es !

Inyectar un formulario en gutenberg
Suscripción de correo electrónico de diseño Divi

¡Y es todo!

Inyectar un módulo de formulario divi

Pasemos al tutorial, ¿de acuerdo?

Agregue un módulo de correo electrónico Optin a su publicación de blog de Gutenberg

Crear o editar una publicación de blog

Para comenzar, necesitamos crear una nueva publicación de blog o editar una existente. Para este ejemplo, agreguemos contenido Simule el título y el cuerpo del artículo utilizando algunos bloques de encabezado y párrafo. A continuación, agregue una imagen destacada y elija "Sin barra lateral" para el diseño en la configuración de la página Divi.

Diseño de artículo

Agregar un bloque de diseño Divi en línea

Una vez que haya creado la mayor parte de la publicación, todo lo que tenemos que hacer es agregar un nuevo bloque de diseño Divi donde queramos en el área de publicaciones. contenido de publicación. Podríamos agregarlo en algún lugar más cercano al final del mensaje para captar un cliente potencial calificado que obviamente esté interesado en el contenido del mensaje.

Para agregarlo, pase el mouse sobre el área donde desea agregar la opción correo electrónico, luego haga clic en el ícono azul más para agregar un nuevo bloque. En la lista de bloques contextuales, seleccione el bloque Divi Layout.

Agregar bloque de diseño divi

Crear un nuevo diseño en el bloque de diseño Divi

Una vez seleccionado el bloque de diseño Divi, tendremos la opción de “Crear un nuevo diseño” o “Cargar desde la biblioteca”. Dado que necesitamos crear la opción de correo electrónico desde cero, elija la opción "Crear nuevo diseño".

Diseñar nuevo diseño divi

Diseño de la sección

En el editor de diseño, podemos comenzar a diseñar la opción de correo electrónico que se incluirá en nuestra publicación. Todo lo que diseñamos en este editor se mostrará en el área Divi Layout Block de la publicación.

Para comenzar, abra la configuración de la sección predeterminada que ya está allí.

Para el diseño, elegiremos un diseño de dos columnas.

Elija el diseño divi

Luego agregaremos el módulo Email Optin a una de las columnas, te dejo la opción de la columna.

Módulo de correo electrónico optin divi

A continuación, personalizaremos el fondo de la sección. Siempre puede cambiar los valores para que su diseño sea único. Sin embargo, usamos los siguientes valores:

  • Fondo: # ff6100
  • Separador superior e inferior: el decimotercero contando desde arriba.
Separador de módulo Divi
  • Ancho del elemento divisor: 40px (superior e inferior).

Ahora agregaremos texto a la columna opuesta. Aquí, utilizará un texto de incentivo para acercar el visitante Suscribirse.

Módulo de texto Divi

Luego tendrá que hacer las diferentes modificaciones:

  • Texto de fuente: Montserrat
  • Color de fuente: #FFF
  • Fuente de texto Subtítulo H2: Montserrat
  • Tamaño de subtítulo de texto H2: 2.5em
  • Texto Subtítulo H2 Color: #FFF
Personalización del título Divi

Recuerde configurar el sistema de correo electrónico que utilizará. Debes saber que Gutenberg es compatible con MailChimp.

Consideraciones finales

Agregar un correo electrónico de suscripción a su mensaje de Gutenberg se ha vuelto increíblemente fácil con el bloque de diseño Divi. No solo puede agregar una opción de correo electrónico completamente funcional (y fácil de usar) en segundos, sino que también puede usar Divi Builder para agregar diseños personalizados, efectos de desplazamiento y animación. ¡Todo esto sin tener que usar un complemento!