Variables

Une variable est essentiellement un surnom pour une certaine valeur. Par exemple, si je travaille sur mon site et que je veux que le texte soit dans la police Roboto, je peux créer une variable appelée TextType et définir sa valeur comme Roboto. Sur l’ensemble de mon site, je peux configurer le texte pour utiliser la variable TextType. Bien que je puisse obtenir le même résultat simplement en définissant la police comme Roboto, l’avantage d’utiliser une variable est que si je change d’avis et décide d’utiliser la police Arial au lieu de Roboto, je peux simplement modifier la variable TextType en Arial et le changement prendra effet sur l’ensemble du site.

Pour créer une variable :

Les variables sont actuellement limitées à la famille de polices et à la couleur du texte. Dans l’exemple ci-dessous, nous allons créer une variable de famille de polices.

1. Ouvrez l’éditeur Elementor.
2. Faites glisser un élément Paragraphe sur le canevas.
3. Cliquez sur l’onglet Style.
   
4. Ouvrez le champ Typographie.
   
5. Dans le champ Famille de polices, cliquez sur l’icône de variable .
   
6. S’il s’agit de la première variable que vous créez, cliquez sur Créer une variable. Si ce n’est pas votre première variable, cliquez sur l’icône plus dans la popup de variable.
7. Nommez votre variable. Dans ce cas, nous nommerons la variable Paragraph_text.
   
8. Saisissez Arial dans le champ Valeur.
   
9. Cliquez sur enregistrer.

Pour modifier une variable :

Dans cet exemple, nous allons modifier la variable que nous avons créée ci-dessus, en changeant le type de police pour Roboto.

1. Ouvrez le champ Typographie comme décrit ci-dessus.
2. Survolez le champ Famille de polices.
3. Cliquez sur l’icône de variable.
   
4. Survolez la variable que vous souhaitez modifier.
5. Cliquez sur l’icône crayon à côté du nom de la variable.
   
6. Modifiez le nom et/ou la valeur.
7. Dans ce cas, nous allons changer la valeur pour Roboto.
   
8. Cliquez sur Enregistrer.
   
   Là où la variable Paragraph_text est utilisée sur le site web, la police passera à Roboto.

Variables et classes

Les classes combinent plusieurs styles en une seule classe pour aider à accélérer la construction du site. Pour plus d’informations sur les classes, voir Classes dans Elementor. Les variables peuvent faire partie d’une classe.

Dans l’exemple ci-dessous, nous allons créer une classe qui inclut une variable.

1. Ouvrez l’éditeur Elementor.
2. Créez une variable appelée Paragraph_font avec la famille de polices Roboto. Voir Créer une variable ci-dessus pour les détails.
3. Faites glisser un élément Titre sur le canevas.
4. Dans la section Style de l’élément, créez une classe Heading_txt. Voir Classes dans Elementor pour les détails.
   Assurez-vous que vous modifiez la classe Heading_txt.
   
5. Ouvrez le champ Typographie.
   
6. Définissez la taille de police à 72 PX.
   
7. Dans Famille de polices, cliquez sur l’icône de variable et créez une variable appelée Heading_font et définissez la famille de polices sur Arial.
   
8. Ajoutez un second titre sous le premier et donnez-lui la classe Heading_txt.
   
   Les deux titres devraient apparaître avec une police Arial de 72 PX.
9. Dans le second titre, cliquez sur la classe Heading_txt pour que vous modifiiez cette classe et changez la famille de polices pour la variable Paragraph_txt.
   
   Les deux titres devraient maintenant afficher la police Roboto puisque la variable Paragraph_txt fait partie de la classe Heading_txt.