Comment créer un diagramme circulaire dans WordPress sans connaissances en codage

Afficher un diagramme circulaire peut être pratique pour présenter différents types de données dans une page Web. Mais si vous n'êtes pas un codeur ou si vous n'avez pas suffisamment de compétences en édition pour CSS, cela peut être difficile.

Pas avec ElementsKit, d'ailleurs !

Lorsque ElementsKit est installé sur votre site Web, vous pouvez facilement ajouter un diagramme circulaire à une page Web par simple glisser-déposer.

Dans cet article de blog, vous apprendrez comment créer des diagrammes circulaires dans WordPress en quelques étapes simples.

Qu'est-ce qu'un diagramme circulaire ?

Lorsque les données sont présentées graphiquement avec différentes sections dans un cercle, on parle de diagramme circulaire. Les données et le style de présentation peuvent varier, mais les données seront présentées dans un cercle graphique. Parfois, vous pouvez personnaliser les données du cercle et créer quelque chose d'unique.

Comment créer un camembert dans WordPress ?

Créez un diagramme circulaire directement dans votre tableau de bord WordPress en quelques étapes simples. Suivez les directives que j'ai partagées ici.

Étape 1 : Installez les plugins

Ici, notre objectif est de créer un diagramme circulaire dans WordPress sans écrire de code. Nous utiliserons donc les plugins les plus populaires Élémentor Ajouter sur ElementsKit.

Pour cela, rendez-vous dans votre Tableau de bord WordPress > Plugins > Ajouter un nouveau. Maintenant sur le barre de recherche supérieure, recherchez Elementor. Une fois que vous l'avez trouvé, installez et activez.

De même, installez et activez ElementsKit.

Étape 2 : Choisissez les paramètres du plugin

Vous devez définir certains paramètres dans le plugin ElementsKit. Pour cela, accédez à votre tableau de bord WordPress et survolez ElementsKit. Choisissez maintenant « Widgets » car vous allez créer le graphique à secteurs avec le widget Graphique à secteurs.

Dans la liste des widgets, activez le widget « Pie Chart ». Cependant, je recommanderais d'activer tous les widgets pour obtenir la meilleure expérience de création de pages Web.

Étape 3 : Créer une nouvelle page

Vous êtes maintenant prêt à créer un graphique sur une page Web. Créez une page sur laquelle vous souhaitez afficher le graphique avec vos données personnalisées. Ou bien, vous pouvez sélectionner l'une des pages existantes.

Quelle que soit la page que vous sélectionnez pour afficher le graphique circulaire, choisissez « Modifier avec Elementor » en haut à droite.

Il vous redirigera vers la page de l'éditeur où vous pourrez utiliser toutes les fonctionnalités d'ElementsKit. 

Étape 4 : Ajouter un widget Graphique à secteurs

Sur le panneau latéral gauche, recherchez le widget Pie Chart et faites-le glisser et déposez-le sur la page.

Si vous le souhaitez, vous pouvez créer un type particulier de section avant de glisser-déposer le widget sur la page.

Pour ajouter une section, cliquez sur l'icône plus et ajoutez la section.

Étape 5 : Personnalisez le diagramme circulaire

Par défaut, il y aura certains préréglages dans le diagramme circulaire. Vous pouvez personnaliser ces paramètres en quelques clics.

Dans l'onglet Contenu, vous pouvez modifier le style du graphique à secteurs, le contenu du graphique et le pourcentage du graphique.

Style de diagramme circulaire : Ici, vous pouvez choisir simple ou Avec contenu.

Contenu du graphique : Dans cette section, vous pouvez utiliser un pourcentage ou une icône pour le graphique. Si vous choisissez une icône, plusieurs options s'afficheront pour la personnaliser. Téléchargez une icône personnalisée pour l'afficher sur le graphique.

Pourcentage: Ici, vous pouvez sélectionner et définir le pourcentage du graphique.

Ensuite, accédez à l’onglet Style pour appliquer un style au graphique.

Taille du diagramme circulaire : Ajustez la taille du graphique à secteurs si vous le souhaitez. Vous pouvez noter la taille ou faire glisser la barre pour augmenter ou diminuer la taille.

Taille de la bordure : Définissez ici la taille de la bordure avec la barre de réglage.

Type de couleur : Choisissez une couleur personnalisée pour le graphique comme vous le souhaitez.

Couleur de la barre : Ajoutez la couleur de la barre qui s'adapte correctement au design de la page.

Couleur de fond de la barre : Ajoutez une couleur d'arrière-plan au graphique à secteurs pour qu'il soit plus beau.

Couleur de l'icône : Si vous avez ajouté une icône pour le graphique, vous pouvez choisir ici une couleur personnalisée.

Si vous souhaitez plus de personnalisation, accédez aux paramètres avancés et effectuez les modifications nécessaires pour rendre le graphique convivial.

Étape 6 : Personnalisez les perspectives de la page

Vous pouvez également personnaliser les perspectives de la page avec Elementor. Pour cela, en haut de la section, il y a un bouton en pointillé. Cliquez dessus et il vous redirigera vers l'onglet Mise en page.

Vous obtiendrez toutes les options pour personnaliser la mise en page de la page.

Étape 7 : prévisualiser et publier

Enfin, si vous avez tout fait correctement, vérifiez l'aperçu du diagramme circulaire. Si cela semble parfait, cliquez sur le bouton de publication.

Quelques ressources supplémentaires que vous aimeriez lire :

Comment créer un site Web d'agence de marketing numérique [style sans code]

Comment créer un site Web d'entreprise de nettoyage dans WordPress

Comment créer une page carrière sur votre site WordPress

Pourquoi devriez-vous utiliser un diagramme circulaire sur votre site Web ?

Les diagrammes circulaires rendent les informations d'un site Web faciles à comprendre. Ils utilisent des couleurs et des formes pour afficher des pourcentages et des comparaisons, permettant ainsi aux visiteurs de saisir facilement des données complexes. En utilisant des diagrammes circulaires, vous pouvez rendre votre site Web plus intéressant et aider les gens à mieux comprendre les informations.

Derniers mots

Créer un diagramme circulaire ne sera pas une tâche difficile pour vous. Utilisez simplement le pouvoir. d'ElementsKit. Comme les plugins classiques, il n’est pas destiné à un seul type de tâche. Vous pouvez concevoir un site Web entier uniquement avec ElementsKit. Alors allez-y et commencez à trouver la forme parfaite pour votre site Web.