Cómo agregar una opción de correo electrónico Divi a su publicación de blog de Gutenberg
Publicado: 2020-02-03Divi Layout Block abre la puerta a muchas formas convenientes de llevar las potentes funciones de diseño de Divi Builder al editor de bloques predeterminado de WordPress (Gutenberg). Esto le permite escribir la mayor parte del contenido de la publicación de su blog utilizando la conocida interfaz de bloques de Gutenberg y luego inyectar Divi Layouts donde se necesita un diseño o funcionalidad personalizados. Un bloque de diseño Divi puede incluir cualquier cosa que pueda construir dentro de Divi Builder, pero también es excelente para incluir algo tan simple y esencial como una opción de correo electrónico.
En este tutorial, cubriremos cómo agregar una hermosa opción de correo electrónico Divi a una publicación de blog de Gutenberg utilizando el bloque de diseño Divi.
¡Empecemos!
Vistazo
Descarga el diseño GRATIS
Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Importación del JSON del bloque de diseño
Cargar diseño a 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 dentro de su carpeta de descarga y haga clic en 'Importar diseños de Divi Builder'.
Agregar nuevo bloque Divi Block dentro de Gutenberg Post
Una vez que se haya importado su diseño, puede ir a su publicación de Gutenberg y agregar un nuevo bloque de diseño Divi.
Importar archivo JSON desde diseños guardados
Luego, haga clic en 'Cargar desde biblioteca', navegue hasta 'Sus diseños guardados' y seleccione el diseño para importar el Bloque de diseño Divi CTA a su publicación de blog. ¡Eso es todo!
¡Y eso es!
Vayamos al tutorial, ¿de acuerdo?
Agregar una opción de correo electrónico Divi 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 simulado al título y al cuerpo de la publicación usando algunos bloques de encabezado y párrafo. Luego agregue una imagen destacada y elija "Sin barra lateral" para el Diseño de página en la Configuración de página Divi.
Agregar 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 en cualquier lugar que queramos dentro del área de contenido de la publicación. Podríamos agregarlo en algún lugar más cercano al final de la publicación para capturar un cliente potencial calificado que obviamente esté interesado en el contenido de la publicación.
Para agregarlo, coloque el cursor sobre el área donde desea agregar la opción de correo electrónico y luego haga clic en el ícono azul más para agregar un nuevo bloque. En la lista de bloques emergente, seleccione el bloque Divi Layout.
Cree un nuevo diseño dentro del bloque de diseño Divi
Una vez que se ha 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 sección
Dentro del editor de Bloques de diseño, podemos comenzar a diseñar la opción de correo electrónico para que se incluya 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 de la sección predeterminada que ya está allí.
Gradiente de fondo
Luego agregue un degradado de fondo de la siguiente manera:
- Color de degradado de fondo a la izquierda: # ff9945
- Gradiente de fondo Color derecho: # f86a4c
Divisores
A continuación, vaya a la pestaña de diseño y a un divisor de sección superior e inferior de la siguiente manera:
- Estilo de divisor superior: ver captura de pantalla
- Color del divisor superior: # f86a4c
- Repetición horizontal del divisor superior: 0.8x
- Estilo de divisor inferior: ver captura de pantalla
- Color del divisor inferior: # ff9945
- Repetición horizontal del divisor inferior: 0.8x
- Volteo del divisor inferior: horizontal y vertical
Margen y borde
Una vez que los separadores estén en su lugar, dé a la sección un pequeño margen por encima y por debajo y luego termínela con un borde y una animación de la siguiente manera:
- Margen: 20px superior, 20px inferior
- Esquinas redondeadas: 30px
- Ancho del borde: 2px
- Color del borde: # ff9945
- Estilo de animación: Flip
Agregar columna y establecer ancho de fila
Ahora que la sección está completa, agregue una estructura de una columna a la fila.
Luego actualice la configuración de la fila de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 100%
Cree la opción de correo electrónico
Agregar módulo Optin de correo electrónico
A continuación, agregue un módulo de suscripción de correo electrónico a la fila.
Contenido de Optin por correo electrónico
Para la configuración de contenido de suscripción de correo electrónico, actualice lo siguiente:
- Título: "¡Obtenga consejos GRATIS todas las semanas!"
- Cuerpo: [mantener contenido simulado predeterminado]
- Lista de Mailchimp: [agregar una lista]
- Usar campo de nombre único: SÍ
- Usar color de fondo: NO
Diseño de Optin de correo electrónico
Los campos
Vaya a la pestaña de diseño y diseñe los campos de suscripción de correo electrónico actualizando lo siguiente:
- Disposición: cuerpo a la derecha, forma a la izquierda
- Color de fondo de los campos: # f86a4c
- Color del texto de los campos: #ffffff
- Fuente Fields: IBM Plex Sans
- Tamaño del texto de los campos: 18px
- Espaciado de letras de campos: 2px
- Altura de la línea de campos: 2em
Título
Actualice la configuración del texto del título de la siguiente manera:
- Fuente del título: IBM Plex Sans Condensed
- Peso de la fuente del título: Semi negrita
- Color del texto del título: #ffffff
- Tamaño del texto del título: 60 px (escritorio), 30 px (teléfono)
- Altura de la línea de título: 1.2em (escritorio), 1.6 (teléfono)
Botón
Para el botón, actualice lo siguiente:
- Usar estilos personalizados para el botón: SÍ
- Color del texto del botón: # ff9945
- Gradiente de fondo del botón Color a la izquierda: # ff9945
- Gradiente de fondo del botón Color derecho: #ffffff
- Dirección del gradiente: 90 grados
- Posición final: 34%
- Ancho del borde del botón: 0px
- Espacio entre letras del botón: 2px
- Fuente del botón: IBM Plex Sans
- Peso de la fuente del botón: negrita
- Estilo de fuente del botón: TT
- Relleno de botones: 15 píxeles en la parte superior, 15 píxeles en la parte inferior
Relleno
Y para un último toque, agregue el siguiente relleno:
- Acolchado: 5% a la izquierda, 5% a la derecha
Resultado final
Una vez que hayamos terminado de diseñar el diseño dentro del editor Divi Layout, asegúrese de guardar el diseño. Luego, guarde la publicación para que pueda ver una vista previa de la suscripción al correo electrónico en una página en vivo. Así es como se ve.
Aquí está la pequeña animación de la opción de correo electrónico a medida que se desplaza hacia abajo en la publicación.
Pensamientos finales
Agregar una suscripción de correo electrónico a su publicación de Gutenberg se volvió increíblemente simple con Divi Layout Block. 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 utilizar un plugin!
Espero tener noticias tuyas en los comentarios.
¡Salud!