Cómo agregar un bloque de diseño Divi CTA en línea y animado a su publicación de blog de Gutenberg

Cuando optimiza la forma en que crea publicaciones de blog en su sitio web, es muy probable que desee incluir una CTA atractiva en algún lugar dentro de su publicación. Ahora, con la nueva integración de bloques de diseño de Gutenberg de Divi, puede agregar fácilmente un nuevo bloque construido por Divi en cualquier lugar dentro de su publicación de blog de Gutenberg. Esto le permite mantener el contenido general de la publicación del blog dentro del entorno de Gutenberg, mientras sigue construyendo un Divi CTA personalizado utilizando las opciones integradas de Divi-s. ¡Lo mejor de ambos mundos! En este tutorial, le mostraremos cómo agregar un bloque de diseño Divi CTA en línea y animado a su publicación de Gutenberg. ¡También compartiremos el archivo JSON del bloque de diseño Divi CTA de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el bloque de diseño de CTA Divi en línea y animado GRATIS

Para poner sus manos en las secciones de héroe gratuitas, primero deberá descargarlas 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.

Descarga los archivos

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.

DESCARGAR

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!

¡Empecemos a recrear!

Utilice la plantilla de publicación del tercer paquete Theme Builder

Descargar el paquete Third Theme Builder

¡Es hora de empezar a crear desde cero! En primer lugar, el diseño que estamos recreando coincide con el tercer paquete de creación de temas que se publicó en el blog Divi. Vaya a la publicación y descargue los archivos JSON de este paquete de creación de temas.

Ir a Divi Theme Builder

Una vez que haya descargado el tercer paquete de creación de temas, puede ir a Divi Theme Builder.

Subir plantilla de publicación

Sube la plantilla de publicación del paquete de creación de temas haciendo clic en el ícono en la esquina superior derecha.

Luego, seleccione la plantilla de publicación y haga clic en 'Importar plantillas Divi Theme Builder'. Asegúrese de guardar también los cambios del generador de temas. En este punto, hemos asignado la plantilla de publicación de blog del paquete de creación de temas a todas nuestras publicaciones.

Abra la publicación existente de Gutenberg o cree una nueva

El siguiente paso es agregar el bloque de diseño Divi CTA a nuestra publicación de Gutenberg. Para hacerlo, abra una publicación existente o cree una nueva.

Agregar nuevo bloque Divi en línea

Una vez dentro de la publicación, podrá agregar un nuevo bloque de diseño Divi.

Construya un nuevo diseño dentro del bloque Divi

Entonces, tendrás dos opciones. Seleccione la opción 'Crear nuevo diseño'.

Configuración de la sección

Espaciado

Una vez dentro del editor de bloques de diseño Divi, verá una sección. Abra esa sección y agregue algunos valores de margen personalizados para crear espacio alrededor del contenedor de la sección.

• Margen superior: 50 px
• Margen inferior: 50 px
• Margen izquierdo: -10%
• Margen derecho: -10%

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y aumente el ancho y el ancho máximo.

• Ancho: 100%
• Ancho máximo: 100%

Agregue el divisor n. ° 1 a la columna

Visibilidad

Es hora de agregar módulos, comenzando con un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya a la pestaña de diseño del módulo y cambie la configuración de la línea de la siguiente manera:

• Color de línea: # fc526e
• Estilo de línea: sólido
• Posición de la línea: superior

Dimensionamiento

Modifique también la configuración de tamaño.

• Peso del divisor: 3px
• Ancho: 30%
• Alineación del módulo: derecha
• Alto: 3px

Animación

Y modifique la configuración de la animación en consecuencia:

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Duración de la animación: 2000 ms
• Retraso de animación: 500 ms
• Intensidad de animación: 100%
• Opacidad inicial de la animación: 100%

Agregue el divisor n. ° 2 a la columna

Visibilidad

Continúe con el siguiente módulo divisor. Nuevamente, asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Luego, vaya a la pestaña de diseño del módulo y cambie la configuración de la línea de la siguiente manera:

• Color de línea: # e1e3e8
• Estilo de línea: sólido
• Posición de la línea: superior

Dimensionamiento

A continuación, modifique la configuración de tamaño del módulo.

• Peso del divisor: 3px
• Alto: 3px

Espaciado

Agregue también algunos valores de espaciado personalizados.

• Margen izquierdo: 10%
• Margen derecho: -20%

Animación

Y complete la configuración del módulo modificando la configuración de la animación de la siguiente manera:

• Estilo de animación: diapositiva
• Dirección de animación: izquierda
• Duración de la animación: 2000 ms
• Retraso de animación: 500 ms
• Intensidad de animación: 100%
• Opacidad inicial de la animación: 100%

Agregue el divisor n. ° 3 a la columna

Visibilidad

Pasemos al siguiente y último módulo divisor que necesitamos en esta fila. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Luego, vaya a la pestaña de diseño y cambie la configuración de la línea de la siguiente manera:

• Color de línea: # fc526e
• Estilo de línea: sólido
• Posición de la línea: superior

Dimensionamiento

Modifique también el tamaño del módulo.

• Peso del divisor: 3px
• Alto: 3px

Espaciado

Junto con la configuración de espaciado.

• Margen inferior: 100 px
• Margen izquierdo: -20%
• Margen derecho: 10%

Animación

Y complete la configuración del módulo cambiando la configuración de la animación.

• Estilo de animación: diapositiva
• Dirección de animación: Derecha
• Duración de la animación: 2000 ms
• Intensidad de animación: 100%
• Opacidad inicial de la animación: 100%

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 70%
• Alineación de filas: centro

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido H2

Luego, agregue un primer módulo de texto a la columna de la fila con algún contenido H2 de su elección.

Configuración de texto H2

Vaya a la pestaña de diseño y modifique la configuración del texto H2 en consecuencia:

• Color del texto del encabezado 2: # fc526e
• Tamaño del texto del encabezado 2: 28px

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Relleno superior: 50px
• Acolchado inferior: 50px
• Relleno izquierdo: 50px

Frontera

También estamos usando un borde izquierdo.

• Ancho del borde izquierdo: 2px
• Color del borde izquierdo: # fc526e

Animación

Y complete la configuración del módulo agregando una animación personalizada.

• Estilo de animación: Flip
• Dirección de animación: Centro
• Retraso de animación: 1500 ms

Agregar el módulo de texto n. ° 2 a la columna

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior con algún contenido de su elección.

Espaciado

Vaya a la pestaña de diseño del módulo y modifique los valores de relleno en consecuencia:

• Relleno superior: 50px
• Acolchado inferior: 50px
• Relleno derecho: 50px

Frontera

Agregue un borde superior y derecho a continuación.

• Borde superior y derecho: 2px
• Color del borde superior y derecho: # fc526e

Animación

Y complete la configuración del módulo modificando la configuración de la animación de la siguiente manera:

• Estilo de animación: Flip
• Dirección de animación: Centro
• Retraso de animación: 1700ms

Agregar módulo de botones a la columna

Agregar copia

El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Vaya a la pestaña de diseño del módulo y modifique la configuración del botón de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 13px
• Color del texto del botón: #ffffff
• Color de degradado 1: # ff5b84
• Color de degradado 2: # f94857
• Tipo de degradado: lineal
• Dirección del gradiente: 165 grados
• Ancho del borde del botón: 0px

• Radio del borde del botón: 0px
• Espacio entre letras de los botones: 1 px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Semi negrita
• Estilo de fuente del botón: mayúsculas

Espaciado

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

• Acolchado superior: 16px
• Acolchado inferior: 16px

Animación

Y complete la configuración del módulo agregando la siguiente animación:

• Estilo de animación: Flip
• Retraso de animación: 1900 ms

Clonar fila n. ° 1 y colocar en la parte inferior de la sección

Una vez que haya completado la primera y la segunda fila, puede clonar la primera fila y colocar el duplicado en la parte inferior de la sección.

Cambiar el orden del divisor

Cambie de lugar para el primer y último módulo divisor.

Cambiar el espaciado del divisor n. ° 1

Luego, abra el primer módulo divisor en su fila y modifique la configuración de espaciado.

• Margen superior: 100 px
• Margen izquierdo: 10%
• Margen derecho: -20%

Cambiar el espaciado del divisor n. ° 2

Cambie también la configuración de espaciado del segundo módulo divisor.

• Margen izquierdo: -20%
• Margen derecho: 10%

Cambiar el tamaño del divisor n. ° 3

Luego, abra el tercer módulo divisor y use la alineación del módulo izquierdo en la configuración de tamaño.

• Alineación del módulo: izquierda

Eliminar el retardo de animación del divisor n. ° 3

¡Elimine también el retraso de la animación del tercer módulo divisor y listo! Una vez que haya completado el bloque de diseño Divi CTA, asegúrese de guardar los cambios y actualizar su publicación.

• Retraso de animación: 0 ms

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo aprovechar la nueva integración de Gutenberg de Divi y agregar un bloque de diseño de CTA de Divi en línea y animado a su publicación de blog de Gutenberg. Esta es una excelente manera de resaltar su CTA de elección mientras los visitantes leen el contenido de la publicación de su blog. ¡También pudo descargar el archivo JSON del bloque de diseño Divi CTA de forma gratuita! Si tiene alguna pregunta, ¡no dude en dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.