Cómo agregar citas destacadas de Divi-Built a lo largo de su publicación de Gutenberg

Al escribir una publicación de blog, a menudo se encontrará con ganas de citar a alguien o resaltar una oración utilizada en un párrafo normal. Ahora, dentro del editor de Gutenberg, puede agregar un bloque de citas de inmediato, pero no le brinda tanta libertad de diseño como potencialmente desearía. Con los bloques de diseño de Divi, eso ya no es un problema. Puede construir fácilmente un bloque en particular con Divi mientras mantiene el entorno de Gutenberg en otros lugares. En este tutorial, le mostraremos cómo agregar citas resaltadas en línea a las publicaciones de su blog usando Divi. ¡También podrá descargar el archivo JSON 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.

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Descargue los diseños de cotizaciones destacadas de Divi-Built GRATIS

Para tener en sus manos los diseños de citas resaltados creados por Divi, primero deberá descargarlos 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!

https://youtu.be/zScpa4-I7-8

Suscríbete a nuestro canal de Youtube

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 la biblioteca', navegue hasta 'Sus diseños guardados' y seleccione el diseño para importar el diseño de citas resaltadas a su publicación de blog. ¡Eso es todo!

Pasos generales

Use una plantilla de publicación de blog simple y amigable con UX

Descargar plantilla

Para definir el estilo de este tutorial, usaremos una plantilla de publicación de una publicación anterior. Vaya a esa publicación y descargue la plantilla.

Ir a Divi Theme Builder

Luego, vaya a Divi Theme Builder.

Subir plantilla de publicación

Haga clic en el icono en la esquina superior derecha, vaya a la pestaña de importación e importe la plantilla de publicación que ha descargado en el primer paso de este tutorial.

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

Una vez que haya configurado una plantilla de publicación, puede crear una nueva publicación de Gutenberg o abrir una existente.

Agregar nuevo bloque Divi en línea

Agregue un nuevo bloque Divi en algún lugar dentro de su publicación.

Construya un nuevo diseño dentro del bloque Divi

Una vez que haya agregado el bloque, obtendrá dos opciones. Elija el que dice "Crear nuevo diseño".

Recrear el ejemplo n. ° 1

Configuración de la sección

Espaciado

Una vez que esté dentro del editor de bloques de diseño Divi, verá una sección. Para recrear el primer diseño de ejemplo, abra la configuración de la sección y modifique los valores de los márgenes en consecuencia:

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

Frontera

Agregue un borde izquierdo a la siguiente sección.

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

Animación

Y use la siguiente configuración de animación:

• Estilo de animación: diapositiva
• Dirección de animación: Abajo
• Duración de la animación: 1500ms
• Intensidad de animación: 200%
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: Ease-In-Out

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

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

Animación

Complete la configuración de la fila cambiando la configuración de la animación de la siguiente manera:

• Estilo de animación: Fade
• Retraso de animación: 1500 ms
• Curva de velocidad de animación: Ease-In-Out

Agregar módulo de texto a la columna

Insertar contenido H3

El único módulo que necesitamos es un módulo de texto. Inserte el contenido de la cita resaltada H3.

Configuración de texto H3

Complete la configuración del módulo modificando la configuración del texto H3 de la siguiente manera:

• Estilo de fuente H3: cursiva
• Tamaño de texto H3: 2.1rem (escritorio), 1.5rem (tableta), 1.3rem (teléfono)
• Altura de la línea H3: 1.5em

Recrear el ejemplo n. ° 2

Configuración de la sección

Espaciado

¿Quiere recrear el segundo ejemplo de diseño en su lugar? Abra la configuración de la sección y modifique los valores de espaciado de la siguiente manera:

• Margen superior: 50 px
• Margen inferior: 50 px
• Margen izquierdo: -5%
• Margen derecho: -5%
• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

Luego, agregue 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 permita que la fila ocupe todo el ancho del contenedor de la sección.

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

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

Agregar contenido

Es hora de agregar módulos, comenzando con un primer módulo de texto. Agregue una cita al cuadro de contenido.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Playfair Display
• Color del texto: #eaeaea
• Tamaño del texto: 500px
• Altura de la línea de texto: 0em

Espaciado

También estamos agregando un margen superior.

• Margen superior: 150 px

Animación

Luego, cambiaremos la configuración de la animación.

• Estilo de animación: Flip
• Dirección de animación: Centro
• Retraso de animación: 500 ms
• Intensidad de animación: 200%
• Curva de velocidad de animación: Ease-In-Out

Posición

Nos aseguraremos de que la cita se coloque en la esquina superior izquierda del contenedor de filas modificando también la configuración de posición.

• Posición: Absoluto
• Ubicación: arriba a la izquierda

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

Agregar contenido H3

Pasemos al siguiente módulo de texto. Agregue el contenido de la cita resaltada H3 al cuadro de contenido.

Configuración de texto H3

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H3 de la siguiente manera:

• Estilo de fuente del título 3: cursiva
• Encabezado 3 Tamaño del texto: 2.6rem (escritorio), 1.7rem (tableta), 1.3rem (teléfono)
• Altura de la línea del título 3: 1.4em

Espaciado

Agregue también algunos valores de margen personalizados en diferentes tamaños de pantalla.

• Margen superior: 150 px
• Margen inferior: 150 px
• Margen izquierdo: 150 px (escritorio), 70 px (tableta), 30 px (teléfono)
• Margen derecho: 150 px (escritorio), 70 px (tableta), 30 px (teléfono)

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: Fade
• Retraso de animación: 2000 ms
• Curva de velocidad de animación: Ease-In-Out

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

Agregar contenido

Pasemos al siguiente y último módulo, que es otro módulo de texto. Agregue un símbolo de cita al cuadro de contenido.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto.

• Fuente de texto: Playfair Display
• Color del texto: #eaeaea
• Tamaño del texto: 500px
• Altura de la línea de texto: 0em
• Alineación de texto: derecha

Animación

Utilice la siguiente configuración de animación a continuación:

• Estilo de animación: Flip
• Dirección de animación: Centro
• Retraso de animación: 1000 ms
• Intensidad de animación: 200%
• Curva de velocidad de animación: Ease-In-Out

Posición

Y asegúrese de que la cotización se coloque en la esquina inferior derecha del contenedor de filas.

• Posición: Absoluto
• Ubicación: Abajo a la derecha

Guardar diseños de cotizaciones en la biblioteca Divi para reutilizarlos

Una vez que haya completado el diseño de cotización de su elección, asegúrese de guardarlo en su Biblioteca Divi para que pueda usarlo también para publicaciones futuras.

Avance

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

Ejemplo 1

Escritorio

Móvil

Ejemplo # 2

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con los bloques de diseño de Divi. Más específicamente, le mostramos cómo agregar citas resaltadas animadas a lo largo de su publicación de blog de Gutenberg. Las posibilidades de diseño son infinitas, pero le proporcionamos dos ejemplos con los que puede comenzar. ¡También pudiste descargar los archivos JSON gratis! Si tiene alguna pregunta o sugerencia, 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.