bloggerselite logo

Comment créer un graphique à secteurs dans WordPress avec JetElements

Comment créer un graphique à secteurs dans WordPress avec JetElements

Besoin de découvrir comment créer un graphique à secteurs dans WordPress avec JetElements ? Continuez à lire cet article.

Un message ou des données qui sont véhiculés via un support visuel ont tendance à avoir un meilleur engagement. Il est courant de voir des données transmises via une forme visuelle telle qu’un graphique à secteurs.

Dans WordPress, vous pouvez créer un beau graphique à secteurs avec JetElements.

Qu’est-ce que JetEements ?

C’est un addon Elementor. Elementor lui-même est un plugin de création de page pour WordPress que vous pouvez utiliser pour créer une belle page Web sans avoir à manipuler avec du code CSS. Elementor est un plugin freemium. Vous pouvez utiliser la version gratuite pour créer un graphique à secteurs comme nous voulons le montrer dans cet article.

Cependant, vous devez dépenser 17$ pour acheter l’addon JetElements car il s’agit d’un addon premium. En plus de créer un beau graphique à secteurs, vous pouvez également utiliser JetElements pour créer d’autres beaux contenus tels que la chronologie (horizontale ou verticale), la barre de progression, la galerie Instagram, etc…

Comment créer un graphique à secteurs avec JetElements

Avant de commencer, assurez-vous d’avoir installé Elementor et JetElements sur votre site WordPress.

Une fois Elementor et JetElements installés, créez une nouvelle page (Pages –> Ajouter nouveau) et modifiez-la avec Elementor en cliquant sur le bouton Modifier avec Elementor.

créer un graphique à secteurs dans WordPress avec JetElements

Vous serez redirigé vers l’éditeur d’Elementor. La première chose que vous devez faire ici est d’ajouter une nouvelle section. Cliquez sur le bouton plus pour ce faire. Vous pouvez sélectionner n’importe quelle structure. Nous utilisons la structure à colonne unique dans cet exemple.

creer section elementor

Ajoutez le widget Graphique à secteurs en le faisant glisser à partir du panneau de gauche.

insertion graphique jetelements

Comme vous pouvez le voir, vous aurez instantanément un graphique à secteurs. Par défaut, votre graphique à secteurs se compose de trois jeux de données. Pour ajouter un nouveau jeu de données, vous pouvez simplement cliquer sur le bouton AJOUTER UN ÉLÉMENT.

Pour modifier le contenu de chaque jeu de données, cliquez simplement sur le jeu de données dont vous souhaitez modifier le contenu. Vous pouvez modifier le label, la couleur et la valeur.

créer un graphique à secteurs dans WordPress avec JetElements

Pour modifier le titre du graphique ainsi que la position, vous pouvez passer à la section suivante sous le bouton AJOUTER UN ÉLÉMENT.

modifier titre graphique jetelements

Lire : 22 meilleurs addons Premium pour Elementor

Personnalisation de votre graphique à secteurs

Le widget Graphique circulaire de JetElements est livré avec de nombreuses options de réglage. Une fois que vous avez terminé avec les jeux de données, vous pouvez commencer à personnaliser l’apparence de votre graphique à secteurs. Vous pouvez jouer avec le panneau de gauche pour personnaliser votre graphique à secteurs.

Voici quelques paramètres courants que vous voudrez peut-être créer.

  • Définir la taille du graphique

Pour définir la taille du graphique, vous pouvez ouvrir l’option Paramètres sous l’onglet Contenu. Vous pouvez définir la taille du graphique sur l’option Hauteur du graphique.

modifier graphique circulaire jetelements

Sous l’option Hauteur du graphique, vous pouvez définir la hauteur de découpe. C’est le pourcentage du graphique qui est coupé du milieu. Vous pouvez avoir un graphique en définissant le pourcentage de découpe sur un nombre plus élevé.

  • Définir la largeur de la bordure

La largeur de bordure est le séparateur entre les jeux de données. Plus la largeur de la bordure est grande, plus vos jeux de données seront petits. Pour définir la largeur de la bordure, vous pouvez passer à l’onglet Style.

Définissez la largeur de la bordure sur l’option Largeur de bordure. Vous pouvez également définir la couleur de la bordure en cliquant sur le sélecteur de couleurs.

modifier graphique circulaire jetelements
  • Définir la position de la légende

La légende est la description supplémentaire de votre graphique à secteurs. Dans la légende, vous pouvez définir la couleur qui représente un jeu de données. Pour définir la légende, vous pouvez revenir à l’onglet Contenu.

La légende s’affiche par défaut. Vous pouvez la masquer en faisant glisser le bouton sur l’option Affichage. Pour définir la position, vous pouvez simplement en sélectionner une dans le menu déroulant.

modifier graphique circulaire jetelements

Pour définir la largeur de la zone sur la légende, vous pouvez passer à l’onglet Style et ouvrir l’option Légende. La largeur de la boîte peut être définie sur l’option Box With.

modifier graphique circulaire jetelements

Vous pouvez jouer avec le panneau de gauche pour personnaliser votre graphique à secteurs. Une fois que vous avez terminé, vous pouvez cliquer sur le bouton PUBLIER en bas pour publier votre page.

Vous pouvez également enregistrer votre page en tant que modèle. Pour enregistrer votre page en tant que modèle, cliquez sur l’icône en forme de flèche en regard du bouton PUBLIER et sélectionnez Enregistrer en tant que modèle.

créer un graphique à secteurs dans WordPress avec JetElements

Lire : Comment rendre un site Web Elementor super rapide

Comment ajouter votre graphique à secteurs sur un article de blog

Vous voudrez peut-être ajouter le graphique à secteurs que vous venez de créer à un article de blog ou à une page normale dans WordPress. Pour ce faire, vous devez enregistrer le graphique à secteurs en tant que modèle au lieu de le publier.

Avant de pouvoir ajouter votre graphique à secteurs à un article de blog, vous devez installer le plugin Elementor Blocks for Gutenberg.

Ce plugin vous permet d’utiliser un modèle Elementor comme bloc Gutenberg. Une fois le plugin installé, créez un nouvel article de blog (Articles -> Ajouter nouveau). Ajoutez un nouveau bloc en cliquant sur le bouton plus et sélectionnez Elementor Library.

créer un graphique à secteurs dans WordPress avec JetElements

Sélectionnez un modèle que vous souhaitez ajouter (graphique à secteurs dans ce cas).

modifier graphique circulaire jetelements
Partager cet Article :
Newsletter
Recevez des astuces et des ressources gratuites directement dans votre boîte de réception.
Derniers Articles
☰ Navigation Rapide
0
J'adorerais vos pensées, veuillez commenter.x

BloggersElite

Obtenez Gratuitement

Nos Tutoriels 

15987

S'abonner à Notre

Newsletter

Recevez les dernières astuces dans votre boîte Email

15585