Working with variables

Define colors, sizes and fonts once and reuse them across your pages.Filling your site · 4 min

← All tutorials

  1. Open Variables

    In the editor's left sidebar, click Variables. You see your site's collections; the base collection is always there.

  2. Create a collection

    Use + at the top of the panel to create a collection, for example Colors or Sizes. Click a collection to open its variables as a table.

  3. Add variables

    Click “New variable” and pick a type: color, size, font, number or percentage. Put a / in the name to group them, for example Brand/Primary.

  4. Point to another variable

    A variable can take over the value of another one. Change that other variable and it follows automatically.

  5. Use them in your design

    Select an element on one of your own pages and, in the Style tab, pick a variable for a color or size. Change the variable later and it updates everywhere.

  6. Modes

    With “New mode” you give every variable a second value, for example for a dark section. An element picks its mode in the Settings tab.

Read next

Add an extra page

Create a press, tour or release page next to your home page.

Edit text and images

Change your bio, hero, photos and colors in the editor.

Stuck?

Ask other artists or the NetNest team: go to the forum · contact support