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 querrá citar a alguien o resaltar una oración utilizada en un párrafo regular. Ahora, dentro del editor de Gutenberg, puede agregar un bloque de citas desde el principio, pero no le brinda tanta libertad de diseño como podría desear. Con Divi y sus bloques de diseño, eso ya no es un problema. Puede construir fácilmente un bloque en particular con Divi mientras mantiene el entorno de Gutenberg en otro lugar. 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 poner sus manos en los diseños gratuitos de citas resaltadas construidos por Divi, primero deberá descargarlos 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!

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

Suscríbete a nuestro canal de Youtube

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 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 compatible 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 al Creador de temas Divi

Luego, ve al Divi Theme Builder .

Subir plantilla de publicación

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

Abra una publicación de Gutenberg existente 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.

Construir 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

Ajustes de sección

Espaciado

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

  • Margen superior: 50px
  • Margen inferior: 50px
  • Margen Izquierdo: -5%
  • Margen Derecho: -5%

Borde

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 animación: 100%
  • Curva de velocidad de animación: Facilidad de entrada y salida

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando 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: Fundido
  • Retardo de animación: 1500ms
  • Curva de velocidad de animación: Facilidad de entrada y salida

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 de texto H3 de la siguiente manera:

  • Estilo de fuente H3: Cursiva
  • Tamaño de texto H3: 2,1 rem (escritorio), 1,5 rem (tableta), 1,3 rem (teléfono)
  • Altura de la línea H3: 1,5 em

Recrear el Ejemplo #2

Ajustes de 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: 50px
  • Margen inferior: 50px
  • Margen Izquierdo: -5%
  • Margen Derecho: -5%
  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregar nueva fila

Estructura de la columna

Luego, agregue una nueva fila usando la siguiente estructura de columna:

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%

Agregue 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

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

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

Espaciado

También estamos agregando un margen superior.

  • Margen superior: 150px

Animación

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

  • Estilo de animación: Voltear
  • Dirección de animación: Centro
  • Retardo de animación: 500ms
  • Intensidad de animación: 200%
  • Curva de velocidad de animación: Facilidad de entrada y salida

Posición

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

  • Posición: Absoluta
  • Ubicación: Arriba a la izquierda

Agregue el Módulo de Texto #2 a la Columna

Agregar contenido H3

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

Configuración de texto H3

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

  • Título 3 Estilo de fuente: Cursiva
  • Título 3 Tamaño del texto: 2,6 rem (escritorio), 1,7 rem (tableta), 1,3 rem (teléfono)
  • Encabezado 3 Altura de línea: 1.4em

Espaciado

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

  • Margen superior: 150px
  • Margen inferior: 150px
  • 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 animación de la siguiente manera:

  • Estilo de animación: Fundido
  • Retardo de animación: 2000ms
  • Curva de velocidad de animación: Facilidad de entrada y salida

Agregue el Módulo de Texto #3 a la Columna

Agregar contenido

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

Configuración de texto

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

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

Animación

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

  • Estilo de animación: Voltear
  • Dirección de animación: Centro
  • Retardo de animación: 1000ms
  • Intensidad de animación: 200%
  • Curva de velocidad de animación: Facilidad de entrada y salida

Posición

Y asegúrese de que la cita se coloque en la esquina inferior derecha del contenedor de la fila.

  • Posición: Absoluta
  • Ubicación: abajo a la derecha

Guardar diseños de cotizaciones en la biblioteca Divi para su reutilización

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 futuras publicaciones.

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 animadas resaltadas 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 pudo descargar los archivos JSON de forma gratuita! 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 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.