Cómo crear un árbol genealógico con la configuración de transformación de Divi


¿Alguna vez intentó crear un árbol genealógico para su sitio web, pero no sabía exactamente cómo abordarlo? Bueno, en el tutorial de Divi de hoy, le mostraremos exactamente cómo hacerlo. Además de crear el árbol genealógico, también nos aseguramos de que siga respondiendo en todos los tamaños de pantalla. Una vez que haya terminado de crear el árbol genealógico, siempre podrá modificar las imágenes, el texto y el diseño según sus preferencias y prepararlo para su publicación. ¿Quieres comenzar con este diseño de árbol genealógico de inmediato? Podrá descargar el archivo JSON de forma gratuita y agregarlo a cualquier sitio web que esté creando.

Hagámoslo.

Avance

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

Escritorio

árbol de familia

Móvil

árbol de familia

Descargue el diseño del árbol genealógico GRATIS

Para tener en sus manos el diseño del árbol genealógico gratuito, primero deberá descargarlo 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.

(incrustar) https://www.youtube.com/watch?v=UDfZ1Bc_jvY (/ incrustar)

Suscríbete a nuestro canal de Youtube

Posicionamiento de miembros de la familia

Agregar nueva sección

Espaciado

¡Empecemos a crear! Lo primero que debemos hacer es agregar una nueva sección regular a la página en la que estamos trabajando. Abra la configuración de la sección y agregue algo de relleno superior e inferior personalizado usando el ancho de la ventana gráfica.

  • Acolchado superior: 8vw
  • Acolchado inferior: 8vw

Agregar fila n. ° 1

Estructura de columna

Continúe agregando la primera fila a su sección 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 de la sección y la pantalla.

  • Usar ancho de canalón personalizado: Sí
  • Ancho de la canaleta: 1
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

Para agregar espacios en blanco a los lados izquierdo y derecho de la fila en el escritorio, agregaremos un poco de relleno personalizado a la izquierda y a la derecha usando la unidad de ancho de la ventana gráfica.

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Relleno izquierdo: 15vw (escritorio), 0vw (tableta y teléfono)
  • Relleno derecho: 15vw (escritorio), 0vw (tableta y teléfono)

Agregar módulo de imagen a la columna

Cargar imagen

¡Es hora de comenzar a agregar módulos! El primero que necesitamos es un módulo de imagen. Sube una imagen con un ancho y un alto de "180 px".

Alineación

Luego, vaya a la pestaña de diseño y cambie la alineación de la imagen.

  • Alineación de imagen: centro

Dimensionamiento

A continuación, modifique la configuración de tamaño.

  • Ancho: 49%
  • Alineación del módulo: centro

Frontera

Y convierta la imagen en un círculo agregando un valor alto a cada una de las esquinas en la configuración del borde. Estamos usando "20vw", pero puede usar cualquier número alto que desee.

Agregar módulo de texto a la columna

Agregar contenido

Pasemos al siguiente módulo, que es un módulo de texto. Agregue el nombre del miembro de la familia aquí.

Color de fondo

Luego, vaya a la configuración de fondo y cambie el color de fondo a blanco.

  • Color de fondo: #ffffff

Configuración de texto

A continuación, modifique la configuración del texto. Si desea crear otra apariencia para el árbol genealógico, no dude en jugar con estas configuraciones.

  • Fuente de texto: Open Sans
  • Color del texto: # 000000
  • Tamaño del texto: 0.8vw (escritorio), 1.2vw (tableta), 1.9vw (teléfono)
  • Altura de la línea de texto: 0.4em
  • Orientación del texto: centro

Espaciado

Pase a la configuración de espaciado y agregue algunos valores de margen y relleno personalizados. Estos valores nos ayudarán a dar forma al módulo de texto y hacer que se superponga ligeramente con el módulo de imagen.

  • Margen superior: -0.5vw
  • Margen izquierdo: 1vw
  • Margen derecho: 1vw
  • Acolchado superior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
  • Acolchado inferior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

Frontera

Pase a la configuración del borde y agregue un borde superior también.

  • Ancho del borde superior: 5px
  • Color del borde superior: # 000000

Sombra de la caja

Junto con un cuadro de sombra para crear profundidad en la página.

  • Posición vertical de la sombra del cuadro: 10px
  • Fuerza de desenfoque de sombra de caja: 50px
  • Color de sombra: rgba (0,0,0,0.17)

Índice Z

Para asegurarnos de que el Módulo de texto permanezca encima del Módulo de imagen, aumentaremos el índice Z en la configuración de visibilidad del Módulo de texto.

  • Índice Z: 2

Clonar fila tres veces

Una vez que haya terminado de crear la primera fila y de modificar todos los módulos en ella, puede continuar y clonar la fila tres veces. Esto nos ayudará a ahorrar tiempo en los próximos pasos del tutorial. Cada una de estas filas se utilizará para crear un nivel diferente en el árbol genealógico.

Personalizar la fila n. ° 1

Clonar ambos módulos 7 veces

¡Comencemos a personalizar el primer nivel del árbol genealógico! Cambie al modo de estructura alámbrica y clone los dos módulos en su fila 7 veces. Una vez que haya terminado, el backend de su fila debería verse así:

árbol de familia

Elemento principal de columna CSS

Estamos convirtiendo toda la columna en una cuadrícula. En total, debería haber 16 módulos en su columna. Vamos a colocar estos 16 módulos en 8 columnas de cuadrícula. Esto significa que cada una de las 8 columnas de la cuadrícula contendrá 2 módulos; un módulo de imagen y un módulo de texto. Abra la configuración de fila de la primera fila y agregue las siguientes líneas de código CSS al elemento principal de la columna:

display: grid;
grid-template-columns: repeat(8, 12.5%);

árbol de familia

Personalizar la fila n. ° 2

Clonar ambos módulos 3 veces

¡A la segunda fila! Aquí, vamos a clonar ambos módulos 3 veces.

árbol de familia

Elemento principal de columna

Vamos a convertir la columna en una cuadrícula con 4 columnas de cuadrícula agregando las siguientes líneas de código CSS al elemento principal de la columna de la fila:

display: grid;
grid-template-columns: repeat(4, 25%);

La razón por la que estamos usando este enfoque, en lugar de simplemente elegir una estructura de columna de fila existente con 4 columnas, es que queremos que todo siga siendo 100% sensible en tamaños de pantalla más pequeños.

árbol de familia

Personalizar la fila n. ° 3

Clonar ambos módulos

¡A la tercera fila! Clona cada uno de los módulos una vez.

árbol de familia

Elemento principal de columna

Luego, agregue las siguientes líneas de código CSS al elemento principal de la columna:

display: grid;
grid-template-columns: repeat(2, 50%);

árbol de familia

Personalizar fila n. ° 4

Distancia entre filas

¡A la siguiente y última fila! Aquí, lo único que tenemos que hacer es modificar los valores de relleno de filas.

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Acolchado izquierdo: 31vw
  • Acolchado derecho: 31vw

árbol de familia

Conexión de miembros de la familia mediante módulos de imagen

Agregar fila n. ° 1

Estructura de columna

Ahora que hemos alineado a todos los miembros de la familia, ¡podemos comenzar a conectarlos! Para hacer eso, agregue una nueva fila entre la primera y la segunda fila.

árbol de familia

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie los valores de tamaño.

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

árbol de familia

Espaciado

Vaya a la configuración de espaciado a continuación y agregue algunos valores de relleno personalizados.

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Relleno izquierdo: 15vw (escritorio), 0vw (tableta y teléfono)
  • Relleno derecho: 15vw (escritorio), 0vw (tableta y teléfono)

árbol de familia

Agregar módulo de imagen a la columna

Cargar ilustración

Luego, agregue un Módulo de imagen y cargue la ilustración que puede encontrar en la carpeta que descargó al comienzo de esta publicación.

árbol de familia

Dimensionamiento

Vaya a la configuración de tamaño del Módulo de imagen y habilite la opción "Forzar ancho completo".

  • Forzar ancho completo: Sí

árbol de familia

Espaciado

Asegúrese de deshabilitar la opción "Mostrar espacio debajo de la imagen" en la configuración de espaciado.

  • Mostrar espacio debajo de la imagen: No

árbol de familia

Clonar fila dos veces y cambiar su posición

Una vez que haya terminado de modificar la fila y el Módulo de imagen en ella, continúe y clónelo dos veces. Coloque los duplicados en consecuencia:

árbol de familia

Personalizar la fila n. ° 1

Clonar el módulo de imagen tres veces

Regrese a la primera fila y clone el módulo 3 veces.

árbol de familia

Elemento principal de columna

Coloque estos módulos de imagen en una cuadrícula con 4 columnas de cuadrícula agregando las siguientes líneas de código CSS al elemento principal de la columna de la fila:

display: grid;
grid-template-columns: repeat(4, 25%);

árbol de familia

Personalizar la fila n. ° 2

Módulo de imagen de clonación

Pase a la segunda fila y clone el módulo de imagen una vez.

árbol de familia

Elemento principal de columna

Coloque ambos módulos en una cuadrícula con dos columnas de cuadrícula agregando las siguientes líneas de código CSS al elemento principal de la columna de la fila:

display: grid;
grid-template-columns: repeat(2, 50%);

árbol de familia

Personalizar la fila n. ° 3

Cambiar espaciado

Continúe con el siguiente y último duplicado. Aquí, lo único que debe hacer es cambiar los valores de relleno personalizados y ¡listo!

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Acolchado izquierdo: 27vw
  • Acolchado derecho: 27vw

árbol de familia

Avance

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

Escritorio

árbol de familia

Móvil

árbol de familia

Pensamientos finales

En esta publicación, le mostramos cómo crear un árbol genealógico moderno con Divi. El árbol genealógico que hemos recreado se ve muy bien en todos los tamaños de pantalla. Al comienzo de este tutorial, también pudo descargar el archivo JSON de forma gratuita y comenzar a usarlo de inmediato. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!