Cuando está simplificando la forma en que crea publicaciones de blog en su sitio web, es muy probable que desee incluir una llamada a la acción atractiva en algún lugar dentro de su publicación. Ahora, con Divi y su nueva integración de bloques de diseño de Gutenberg, puede agregar fácilmente un nuevo bloque creado 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, al mismo tiempo que crea 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.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el bloque de diseño Divi CTA 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Importación del bloque de diseño JSON
Subir 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 tablero 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 la publicación de Gutenberg
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 la 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!
Use la plantilla de publicación del tercer paquete de generador de temas
Descargar el tercer paquete de creación de temas
¡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 lanzó en el blog de Divi. Vaya a la publicación y descargue los archivos JSON de este paquete de creación de temas.
Ir al Creador de temas Divi
Una vez que haya descargado el tercer paquete de creación de temas, puede ir a Divi Theme Builder .
Subir plantilla de publicación
Cargue la plantilla de publicación del paquete de creación de temas haciendo clic en el icono en la esquina superior derecha.
Luego, seleccione la plantilla de publicación y haga clic en ‘ Importar plantillas de 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 una publicación de Gutenberg existente o cree una nueva
El siguiente paso es agregar el bloque de diseño Divi CTA a nuestra publicación de Gutenberg. Para hacer eso, 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.
Construir un nuevo diseño dentro del bloque Divi
Entonces, obtendrás dos opciones. Seleccione la opción ‘Crear nuevo diseño’.
Ajustes de sección
Espaciado
Una vez dentro del editor de bloques de diseño de Divi, notará 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: 50px
- Margen inferior: 50px
- Margen Izquierdo: -10%
- Margen Derecho: -10%
Añadir Fila #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 la fila y aumente el ancho y el ancho máximo.
- Ancho: 100%
- Ancho máximo: 100%
Agregar divisor #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
Pase 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: Arriba
Dimensionamiento
Modifique también la configuración de tamaño.
- Peso del divisor: 3px
- Ancho: 30%
- Alineación del módulo: Derecha
- Altura: 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: 2000ms
- Retardo de animación: 500ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
Agregar divisor #2 a la columna
Visibilidad
En 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: Arriba
Dimensionamiento
Modifique la configuración de tamaño del módulo a continuación.
- Peso del divisor: 3px
- Altura: 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 animación de la siguiente manera:
- Estilo de animación: Diapositiva
- Dirección de animación: Izquierda
- Duración de la animación: 2000ms
- Retardo de animación: 500ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
Agregue el divisor #3 a la columna
Visibilidad
En el 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: Arriba
Dimensionamiento
Modifique también el tamaño del módulo.
- Peso del divisor: 3px
- Altura: 3px
Espaciado
Junto con la configuración de espaciado.
- Margen inferior: 100px
- Margen Izquierdo: -20%
- Margen Derecho: 10%
Animación
Y complete la configuración del módulo cambiando la configuración de animación.
- Estilo de animación: Diapositiva
- Dirección de animación: Derecha
- Duración de la animación: 2000ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
Añadir Fila #2
Estructura de la columna
Agregue otra fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 70%
- Alineación de filas: Centro
Agregue 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
Pase a la pestaña de diseño y modifique la configuración de texto H2 en consecuencia:
- Título 2 Color del texto: #fc526e
- Encabezado 2 Tamaño del texto: 28px
Espaciado
Agregue algunos valores de relleno personalizados a continuación.
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 50px
Borde
Estamos usando un borde izquierdo también.
- 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: Voltear
- Dirección de animación: Centro
- Retardo de animación: 1500ms
Agregue el Módulo de Texto #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
- Relleno inferior: 50px
- Relleno derecho: 50px
Borde
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 animación de la siguiente manera:
- Estilo de animación: Voltear
- Dirección de animación: Centro
- Retardo de animación: 1700ms
Agregar copia
El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Pase a la pestaña de diseño del módulo y modifique la configuración de los botones 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 degradado 1: #ff5b84
- Color degradado 2: #f94857
- Tipo de gradiente: lineal
- Dirección del gradiente: 165 grados
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espaciado entre letras de 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
Agregue un poco de relleno superior e inferior personalizado a continuación.
- Relleno superior: 16px
- Relleno inferior: 16px
Animación
Y complete la configuración del módulo agregando la siguiente animación:
- Estilo de animación: Voltear
- Retardo de animación: 1900ms
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 de los divisores
Cambie de lugar para el primer y el último módulo divisor.
Cambiar el espaciado del divisor n.º 1
Luego, abra el primer módulo divisor de su fila y modifique la configuración de espaciado.
- Margen superior: 100px
- 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 #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
Quitar el retraso de la animación del divisor n.º 3
¡Elimine también el retraso de animación del tercer módulo divisor y listo! Una vez que hayas completado el bloque de diseño Divi CTA, asegúrate de guardar los cambios y actualizar tu publicación.
- Retardo de animación: 0ms
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 Divi CTA 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 su publicación de 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.