Comment créer une disposition d'organigramme dans Divi

Savoir créer une mise en page d'organigramme dans Divi ouvre de nombreuses opportunités pour communiquer des processus et des idées sur un site Web. Dans certains cas, les organigrammes peuvent être utilisés pour expliquer des idées extrêmement complexes impliquant un grand nombre d'éléments. Sur un site Web, cependant, ces organigrammes plus complexes peuvent être difficiles à réaliser, surtout si vous voulez qu'il soit réactif.

Dans ce tutoriel, nous allons vous montrer comment créer une mise en page d'organigramme pratique que vous pouvez utiliser sur votre site Web qui est simple, efficace et réactive. Fondamentalement, nous allons faire preuve de créativité avec les bordures Divi, les séparateurs, les textes de présentation et les options de transformation pour créer une mise en page d'organigramme que vous pouvez facilement personnaliser selon vos propres besoins. De plus, nous n'allons utiliser que les options intégrées de Divi pour le créer, vous n'avez donc pas à vous soucier d'ajouter du code ou des plugins personnalisés.

Commençons!

Aperçu

Voici un aperçu rapide de la conception de l'organigramme que nous allons construire dans ce didacticiel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le 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 !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Comment créer une disposition d'organigramme dans Divi

Étape 1 : Création d'une ligne avec un Blurb centré

Pour commencer à créer la mise en page de l'organigramme dans Divi, nous allons commencer par créer une ligne contenant un texte de présentation centré. Ce sera le premier élément de l'organigramme.

Le rembourrage de section

Tout d'abord, ouvrez les paramètres de section pour la section par défaut et définissez le rembourrage inférieur sur 0px.

La ligne

À l'intérieur de la section, ajoutez une ligne à une colonne.

Ouvrez les paramètres de ligne et mettez à jour les paramètres de conception suivants :

• Largeur de gouttière : 1
• Remplissage : 0px en haut, 0px en bas

Ces deux paramètres de conception seront utilisés pour toutes les lignes de cette disposition d'organigramme afin de s'assurer qu'aucun espace supplémentaire n'est ajouté entre les modules et les lignes.

La conception du module Blurb

Pour créer notre premier élément d'organigramme, nous allons utiliser un module de présentation.

Ajoutez un nouveau module de présentation à la ligne.

Paramètres de présentation

Ouvrez les paramètres de présentation. Sous l'onglet contenu, vous pouvez conserver le titre et le corps du texte par défaut.

Mettez ensuite à jour l'image avec une petite icône ou utilisez l'une des icônes Divi intégrées. Pour ce tutoriel, j'utiliserai les icônes du pack de mise en page Crowdfunding.

Donnez ensuite une couleur d'arrière-plan au texte de présentation :

• Couleur de fond : #f8f8f8

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Alignement du texte : Centre
• Largeur max : 400 px (ordinateur de bureau et tablette), 90 % (téléphone)
• Alignement du module : Centre
• Rembourrage : 6 % en haut, 6 % en bas, 3 % à gauche, 3 % à droite

REMARQUE : Cette taille de texte de présentation sera partagée par tous les textes de présentation dans la disposition de l'organigramme. Cette taille fonctionne pour cette mise en page car l'organigramme n'aura jamais plus de deux textes de présentation adjacents (côte à côte). Cela nous permet de garder le design réactif et d'avoir une belle apparence sur tablette et téléphone.

Ensuite, donnez au texte de présentation une bordure comme suit :

• Largeur de la bordure : 2px

Étape 2 : Création de la ligne de connecteur avec une ligne verticale et une flèche

Pour la prochaine partie de notre mise en page d'organigramme, nous allons créer une ligne de connecteur qui a une ligne et une flèche verticales centrées. Cette ligne sera utilisée pour connecter des lignes de contenu d'organigramme qui doivent continuer vers le bas de la page.

Dans ce cas, nous voulons commencer l'organigramme en ajoutant une ligne et une flèche sous la ligne précédente avec le module de présentation centré.

Créer une nouvelle ligne et copier/coller les styles de ligne à partir de la ligne précédente

Pour ce faire, ajoutez une nouvelle ligne à une colonne sous la ligne précédente.

À l'aide du menu « Plus d'options » (ou des options du clic droit), copiez les styles de ligne de la ligne précédente ci-dessus et collez-les dans la nouvelle ligne.

Création d'un séparateur de ligne vertical

Pour créer la ligne de séparation verticale, ajoutez un nouveau module de séparation à la ligne.

Sous les paramètres du diviseur, mettez à jour les paramètres de conception comme suit :

• Couleur de la ligne : #333333
• Position de la ligne : Bas
• Poids du diviseur : 150px
• Largeur : 2px
• Alignement du module : Centre
• Marge : -1px en bas

Sous l'onglet avancé, masquez le débordement comme suit :

• Débordement horizontal : masqué
• Débordement vertical : caché

Créer une flèche avec un module Blurb

Ensuite, nous allons créer une icône de flèche pour s'asseoir au-dessus de la ligne de séparation à l'aide d'un module de présentation.

Pour créer la flèche, ajoutez un nouveau module de présentation sous le séparateur.

Paramètres de présentation de la flèche

Sous les paramètres du texte de présentation, retirez le titre et le corps du texte par défaut et cliquez pour utiliser l'icône de la flèche du bas (voir capture d'écran).

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur de l'icône : #bbbbbb
• Alignement image/icône : centre
• Taille de la police de l'icône : 50 px (ordinateur de bureau), 40 px (tablette et téléphone)

• Largeur maximale : 50 %
• Alignement du module : centre
• Hauteur : 50px (ordinateur de bureau), 40px (tablette et téléphone)

Sous l'onglet Avancé, ajoutez le CSS suivant à l'image Blurb :

margin-bottom: 0px;
background: #ffffff;

Cela supprimera la marge par défaut du texte de présentation et ajoutera un fond blanc afin de créer l'apparence d'un espace entre l'icône et la ligne une fois que nous positionnerons l'icône en haut de la ligne.

Pour positionner la flèche en haut de la ligne, mettez à jour les éléments suivants :

• Position : Absolu
• Lieu : Centre
• Indice Z : 10

Étape 3 : Création d'une ligne avec des icônes et des flèches d'organigramme adjacentes

Une fois la ligne de connecteur terminée, nous ajouterons une autre ligne de plusieurs textes de présentation adjacents pour continuer la conception de l'organigramme.

Pour ajouter la ligne, copiez et collez simplement la première ligne (la ligne avec un texte de présentation centré que nous avons créé en haut de la mise en page) sous la ligne du connecteur.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur maximale : 50 %
• Largeur de la bordure : 2px

La largeur maximale de 50 % est importante pour que la mise en page fonctionne de manière réactive. Cela garantira que les textes de présentation qui débordent à droite et à gauche de la ligne ne dépasseront pas la largeur du navigateur.

Création d'un graphique de flux sur la ligne de bordure gauche

Maintenant que notre bordure est ajoutée à la ligne, nous allons positionner le texte de présentation au-dessus de la ligne de bordure gauche.

Pour ce faire, mettez à jour les paramètres de conception suivants :

• Alignement du module : à gauche
• Marge : 70 pixels en haut, 70 pixels en bas

• Transformer Traduire Axe X : -50%

C'est la clé pour que le texte de présentation soit centré horizontalement au-dessus de la ligne de bordure.

Création d'un graphique de flux adjacent sur la ligne de bordure droite

Pour ajouter un autre texte de présentation sur la ligne de bordure droite, dupliquez le texte de présentation existant.

Pour positionner le texte de présentation sur la ligne de bordure droite, accédez à l'onglet avancé et attribuez-lui une position absolue :

• Position : Absolu
• Emplacement : Centre droit

Mettez ensuite à jour la marge et transformez les options de traduction comme suit :

• Marge : aucune
• Transformer l'axe Y de translation : -50%
• Transformer l'axe X de translation : 50 %

Ajout de touches de flèche aux coins de chaque ligne de bordure

Pour rendre l'organigramme plus clair sur la direction dans laquelle les lignes progressent, nous ajouterons des icônes de flèche supplémentaires sur les lignes de bordure de la ligne.

Flèche en haut à gauche

Pour ajouter une flèche à la ligne de bordure supérieure gauche, dupliquez le texte de présentation de la flèche que nous avons créé dans la ligne du connecteur et faites-le glisser dans la ligne contenant les textes de présentation adjacents.

Ouvrez le texte de présentation de la flèche en double et remplacez l'icône par une flèche vers la gauche.

Ensuite, mettez à jour l'emplacement de la position du texte de présentation de la flèche :

• Emplacement : en haut à gauche

Enfin, mettez à jour l'option transform translate comme suit :

• Transformer l'axe Y de translation : -50%

Flèche en haut à droite

Pour créer une flèche qui se trouve sur la ligne de bordure en haut à droite, dupliquez la flèche "en haut à gauche" que nous venons de créer. Ensuite, ouvrez les paramètres et modifiez l'emplacement de la position :

• Emplacement : en haut à droite

Mettez également à jour l'icône de la flèche avec une flèche vers la droite.

Flèche en bas à gauche

Pour créer une flèche qui se trouve sur la ligne de bordure inférieure gauche, dupliquez la flèche "en haut à droite" que nous venons de créer.

Ensuite, ouvrez les paramètres et modifiez l'emplacement de la position :

• Emplacement : En bas à gauche

Ensuite, mettez à jour l'option de traduction de transformation :

• Transformer l'axe Y de translation : 50 %

Flèche en bas à droite

Pour créer une flèche qui se trouve sur la ligne de bordure en bas à droite, dupliquez la flèche "en bas à gauche" que nous venons de créer.

Ensuite, ouvrez les paramètres et modifiez l'emplacement de la position :

• Emplacement : En bas à droite

Mettez également à jour l'icône de flèche avec une flèche vers la gauche.

Une fois que toutes les flèches ont été placées, vous pouvez mettre à jour les étiquettes de chacune en utilisant la vue des couches.

Étape 4 : Ajout d'une autre ligne de connecteur

Une fois que nous avons terminé la ligne avec les deux textes de présentation d'organigramme adjacents et toutes les flèches, nous pouvons continuer l'organigramme en ajoutant une autre ligne de connecteur.

Pour ce faire, dupliquez la ligne de connecteur que nous avons créée ci-dessus et collez-la sous la ligne contenant les textes de présentation de l'organigramme adjacent.

Étape 5 : personnalisation du flux avec un connecteur de ligne de bordure droite

Dans la conception d'organigramme existante, le flux commence par l'élément du haut, puis se ramifie vers les éléments adjacents à droite et à gauche, puis revient au milieu et passe à l'élément centré suivant. Pour personnaliser le flux, nous allons dupliquer la section afin que nous puissions personnaliser l'organigramme pour s'arrêter sur le ou les éléments de présentation adjacents à gauche et continuer à partir de l'élément de présentation de droite.

Section en double

Pour ce faire, dupliquez d'abord toute la section du contenu de l'organigramme.

Ajouter un autre élément de présentation à gauche

Dans la section dupliquée (en bas), localisez le texte de présentation de gauche dans la rangée contenant les deux textes de présentation adjacents. Ensuite, dupliquez le texte de présentation de gauche pour en créer un nouveau directement en dessous.

Supprimer les flèches du bas et la bordure

Ensuite, supprimez la flèche en bas à gauche et la flèche en bas à droite.

Ouvrez les paramètres de ligne pour la ligne contenant les multiples textes de présentation et retirez la bordure inférieure :

• Largeur de la bordure inférieure : 0px

Créer une ligne avec un connecteur de ligne de bordure droite

Nous voulons maintenant personnaliser la conception de l'organigramme avec un connecteur de ligne de bordure droite qui connectera la ligne de bordure droite de la ligne avec la ligne de connecteur ci-dessous.

Pour ce faire, nous allons créer une autre ligne et ajouter une ligne de séparation personnalisée et une flèche de présentation sur le côté droit.

Ajoutez une nouvelle ligne à une colonne sous la ligne existante avec les trois textes de présentation.

Mettez à jour les paramètres de conception de la ligne comme suit :

• Largeur de gouttière : 1
• Largeur maximale : 50 %
• Remplissage : 0px en haut, 0px en bas

Ensuite, ajoutez une bordure droite à la ligne.

• Largeur de la bordure droite : 2px

Ajoutez ensuite un module diviseur à la rangée.

Mettez à jour les paramètres du diviseur comme suit :

• Couleur de la ligne : #333333
• Position de la ligne : Bas
• Poids du diviseur : 2px
• Largeur : 50 %
• Marge : -2px en bas

Sous l'onglet Avancé, mettez à jour la position du diviseur :

• Position : Absolu
• Emplacement : En bas à droite

Une fois le séparateur en place, copiez le texte de présentation de la flèche en bas à droite de la troisième rangée de la première section et collez-le dans la rangée avec la ligne de séparation droite.

Ouvrez les paramètres du texte de présentation de la flèche que vous venez de dupliquer et de déplacer et mettez à jour les éléments suivants :

• Poste : par défaut

• Alignement du module : à droite

Arrêter le flux de la ligne de bordure gauche

À l'heure actuelle, il y a une partie de la ligne de bordure gauche exposée sous le texte de présentation en bas à gauche. Pour le masquer, retirez simplement la marge inférieure de ce texte de présentation inférieur.

Étape 6 : mise à jour de la ligne avec un connecteur de ligne de bordure gauche

Votre organigramme peut également avoir besoin d'un connecteur de bordure gauche. Pour le créer, nous pouvons mettre à jour la ligne avec le connecteur de bordure droite comme suit :

• Largeur de la bordure gauche : 2px
• Largeur de la bordure droite : 0

Mettez à jour le séparateur à l'intérieur de la ligne avec un nouvel emplacement :

• Emplacement : En bas à gauche

Ensuite, mettez à jour l'alignement du texte de présentation de la flèche :

• Alignement du module : à gauche

Et changez l'icône en une flèche vers la droite.

Résultat final

Découvrez le résultat final. Je suis allé de l'avant et j'ai dupliqué la deuxième section et j'y ai ajouté le connecteur de ligne de bordure gauche afin que vous puissiez voir les deux.

Dernières pensées

Dans ce didacticiel, nous avons créé une mise en page d'organigramme utile que tout le monde peut utiliser pour communiquer des processus et des idées aux visiteurs avec un design réactif époustouflant. Utilisez-le pour présenter le processus de services ou de conception, créer une infographie ou guider les clients à travers le contenu d'une nouvelle manière. Espérons que cela vous sera utile pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!