Variabelen

Een variabele is in feite een bijnaam voor een bepaalde waarde. Als ik bijvoorbeeld aan mijn site werk en ik wil dat de tekst in het lettertype Roboto staat, kan ik een variabele maken met de naam TextType en de waarde instellen op Roboto. Op mijn hele site kan ik dan de tekst instellen om de variabele TextType te gebruiken. Hoewel ik hetzelfde resultaat zou kunnen bereiken door het lettertype gewoon op Roboto in te stellen, is het voordeel van een variabele dat als ik van gedachten verander en besluit om Arial te gebruiken in plaats van Roboto, ik simpelweg de TextType-variabele kan wijzigen naar Arial en de verandering wordt dan op de hele site doorgevoerd.

Een variabele maken:

Variabelen zijn momenteel beperkt tot lettertypefamilie en tekstkleur. In het onderstaande voorbeeld maken we een lettertypefamilie-variabele.

1. Open de elementor-editor.
2. Sleep een Paragraph-element naar het canvas.
3. Klik op het tabblad Stijl.
   
4. Open het veld Typography.
   
5. Klik in het veld Font family op het variabele-icoon .
   
6. Als dit de eerste variabele is die je maakt, klik dan op Create a variable. Als het niet je eerste variabele is, klik dan op het plus-icoon in de variabele-popup.
7. Geef je variabele een naam. In dit geval noemen we de variabele Paragraph_text.
   
8. Voer Arial in het veld Value in.
   
9. Klik op opslaan.

Een variabele bewerken:

In dit voorbeeld bewerken we de variabele die we hierboven hebben gemaakt en veranderen we het lettertype naar Roboto.

1. Open het veld Typography zoals hierboven beschreven.
2. Beweeg de muis over het veld Font family.
3. Klik op het variabele-icoon.
   
4. Beweeg de muis over de variabele die je wilt bewerken.
5. Klik op het potlood-icoon naast de variabelenaam.
   
6. Bewerk de naam en/of waarde.
7. In dit geval veranderen we de waarde naar Roboto.
   
8. Klik op Save.
   
   Waar de variabele Paragraph_text wordt gebruikt op de website, zal het lettertype overschakelen naar Roboto.

Variabelen en klassen

Klassen combineren een aantal stijlen in één enkele klasse om het bouwen van sites te versnellen. Voor meer informatie over klassen, zie Classes in Elementor. Variabelen kunnen onderdeel zijn van een klasse.

In het onderstaande voorbeeld maken we een klasse aan die een variabele bevat.

1. Open de elementor-editor.
2. Maak een variabele genaamd Paragraph_font met de lettertypefamilie Roboto. Zie Create a variable above for details.
3. Sleep een Heading-element naar het canvas.
4. Maak in de sectie Style van het element een klasse Heading_txt. Zie Classes in Elementor voor details.
   Zorg ervoor dat je de klasse Heading_txt bewerkt.
   
5. Open het veld Typografie.
   
6. Stel de lettergrootte in op 72 PX.
   
7. Klik bij Font family op het variabele-icoon en maak een variabele genaamd Heading_font en stel de lettertypefamilie in op Arial.
   
8. Voeg een tweede Heading toe onder de eerste en geef deze de klasse Heading_txt.
   
   Beide Headings zouden moeten verschijnen met een 72 PX Arial-lettertype.
9. Klik in de tweede heading op de klasse Heading_txt zodat je deze klasse bewerkt en schakel de lettertypefamilie over naar de variabele Paragraph_txt.
   
   Beide headings zouden nu het Roboto-lettertype moeten weergeven omdat de variabele Paragraph_txt onderdeel is van de klasse Heading_txt.