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