Cuando simplifica la forma en que crea publicaciones de blog en su Sitio web, es probable que desees incluir una llamada a la acción atractiva en algún lugar de tu artículo. Ahora, con la nueva integración de Gutenberg Layout Block de Divi, puedes agregar fácilmente un nuevo bloque creado por Divi en cualquier lugar de tu publicación de blog de Gutenberg. Esto le permite mantener el contenido publicación general del blog en el entorno Gutenberg, mientras sigues creando un CTA Divi personalizado utilizando las opciones integradas de Divi. ¡Lo mejor de ambos mundos! En este tutorial, le mostraremos cómo agregar un bloque de diseño Divi CTA animado en línea a su publicación de Gutenberg. ¡También compartiremos el archivo JSON del bloque de diseño Divi CTA de forma gratuita!
Vamos.
Resultado posible
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.
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 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 desde 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!
¡Comencemos a recrear!
Use la plantilla de publicación para el tercer paquete de temas
Utilice el tercer paquete de generador de temas
¡Es hora de empezar a crear desde cero! En primer lugar, el diseño que recreamos corresponde al tercer paquete de creación de temas que se publicó en el blog Divi. Ir al articulo y descargue los archivos JSON para 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 acceder al Divi Theme Builder.
Descargar la plantilla de publicación
Descargue la plantilla de publicación Theme Builder Pack haciendo clic en el ícono 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 en el 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 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 hacer esto, abra un artículo existente o cree uno nuevo.
Agregar un nuevo bloque Divi en línea
Una vez dentro del mensaje, puede agregar un nuevo bloque de diseño Divi.
Crea un nuevo diseño dentro del bloque Divi
Entonces tendrás dos opciones. Seleccione la opción "Crear un nuevo diseño".
Configuraciones de sección
espaciamiento
Una vez dentro del editor de bloques de diseño Divi, verá una sección. Abra esta sección y agregue 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%
Agregar línea # 1
Estructura de la columna
Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:
apresto
Sin agregar más módulos, abra los parámetros de línea y aumente el ancho y el ancho máximo.
- Ancho: 100%
- Ancho máximo: 100%
Agregue el separador n. ° 1 a la columna
visibilidad
Es hora de agregar módulos, comenzando con un módulo de separación. Asegúrese de que la opción "Mostrar separador" esté habilitada.
- Mostrar separador: sí
línea
Cambie a la pestaña de diseño del módulo y cambie la configuración de fila de la siguiente manera:
- Color de línea: # fc526e
- Estilo de línea: sólido
- Posición de línea: alta
apresto
También cambie los parámetros de tamaño.
- Peso del divisor: 3px
- Ancho: 30%
- Alineación del módulo: derecha
- Altura: 3px
Animación
Y cambie la configuración de la animación en consecuencia:
- Estilo de animación: diapositiva
- Dirección de la animación: izquierda
- Duración de la animación: 2000 ms
- Retardo de animación: 500 ms
- Intensidad de animación: 100%
- Opacidad de inicio de la animación: 0%
Agregue el divisor # 2 a la columna
visibilidad
Pasemos al siguiente módulo de separación. Nuevamente, asegúrese de que la opción "Mostrar separador" esté activada.
- Mostrar separador: sí
línea
Luego, vaya a la pestaña de diseño del módulo y cambie la configuración de la fila de la siguiente manera:
- Color de línea: # e1e3e8
- Estilo de línea: sólido
- Posición de línea: alta
apresto
Luego modifique los parámetros de tamaño del módulo.
- Peso del divisor: 3px
- Altura: 3px
espaciamiento
También agregue valores de espaciado personalizados.
- Margen izquierdo: 10%
- Margen derecho: -20%
Animación
Y complete la configuración del módulo cambiando la configuración de la animación de la siguiente manera:
- Estilo de animación: diapositiva
- Dirección de la animación: izquierda
- Duración de la animación: 2000 ms
- Retardo de animación: 500 ms
- Intensidad de animación: 100%
- Opacidad de inicio de la animación: 100%
Puede agregar tantos separadores como desee para modificar su animación.
Agregar una línea # 2
Estructura de la columna
Agregue otra fila a la sección utilizando la siguiente estructura de columnas:
apresto
Sin agregar más módulos, abra los parámetros de línea y modifique los parámetros de tamaño de la siguiente manera:
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
- Ancho: 70%
- Alineación de línea: centro
Agregue el módulo de texto # 1 a la columna
Añadir contenido H2
A continuación, agregue un primer módulo de texto a la columna de fila con contenido H2 de tu elección.
Configuraciones de texto H2
Cambie a la pestaña Diseño y cambie la configuración del texto H2 en consecuencia:
- Color del texto del elemento 2: # fc526e
- Encabezado 2 Tamaño del texto: 28 px
espaciamiento
Luego agregue valores de relleno personalizados.
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 50px
Frontera
También usamos un borde izquierdo.
- Ancho del borde izquierdo: 2px
- Color del borde izquierdo: # fc526e
Animación
Y complete los parámetros del módulo agregando una animación personalizada.
- Estilo de animación: Flip
- Dirección de animación: Centro
- Retardo de animación: 1500 ms
Agregue el módulo de texto # 2 a la columna
Agregar contenido
Agregue otro módulo de texto justo debajo del anterior con contenido De tu elección
espaciamiento
Vaya a la pestaña de diseño del módulo y cambie los valores de relleno en consecuencia:
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno derecho: 50px
frontera
Luego agregue un borde superior y derecho.
- Borde superior y derecho: 2 píxeles
- Color del borde superior y derecho: # fc526e
Animación
Y complete la configuración del módulo cambiando la configuración de la animación de la siguiente manera:
- Estilo de animación: Flip
- Dirección de animación: Centro
- Retardo de animación: 1700 ms
Agregar un módulo de botón a la columna
Añadir una 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.
Configuraciones de botones
Cambie a la pestaña de diseño del módulo y cambie la configuración de los botones de la siguiente manera:
- Use estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 13px
- Color de texto del botón: #ffffff
- Gradiente de color 1: # ff5b84
- Gradiente de color 2: # f94857
- Tipo de gradiente: lineal
- Dirección gradiente: 165deg
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espacio 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úscula
espaciamiento
Luego agregue relleno personalizado superior e inferior.
- Relleno superior: 16px
- Relleno inferior: 16px
Animación
Y complete los parámetros del módulo agregando la siguiente animación:
- Estilo de animación: Flip
- Retardo de animación: 1900 ms
Clone la línea # 1 y colóquela en la parte inferior de la sección
Una vez que haya terminado la primera y la segunda línea, puede clonar la primera línea y colocar el duplicado en la parte inferior de la sección.
Cambiar el orden de los separadores
Cambiar lugares para el primer y último módulo de separación.
Consideraciones finales
En este artículo, le mostramos cómo aprovechar la nueva integración de Gutenberg de Divi y agregar un bloque de tono Divi CTA animado en línea a su publicación de blog de Gutenberg. Esta es una excelente manera de resaltar la llamada a la acción de su elección mientras visitantes lea el contenido de su entrada de blog.
