Crear publicaciones de blog valiosas requiere tiempo y esfuerzo. Además de encontrar los mejores temas para escribir en su nicho, también es importante mantener a los lectores interesados ​​y permitirles encontrar la información que buscan rápidamente. Ahora, una buena forma de abordar este tipo de experiencia de usuario es compartiendo un cuadro de resumen visual al final de la publicación de su blog, justo antes de las reflexiones finales. Con los nuevos bloques de diseño de Divi, ahora puede crear sin esfuerzo un cuadro de resumen con las opciones integradas de Divi. En este tutorial, lo guiaremos a través del proceso y también podrá descargar el archivo JSON del diseño de forma gratuita.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

cuadro resumen

Móvil

cuadro resumen

Importar el bloque de diseño JSON

Subir diseño a la biblioteca Divi

Para importar el archivo JSON que pudo descargar anteriormente, vaya a su Biblioteca Divi en el back-end de su panel de WordPress y haga clic en ‘Importar y Exportar’.

cuadro resumen

Luego, seleccione el archivo JSON dentro de su carpeta de descarga y haga clic en ‘Importar diseños de Divi Builder’.

cuadro resumen

Añadir nuevo bloque Divi Block dentro de la publicación Gutenberg

Una vez que se ha importado su diseño, puede ir a su publicación de Gutenberg y agregar un nuevo bloque de diseño Divi.

cuadro resumen

Importar archivo JSON de 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 cuadro de resumen a su publicación de blog. ¡Eso es!

cuadro resumen

cuadro resumen

¡Comencemos a recrear!

Utilice la plantilla de publicación de Sixth Theme Builder Pack

Descargar Sixth Theme Builder Pack

El cuadro de resumen que recrearemos a lo largo de este tutorial coincide perfectamente con la sexta plantilla de publicación del paquete de creadores de temas gratuitos. Vaya a la publicación del blog y descargue el paquete completo.

cuadro resumen

Ir a Divi Theme Builder

Luego, ve al Divi Theme Builder.

cuadro resumen

Subir plantilla de publicación

Haga clic en el icono en la esquina superior derecha y cargue la plantilla de publicación del paquete generador de temas. Asegúrese de cambiar todos los cambios del generador de temas después.

cuadro resumen

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

Ahora, una vez que haya agregado la plantilla de publicación correspondiente, es hora de crear el cuadro de resumen. Abre o crea una nueva publicación con Gutenberg.

cuadro resumen

Agregar resumen Título H2

Cerca del final de la publicación del blog, agregaremos un nuevo título H2.

cuadro resumen

Agregar nuevo bloque divi en línea

Luego, agregaremos un nuevo bloque de diseño Divi.

cuadro resumen

Construir nuevo diseño dentro del bloque divi

Una vez que haya agregado el bloque, obtendrá dos opciones. Elija construir un nuevo diseño.

cuadro resumen

Configuraciones de sección

Color de fondo

Dentro del editor de bloques de diseño Divi, verás una sección. Abra esa sección y use un fondo blanco para ello.

  • Color de fondo: #FFFFFF

cuadro resumen

Espaciado

Pase a la pestaña de diseño de la sección y agregue algunos valores de margen y relleno personalizados.

  • Margen superior: 100 px
  • Margen izquierdo: -10% (escritorio), 0% (tableta y teléfono)
  • Margen derecho: -10% (escritorio), 0% (tableta y teléfono)
  • Relleno superior: 0px
  • Relleno inferior: 0px

cuadro resumen

Frontera

Agregue también un radio de borde.

  • Abajo a la izquierda: 16px
  • Abajo a la derecha: 16px

cuadro resumen

Sombra de la caja

Junto con una sutil caja de sombra.

  • Caja Shadow Blur Fuerza: 60px
  • Box Shadow Spread Strength: 10px
  • Color de sombra: rgba (0,0,0,0.08)

cuadro resumen

Agregar nueva fila

Estructura de columna

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

cuadro resumen

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.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

cuadro resumen

Espaciado

Elimine el relleno superior e inferior predeterminado de la fila a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

cuadro resumen

Configuración de columna 1

Color de fondo

A continuación, abra la configuración de la columna 1 y use un color de fondo blanco para ello.

  • Color de fondo: #FFFFFF

cuadro resumen

Espaciado

Agregue algunos valores de relleno personalizados también.

  • Relleno superior: 70px
  • Relleno inferior: 70px
  • Acolchado izquierdo: 70 px
  • Relleno derecho: 70px

cuadro resumen

Sombra de la caja

Continúe agregando una sombra de cuadro sutil con un color de sombra predeterminado y diferente.

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra predeterminado: rgba (0,0,0,0)
  • Color de sombra de desplazamiento: rgba (0,0,0,0.15)

cuadro resumen

Escala de transformación de desplazamiento

Al pasar el mouse, también queremos escalar ligeramente la columna.

  • Derecha: 105%
  • Inferior: 105%

cuadro resumen

Hover Z Index

Complete la configuración de la columna agregando un índice de desplazamiento de z.

  • Hover Z Index: 11

cuadro resumen

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

Agregar número al cuadro de contenido

Es hora de agregar módulos, comenzando con un primer módulo de texto. Agregue un número al cuadro de contenido.

cuadro resumen

Fondo degradado

Luego, agregue un fondo degradado.

  • Color 1: # ff5e92
  • Color 2: # ffd4b6
  • Dirección de degradado: 165 grados

cuadro resumen

Configuraciones de texto

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

  • Fuente de texto: Poppins
  • Color del texto: #ffffff
  • Tamaño de texto: 26px
  • Alineación de texto: centro

cuadro resumen

Dimensionamiento

Asigne un ancho y alto a continuación.

  • Ancho: 150 px
  • Altura: 150 px

cuadro resumen

Frontera

Agregue también un radio de borde.

  • Inferior izquierdo, superior derecho e inferior derecho: 100 px

cuadro resumen

Elemento principal CSS

Para centrar el texto en nuestro contenedor, necesitaremos agregar algunas líneas de código CSS al elemento principal del módulo en la pestaña avanzada.

01
02
03
display: flex;
align-items: center;
justify-content: center;

cuadro resumen

Posición

Y completaremos la configuración del módulo al reposicionar el módulo.

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

cuadro resumen

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

Añadir contenido H3

En el siguiente módulo de texto. Agregue contenido H3 de su elección.

cuadro resumen

Configuraciones de texto H3

Cambie el tamaño del texto H3 del módulo a continuación.

  • Encabezado 3 Tamaño del texto: 23px

cuadro resumen

Espaciado

Modifique la configuración de espaciado también.

  • Margen superior: 100 px
  • Margen inferior: 20 px

cuadro resumen

Agregar módulo divisor a la columna

Visibilidad

El siguiente módulo que necesitamos es un Módulo Divisor. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

  • Mostrar divisor: sí

cuadro resumen

Configuraciones de línea

Pase a la pestaña de diseño del módulo y cambie la configuración de línea de la siguiente manera:

  • Color de línea: # ff5e92
  • Estilo de línea: sólido
  • Posición de línea: superior

cuadro resumen

Dimensionamiento

Modifique el tamaño del módulo también.

  • Divisor de peso: 2px
  • Ancho: 20%

cuadro resumen

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

Agregar contenido

En el siguiente y último módulo de texto. Agregue algún contenido de su elección.

cuadro resumen

Columna de clon

Una vez que haya completado la columna y todos sus módulos, puede clonar toda la columna.

cuadro resumen

Cambiar color de sombra del cuadro predeterminado

Abra la configuración de la columna 2 y cambie el color de sombra predeterminado.

  • Color de sombra: rgba (0,0,0,0.06)

cuadro resumen

Cambiar el fondo del degradado del módulo de texto n. ° 1

Abra el primer módulo de texto en la columna 2 a continuación y cambie el fondo degradado.

  • Color 1: # 7e5ce6
  • Color 2: # 25b8ee

cuadro resumen

Cambiar el borde del módulo de texto n. ° 1

Modifique también la configuración del borde del módulo.

  • Arriba a la izquierda, abajo a la izquierda y abajo a la derecha: 100 px

cuadro resumen

Cambiar la posición del módulo de texto n. ° 1

Y reposicione el módulo en la pestaña avanzada.

  • Loaction: arriba a la derecha

cuadro resumen

Cambiar el color del divisor

Continúe abriendo la configuración del Módulo divisor. Cambie el color de la línea para que coincida con la nueva paleta de colores.

  • Color de línea: # 7e5ce6

cuadro resumen

Cambiar todo el contenido

Por último, pero no menos importante, cambie todo el contenido del módulo en la columna 2.

cuadro resumen

Clonar toda la sección dos veces

Una vez que haya completado toda la primera sección, puede clonarla dos veces.

cuadro resumen

Cambiar el espacio de la primera sección duplicada

Abra la configuración de la primera sección duplicada y cambie los valores de margen en consecuencia:

  • Margen izquierdo: -5% (escritorio), 0% (tableta y teléfono)
  • Margen derecho: -5% (escritorio), 0% (tableta y teléfono)

cuadro resumen

Cambiar el espacio de la segunda sección duplicada

Abra el segundo duplicado también, elimine todos los valores de margen y agregue un margen inferior en su lugar.

  • Margen inferior: 100 px

cuadro resumen

Cambiar todo el contenido

Por último, pero no menos importante, cambie todo el contenido del módulo.

cuadro resumen

Guardar diseño en Divi Library para reutilizar

Si planea usar este cuadro de resumen dentro de otras publicaciones de blog, asegúrese de guardarlo en su Divi Library para que pueda acceder fácilmente. ¡Eso es!

cuadro resumen

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!