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
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'.
Luego seleccione el archivo JSON en su carpeta de descarga y haga clic en "Importar diseños de Divi Builder".
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.
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 !
¡Y es todo!
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.
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.
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ñ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.
Luego agregaremos el módulo Email Optin a una de las columnas, te dejo la opción de la columna.
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.
- 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.
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
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!