Comment créer un arbre généalogique avec les paramètres de transformation de Divi

Vous avez déjà essayé de créer un arbre généalogique pour votre site Web, mais vous ne saviez pas exactement comment l'aborder ? Eh bien, dans le tutoriel Divi d'aujourd'hui, nous allons vous montrer exactement comment faire cela. En plus de créer l'arbre généalogique, nous veillons également à ce qu'il reste réactif sur toutes les tailles d'écran. Une fois que vous avez terminé de créer l'arbre généalogique, vous pourrez toujours modifier les images, le texte et le design selon vos propres préférences et le préparer à être mis en ligne ! Vous voulez commencer tout de suite avec cette conception d'arbre généalogique ? Vous pourrez télécharger gratuitement le fichier JSON et l'ajouter à n'importe quel site Web que vous créez !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page de l'arbre généalogique GRATUITEMENT

Pour mettre la main sur la mise en page gratuite de l'arbre généalogique, vous devrez d'abord la télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

Positionnement des membres de la famille

Ajouter une nouvelle section

Espacement

Commençons à créer ! La première chose que nous devons faire est d'ajouter une nouvelle section régulière à la page sur laquelle nous travaillons. Ouvrez les paramètres de la section et ajoutez un rembourrage supérieur et inférieur personnalisé en utilisant la largeur de la fenêtre.

• Rembourrage supérieur : 8vw
• Rembourrage inférieur : 8vw

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant la première ligne à votre section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de la section et de l'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Pour ajouter des espaces à gauche et à droite de la ligne sur le bureau, nous allons ajouter un rembourrage personnalisé à gauche et à droite à l'aide de l'unité de largeur de la fenêtre.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage gauche : 15vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Rembourrage droit : 15vw (ordinateur de bureau), 0vw (tablette et téléphone)

Ajouter un module d'image à la colonne

Télécharger une image

Il est temps de commencer à ajouter des modules ! Le premier dont nous avons besoin est un module image. Téléchargez une image avec une largeur et une hauteur de '180px'.

Alignement

Ensuite, allez dans l'onglet conception et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur : 49 %
• Alignement du module : Centre

Frontière

Et transformez l'image en cercle en ajoutant une valeur élevée à chacun des coins dans les paramètres de bordure. Nous utilisons '20vw' mais vous pouvez utiliser n'importe quel nombre élevé que vous voulez.

Ajouter un module de texte à la colonne

Ajouter du contenu

Passons au module suivant, qui est un module de texte. Ajoutez le nom du membre de la famille ici.

Couleur de l'arrière plan

Ensuite, allez dans les paramètres d'arrière-plan et changez la couleur d'arrière-plan en blanc.

• Couleur d'arrière-plan : #ffffff

Paramètres de texte

Modifiez ensuite les paramètres de texte. Si vous souhaitez créer une autre apparence pour l'arbre généalogique, n'hésitez pas à jouer avec ces paramètres.

• Police de texte : Open Sans
• Couleur du texte : #000000
• Taille du texte : 0.8vw (ordinateur de bureau), 1.2vw (tablette), 1.9vw (téléphone)
• Hauteur de la ligne de texte : 0,4 em
• Orientation du texte : Centre

Espacement

Passez aux paramètres d'espacement et ajoutez des valeurs de marge et de remplissage personnalisées. Ces valeurs nous aideront à façonner le module de texte et à le faire chevaucher légèrement le module d'image.

• Marge supérieure : -0,5 vw
• Marge gauche : 1vw
• Marge droite : 1vw
• Rembourrage supérieur : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Frontière

Passez aux paramètres de bordure et ajoutez également une bordure supérieure.

• Largeur de la bordure supérieure : 5px
• Couleur de la bordure supérieure : #000000

Boîte ombre

Avec un Box Shadow pour créer de la profondeur sur la page.

• Position verticale de l'ombre de la boîte : 10px
• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.17)

Indice Z

Pour nous assurer que le module de texte reste au-dessus du module d'image, nous allons augmenter l'index Z dans les paramètres de visibilité du module de texte.

• Indice Z : 2

Cloner la ligne trois fois

Une fois que vous avez terminé de créer la première ligne et de modifier tous les modules qu'elle contient, vous pouvez continuer et cloner la ligne trois fois. Cela nous aidera à gagner du temps dans les prochaines étapes du tutoriel. Chacune de ces lignes sera utilisée pour créer un niveau différent dans l'arbre généalogique.

Personnaliser la ligne n° 1

Cloner les deux modules 7 fois

Commençons à personnaliser le premier niveau de l'arbre généalogique ! Passez en mode filaire et clonez 7 fois les deux modules de votre rangée. Une fois que vous avez terminé, le backend de votre ligne devrait ressembler à ceci :

Élément principal de la colonne CSS

Nous transformons la colonne entière en grille. Au total, il devrait y avoir 16 modules dans votre colonne. Nous allons placer ces 16 modules dans 8 colonnes de grille. Cela signifie que chacune des 8 colonnes de la grille contiendra 2 modules ; un module image et un module texte. Ouvrez les paramètres de ligne de la première ligne et ajoutez les lignes de code CSS suivantes à l'élément principal de la colonne :

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

Personnaliser la ligne n° 2

Cloner les deux modules 3 fois

Passons au deuxième rang ! Ici, nous allons cloner les deux modules 3 fois.

Élément principal de la colonne

Nous transformons la colonne en une grille avec 4 colonnes de grille en ajoutant les lignes de code CSS suivantes à l'élément principal de colonne de la ligne :

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

La raison pour laquelle nous utilisons cette approche, au lieu de simplement choisir une structure de colonnes de lignes existante avec 4 colonnes, est que nous voulons que tout reste 100% réactif sur des tailles d'écran plus petites.

Personnaliser la ligne n° 3

Cloner les deux modules

Passons au troisième rang ! Clonez chacun des modules une fois.

Élément principal de la colonne

Ensuite, ajoutez les lignes de code CSS suivantes à l'élément principal de la colonne :

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

Personnaliser la ligne n° 4

Écartement des rangs

Au prochain et dernier rang ! Ici, la seule chose que nous devons faire est de modifier les valeurs de remplissage des lignes.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage gauche : 31vw
• Rembourrage droit : 31vw

Connecter les membres de la famille à l'aide des modules d'image

Ajouter la ligne n° 1

Structure des colonnes

Maintenant que nous avons aligné tous les membres de la famille, nous pouvons commencer à les connecter ! Pour ce faire, ajoutez une nouvelle ligne entre la première et la deuxième ligne.

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les valeurs de dimensionnement.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Accédez ensuite aux paramètres d'espacement et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage gauche : 15vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Rembourrage droit : 15vw (ordinateur de bureau), 0vw (tablette et téléphone)

Ajouter un module d'image à la colonne

Télécharger une illustration

Ensuite, ajoutez un module image et téléchargez l'illustration que vous pouvez trouver dans le dossier que vous avez téléchargé au début de cet article.

Dimensionnement

Accédez aux paramètres de dimensionnement du module Image et activez l'option "Forcer la pleine largeur".

• Forcer la pleine largeur : Oui

Espacement

Assurez-vous de désactiver l'option "Afficher l'espace sous l'image" dans les paramètres d'espacement.

• Afficher l'espace sous l'image : Non

Cloner Row deux fois et changer leur position

Une fois que vous avez terminé de modifier la ligne et le module Image qu'elle contient, allez-y et clonez-la deux fois. Placez les doublons en conséquence :

Personnaliser la ligne n° 1

Cloner le module d'image trois fois

Revenez à la première ligne et clonez le module 3 fois.

Élément principal de la colonne

Placez ces modules image dans une grille avec 4 colonnes de grille en ajoutant les lignes de code CSS suivantes à l'élément principal de colonne de la ligne :

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

Personnaliser la ligne n° 2

Cloner le module d'image

Passez à la deuxième ligne et clonez une fois le module Image.

Élément principal de la colonne

Placez les deux modules dans une grille avec deux colonnes de grille en ajoutant les lignes de code CSS suivantes à l'élément principal de colonne de la ligne :

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

Personnaliser la ligne n° 3

Changer l'espacement

Passons au prochain et dernier doublon. Ici, la seule chose que vous aurez à faire est de modifier les valeurs de remplissage personnalisées et vous avez terminé !

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage gauche : 27vw
• Rembourrage droit : 27vw

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un arbre généalogique moderne avec Divi ! L'arbre généalogique que nous avons recréé a fière allure sur toutes les tailles d'écran. Au début de ce didacticiel, vous avez également pu télécharger gratuitement le fichier JSON et vous lancer immédiatement. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!