Want to make creations as awesome as this one?

Utiliser le builder 2 Chapitre 7

Transcript

UTILISER LE BUILDER 2

CHAPITRE 7 : COMPTEURS DE BARRES

MODULE 6

Le module de compteurs de barres

Les compteurs animés sont un moyen amusant et efficace d'afficher des statistiques à vos visiteurs. Les animations sont déclenchées en utilisant le chargement paresseux pour que la navigation sur la page soit réellement intéressante.

Découvrez la démo en ligne: www.elegantthemes.com/preview/Divi/bar-counters/

Les compteurs animés sont un moyen amusant et efficace d'afficher des statistiques à vos visiteurs.


L'animation est déclenchée en utilisant le téléchargement paresseux pour rendre la navigation sur la page vraiment engageante.


Vous pouvez placer autant de compteurs que vous le souhaitez à l'intérieur de ce module.

Comment ajouter un module de compteur de barres à votre page

Avant de pouvoir ajouter un module de compteur de barres à votre page, vous devez d'abord sauter dans le Divi Builder.

Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page.

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page.


Les nouveaux modules ne peuvent être ajoutés qu'à l'intérieur des rangées.


Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page.


Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.



Localisez le module compteur de barres dans la liste des modules et cliquez dessus pour l'ajouter à votre page.


La liste des modules est interrogeable, ce qui signifie que vous pouvez aussi taper le mot "compteur de barres" et cliquer sur Entrée pour trouver et ajouter automatiquement le module compteur de barres!

Une fois le module ajouté, vous serez accueilli avec la liste d'options du module.

Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation : Utilisation du module Compteurs de barres pour afficher les buts d'un projet dans une étude de cas

L'une des meilleures façons d'utiliser le module de compteurs de barres est d'illustrer les statistiques des études de cas.
Il suffit d'étiqueter chaque barre avec une caractéristique ou un objectif de projet pour que l'utilisateur sache quels services sont inclus dans le projet.

Dans cet exemple, j'ajoute en utilisant le module Barre pour afficher trois Buts du projet.

Comme vous pouvez le voir, le haut de la page inclut les trois objectifs du projet à l'aide du module Compteur de barres et le bas de la page inclut les résultats de l'étude de cas à l'aide du module Compteur de numéros.

Commençons par le début.


Utilisez le générateur visuel pour ajouter une section standard avec une disposition pleine largeur (1 colonne). Ajoutez ensuite un module de compteurs de barres à la ligne.



Mettez à jour les paramètres des compteurs de barres comme suit:

Options de contenu

Pourcentages d'utilisation: ON

Couleur d'arrière-plan: #dddddddd

Couleur d'arrière-plan de la barre: #e07a5e


Options de conception

Couleur du texte: foncé

Police de titre: par défaut

Titre Taille de la police: 20px

Couleur du texte du titre: #405c60

Hauteur de la ligne de titre: 2em

Pourcentage Police: Valeur par défaut

Pourcentage Taille de police: 16px

Pourcentage Couleur du texte: #ffffff

Hauteur de ligne en pourcentage: 2,5em



Retournez maintenant à l'onglet Contenu et sélectionnez + Ajouter nouvel élément pour ajouter le premier compteur de barres au module.


Mettez à jour les Paramètres des modules individuels comme suit: Onglet de contenu

Titre: Marque de commerce Pourcentage: 80


Sauvegarder les paramètre



Ajoutez deux compteurs de mesure supplémentaires au module et donnez à chacun un titre et un pourcentage.



C'est tout!


Options Contenu du

compteur de barres

Dans l'onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes.

Tout ce qui contrôle ce qui apparaît dans votre module sera toujours trouvé dans cet onglet.

Pourcentages d'utilisation

Couleur de fond

Barre Couleur d'arrière-plan

Étiquette Admin

Par défaut, les pourcentages sont affichés dans le compteur de barres colorées.

Ce texte peut être désactivé à l'aide de ce réglage, ce qui permet au diagramme à barres visuel de parler d'lui-même.

Cette option vous permet d'ajuster la couleur de fond de chaque compteur de mesure.

Ce réglage s'applique à l'espace négatif derrière la couleur de la barre remplie.

Cette option vous permet d'ajuster la couleur de fond de la barre remplie.


Ce paramètre de couleur d'arrière-plan remplace le réglage de couleur d'arrière-plan précédent.

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.

Options de conception de comptoir de bar

Dans l'onglet Design, vous trouverez toutes les options de style du module, telles que les polices de caractères, les couleurs, le dimensionnement et l'espacement.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module.

Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.

Couleur du texte

Police de titre

Taille de police du titre

Couleur du texte de titre

Ici, vous pouvez choisir si votre texte apparaîtra clair ou foncé.


Si vous travaillez sur un fond foncé, votre texte doit être clair.

Si votre arrière-plan est clair, votre texte doit être noir.


Vous pouvez personnaliser davantage la couleur de votre texte à l'aide des options supplémentaires qui suivent.

Vous pouvez changer la police de votre texte de titre en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.


Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte de titre.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.


Si vous souhaitez changer la couleur de votre texte de titre, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Hauteur de la ligne de titre

Pourcentage Police

Pourcentage Taille de police

Couleur du texte en pourcentage

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police de votre pourcentage de texte en sélectionnant la police désirée dans le menu déroulant.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Vous pouvez régler ici la taille de votre pourcentage de texte.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.


Si vous souhaitez changer la couleur de votre texte en pourcentage, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Pourcentage d'espacement des lettres

Hauteur de ligne en pourcentage

Rayon de bordure

Utiliser la bordure

L'espacement des lettres affecte l'espace entre chaque lettre.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre texte en pourcentage, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie situé à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

L'application d'un rayon de bordure arrondit les coins de la barre à l'intérieur du comptoir.

Plus le rayon de la bordure est élevé, plus les coins sont arrondis.

Activer cette option placera une bordure autour de votre module.

Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

Couleur de la bordure

Largeur de bordure

Style de bordure

Rembourrage de barre

Cette option affecte la couleur de votre bordure.

Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l'appliquer à votre bordure.

Par défaut, les bordures ont une largeur de 1 pixel.

Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur.

Unités de mesure personnalisées des mesures prises en charge, ce qui signifie que vous pouvez changer l'unité par défaut de "px" à quelque chose d'autre, comme em, vh, vw, etc.

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début.

Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.

Le rembourrage est l'espace ajouté à l'intérieur de votre module, entre le bord du module et ses éléments internes.


Ici, vous pouvez ajouter un rembourrage supérieur et inférieur personnalisé au module de barre.

Options avancées

du compteur de bars

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expérimentés peuvent trouver utiles, comme les attributs CSS et HTML personnalisés.

Ici, vous pouvez appliquer des CSS personnalisés à n'importe lequel des nombreux éléments du module.

Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style. css de votre thème enfant.


Classe CSS

CSS personnalisé

Visibilité

Entrez les classes CSS facultatives à utiliser pour ce module.


Une classe CSS peut être utilisée pour créer un style CSS personnalisé.


Vous pouvez ajouter plusieurs classes, séparées par un espace.

Ces classes peuvent être utilisées dans votre Thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît.


Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.


C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Options de Contenu du Compteur de Barres Individuel

Intitulé

Pourcentage

Couleur de fond

Barre Couleur d'arrière-plan

Le titre défini ici apparaîtra au-dessus de votre compteur de mesure.

Laissez en blanc pour ne pas avoir de titre.

Cette valeur définit le niveau de remplissage du compteur de mesure.

Vous pouvez saisir une valeur comprise entre 1% et 100%.

Cette option vous permet d'ajuster la couleur de fond de chaque compteur de mesure.

Ce réglage s'applique à l'espace négatif derrière la couleur de la barre remplie.

Cette option vous permet d'ajuster la couleur de fond de la barre remplie.

Ce paramètre de couleur d'arrière-plan remplace le réglage de couleur d'arrière-plan précédent.

Options de Contenu du Compteur de Barres Individuel

Couleur de l'étiquette

Couleur en pourcentage

L'option change la couleur du texte du titre de la barre qui apparaît au-dessus du compteur de la barre.

Cette option change la couleur du pourcentage de texte qui apparaît à l'intérieur du compteur de la barre de visite.

Options avancées de compteurs de barres individuelles

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

MERCI