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

¿Alguna vez ha intentado crear un árbol genealógico para su sitio, pero no sabía exactamente cómo abordarlo? Bueno, en el tutorial de la división de hoy, le mostraremos exactamente cómo hacerlo. Además de crear el árbol genealógico, también nos aseguramos de que permanezca receptivo en todo el tamaño de la pantalla. Una vez que haya terminado de crear el árbol genealógico, ¡siempre podrá cambiar las imágenes, el texto y el diseño de acuerdo con sus preferencias y prepararlas para la transmisión! ¿Quieres comenzar de inmediato con este diseño del árbol genealógico? ¡Podrá descargar el archivo JSON gratuito y puede agregarlo a cualquier sitio web que cree!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la apariencia del árbol genealógico de forma gratuita para poner su mano en la apariencia gratuita del árbol genealógico, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Suscríbase a nuestro canal de YouTube, posicione a los miembros de la familia, agregue una nueva sección para comenzar a crear! Lo primero que debemos hacer es agregar una nueva sección habitual a la página en la que trabajamos. Abra la configuración de la sección y agregue algunos revestimientos forrados personalizados con el ancho de la ventana.
Revestimiento superior: 8VW
Revestimiento inferior: 8VW
Agregue la estructura de la columna de la fila # 1 Continuar agregando primero a su sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección y la pantalla.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Espacio para agregar espacio en blanco al lado izquierdo y derecho de la fila de escritorio, agregaremos algunos rellenos personalizados a la izquierda y a la derecha usando la unidad de ancho de la ventana.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
ENLIZACIÓN IZQUIERDA: 15VW (escritorio), 0VW (tableta y teléfono)
Revestimiento derecho: 15VW (escritorio), 0VW (tableta y teléfono) Agregue el módulo de imagen a la carga de columna. ¡La imagen es hora de comenzar a agregar módulos! El primero que necesitamos es un módulo de imagen. Cargue una imagen con el ancho y la altura de “180 PX”.
Alinee entonces, acceda a la pestaña de diseño y cambie la alineación de la imagen.

Alineación de imágenes: centro

La dimensión cambia la configuración de dimensionamiento adicional.
Ancho: 49%

Alineación del módulo: centro
Borde y convierta la imagen en un círculo agregando un alto valor a cada una de las esquinas en la configuración del borde. Usamos “20VW”, pero puede usar cualquier número grande que desee.
Agregue un módulo de texto al interruptor de contenido de la columna Agregar al siguiente módulo, que es un módulo de texto. Agregue el nombre del miembro de la familia aquí.

El color de fondo, accede a la configuración de fondo y cambie el color de fondo a blanco.

Color de fondo: #ffffff

Configuración de texto Cambie la configuración de texto a continuación. Si desea crear otro aspecto para el árbol genealógico, no dude en jugar con estas configuraciones.
Texto de fuente: Abrir sans

Color de texto: # 000000
Tamaño de texto: 0.8VW (escritorio), 1.2VW (tableta), 1.9VW (teléfono)
La altura de la línea de texto: 0.4em
Orientación de texto: centro
El espaciado cambia a la configuración del espacio y agregue algunos márgenes personalizados y valores de llenado. Estos valores nos ayudarán a modelar el módulo de texto y lo superpondrán fácilmente en el módulo de imagen.
Margen superior: -0.5VW

Margen izquierdo: 1 VW
Margen derecho: 1 VW
Revelaje superior: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
Bajo forro: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
El borde vaya a la configuración del borde y agregue un borde superior.
El ancho del borde superior: 5 px

Color de marco más alto: # 000000
Sombra de cuadro con un tono de caja para crear profundidad en la página.
Box Shadow Posición vertical: 10 PX

Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0,17)
El índice Z para garantizar que el módulo de texto permanezca por encima del módulo de imagen, aumentaremos el índice Z en la configuración de visibilidad del módulo de texto.
IND ÍNDICE: 2


Clone fila tres veces después de haber terminado de crear la primera fila y cambiar todos los módulos en ella, puede continuar la fila tres veces. Esto nos ayudará a ahorrar tiempo en los próximos pasos del tutorial. Cada una de estas líneas se utilizará para crear un nivel diferente en el árbol genealógico.
¡Personalice el clon de turno # 1 ambos módulos 7 veces para comenzar a personalizar el primer nivel del árbol genealógico! Cambie al modo de estructura alámbrica y clone los dos módulos en su turno 7 veces. Después de que termine, su línea Backynd debería verse así:

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

Pantalla: cuadrícula;

Columnas de plantilla de cuadrícula: repetir (8, 12.5%);
¡Personalice la fila # 2 clon ambos módulos 3 veces por segundo! Aquí, clonaremos ambos módulos 3 veces.
La columna del elemento principal transforma 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 fila: Pantalla: Grid; Columna de plantilla de cuadrícula: repetir (4, 25%); La razón por la que usamos este enfoque, en lugar de elegir solo una estructura de columnas con 4 columnas, es que queremos que todo permanezca 100% receptivo a dimensiones de pantalla más pequeñas.

¡Personalice la fila # 3 clon ambos módulos en la tercera fila! Clon cada modo a la vez.

La columna del elemento principal, agregue las siguientes líneas de código CSS al elemento principal de la columna: Display: Grid;
Columnas de plantilla de cuadrícula: repetir (2, 50%);

¡Personalizar la fila # 4 de extensión de filas, pasamos a la siguiente y última fila! Aquí, lo único que debemos hacer es cambiar los valores de llenado.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Junta izquierda: 31VW
Junta derecha: 31VW
Conectando miembros de la familia usando módulos de imagen Agregue la estructura de la fila # 1 de la columna ahora, que hemos alineado a todos los miembros de la familia, ¡podemos comenzar a conectarlos! Para hacer esto, agregue una nueva fila entre la primera y la segunda fila.
Dimensión sin agregar módulos, abra la configuración de la fila y cambie los valores de tamaño.
Ancho: 100%

Ancho máximo: 100%

El espacio ir a la siguiente configuración de espaciado y agregue algunos valores de llenado personalizados.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

ENLIZACIÓN IZQUIERDA: 15VW (escritorio), 0VW (tableta y teléfono)
Revestimiento derecho: 15VW (escritorio), 0VW (tableta y teléfono)
Agregue el módulo de imagen a la columna cargar la ilustración y 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. Acceda a la configuración de dimensionamiento del módulo de imagen y active la opción “fuerzas Ancho completo ”.
Fuerza el ancho completo: si
Espacio Asegúrese de apagar la opción “Muestra el espacio debajo de la imagen” en la configuración de espaciado.

Muestra el espacio debajo de la imagen: no

Clone el giro dos veces y cambie su posición después de haber terminado de cambiar el módulo de giro e imagen, continúe y clone dos veces. Colocar duplicados en consecuencia:
Personalice el clon de turno # 1 El módulo de imagen tres veces regrese a la primera fila y clone el módulo 3 veces.

Columna del elemento principal 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 fila: Display: Grid;
Columnas de plantilla de cuadrícula: repetir (4, 25%);

Personalizar el giro # 2 clon El módulo de imagen pasa segundo y clonar el módulo de imagen a la vez.

Columna del elemento principal 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 fila: Display: Grid;

Columnas de plantilla de cuadrícula: repetir (2, 50%);
Personalice la fila # 3 Cambiar el interruptor de espacio al siguiente y el último duplicado. Aquí, lo único que tendrá que hacer es cambiar los valores de llenado personalizados y ¡está listo!

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Junta izquierda: 27 VW

Junta derecha: 27 VW
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
¡Pensamientos finales en esta publicación, te mostré cómo crear un árbol de genealog moderno con Div!El árbol genealógico que recreé se ve muy bien en todo el tamaño de la pantalla.Al comienzo de este tutorial, logró descargar el archivo JSON de forma gratuita y comenzar con él de inmediato.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.