Variables

A variable is basically a nickname for a certain value. For example, if I’m working on my site and I want the text to be in the Roboto font, I can create a variable called TextType and set the value to be Roboto. Throughout my site I can set the text to use the variable TextType. While I could achieve the same result simply by setting the font to Roboto, the advantage to using a variable is that if I change my mind and decide to use Arial font instead of Roboto, I can simply the TextType variable to Arial and the change will take effect sitewide. 

To create a variable:

Variables are currently limited to font family and text color. In the example below, we’ll create a font family variable.

1. Open the Elementor Editor.
2. Drag a Paragraph element to the canvas.
3. Click the Style tab.
   
4. Open the Typography field. 
   
5. In the Font family field, click the variable icon . 
   
6. If this is the first variable you’re creating, click Create a variable. If it’s not your first variable, click the plus icon in the variable popup.
7. Name your variable. In this case, we’ll name the variable Paragraph_text.
   
8. Enter Arial in the Value field.
   
9. Click Save.

To edit a variable:

In this example, we’ll edit the variable we created above, changing the font type to Roboto.

1. Open the Typography field as described above.
2. Hover over the Font family field.
3. Click the variable icon.
   
4. Hover over the variable you want to edit.
5. Click the pencil icon next to the variable name.
   
6. Edit the name and/or value.
7. In this case, we’ll change the value to Roboto.
   
8. Click Save.
   
   Where the variable Paragraph_text is used in the website, the font will switch to Roboto.

Variables and classes

Classes combine a number of styles into a single class to help speed up site building. For more information on classes, see Classes in Elementor. Variables can be part of a class.

In the example below, we’ll create a class which includes a variable. 

1. Open the Elementor Editor.
2. Create a variable called Paragraph_font with the Font family Roboto. See Create a variable above for details. 
3. Drag a Heading element to the canvas. 
4. In the Style section of the element, Create a class Heading_txt. See Classes in Elementor for details.
   Make sure you’re editing the Heading_txt class.
   
5. Open the Typography field.
   
6. Set the font size to 72 PX.
   
7. In Font family, click the variable icon and create a variable called Heading_font and set the Font family to Arial. 
   
8. Add a second Heading under the first and give it the class Heading_txt.
   
   Both Headings should appear with a 72 PX Arial font.
9. In the second heading, click the Heading_txt class so that you’re editing this class. and switch the Font family to the Paragraph_txt variable. 
   
   Both headings should now display the Roboto font since the Paragraph_txt variable is part of the Heading_txt class.