The Item has a unique value from the dynamic data bound to the Value field
The Item has a unique value from the dynamic data bound to the Value field
Tab Trigger with custom value
Tab Trigger with custom value
Tab Content with custom value
Tab Content with custom value
Templates in Design mode
Template in Content mode
The "Feature" instances are provided as a starting point
The Feature instances are provided as a starting point
+ Change the default filename so that it ends in .mdx.
+ Connect the file from the Content Block's Source property.
+Templates the designer provided
Templates the designer provided
Hold option/alt
Hold Option or Alt
Components panel
+
Settings panel
+
+
+
First add the ID to the section you want to link to
First add the ID to the section you want to link to
Then add a page link and select the section.
Then add a page link and select the section.
+
Will display when Document Type is set to "XML"
The component appears when Document type is XML
+
+
+
Global Root
+
+
+
+
+
+
-
2. [CSS variables](css-variables.md) - Instead of pasting in your colors, sizes, and other styles, you can create a variable for each style and access the variables in each input field. For example, you can define a variable called "color-primary," and in your border color field, you can enter the variable name instead of the color itself.
3. [Tokens](design-tokens.md) - These enable reusing groupings of styles across your site. You can either create a new Token and apply styles to it or start with Local and convert it to a Token. Tokens are typically comprised of CSS variables and one-off styles.
@@ -168,9 +178,7 @@ The style input labels change colors indicating there is a style present.
The order of tokens in the Style Source Input matters. When multiple Tokens have a value for the same property, Tokens toward the end of the list will overwrite Tokens toward the beginning of the list.
{% endhint %}
----
-
-## Settings Panel
+## Settings panel
The Settings Panel is on the right side of your canvas. You can use this panel to access and edit component-specific properties (such as ID or class) and [Data variables](variables.md) for a selected instance, enabling you to store reusable content and fetch APIs — a building block of [CMS](cms.md).
@@ -180,9 +188,10 @@ The Settings Panel is on the right side of your canvas. You can use this panel t
[Modes](modes.md) change the Builder's behavior, such as previewing your site without distractions.
-
+
Hide UI in the View menu
+
The Assets panel
+
+ Edit MDX source and review its rendered preview side by side.
Asset detail panel
+
Editing a breakpoint
+
Entering "hello-world" as a test value
Entering hello-world as a test value
Binding an expression to the Status Code field in Page Settings
Binding an expression to the status code
![Box component with Show condition set to !cmsData.data[0].id](../../.gitbook/assets/cms-dynamic-404-show-404-content.png)
Setting the Show condition on the 404 content Box
Setting the Show condition on the 404 content
![Box component with Show condition set to cmsData.data[0].id](../../.gitbook/assets/cms-dynamic-404-show-regular-content.png)
Setting the Show condition on the regular content Box
Setting the Show condition on regular content
Commands & search
+
Markdown articles stored alongside their assets
An article's metadata and body in the Markdown editor
An overview query for the Webstudio Updates project
The article resource uses the dynamic slug from the page URL
The article Resource uses the dynamic slug from the page URL
Global Root
+
Hovering the link and the children change (icon color, icon bg, and arrow appears)
Hovering the link and the children change (icon color, icon bg, and arrow appears)
| The top of the Style Panel contains Style Sources. Here is where you can add new Tokens, select existing ones, and switch to Local styling. | The top section of the Style Panel is our Style Sources Input. This is where you’ll create, style, and arrange your tokens. When you select a component's instance on the canvas, the tokens you see inside this input are sources of the styles on that instance. |
 | Want to style something immediately without making a Token? Use the Local Style Source. Styles applied on Local only impact that instance, but you can easily convert styles from Local to a new Token. | Want to style something immediately without making a token? Go for it. All component instances in Webstudio have this Local style source by default. Styles applied on Local are unique to an instance and can’t be re-used, but you can easily convert styles from Local to a new token through the token menu. |
 | To make a new Token, click inside the Style Sources input, type a name, and hit enter. | To make a new token, click inside the Style Sources Input, type a name, and hit ENTER/RETURN. |
 | The Token you’re currently styling will be blue in the Style Sources input, while others are gray. Simply click on another style source to select it. Any styling you do will be applied to the current Token and reflected across all instances of that Token. | The token you’re currently styling will be blue in the Style Sources Input, while others are gray. Simply click on another style source to select it. Any styling you do will be applied to the current token and reflected across all instances of that token. When you add a style, the label for that property will turn blue to show that it is applied on the current token. |
 | Hover the label for a helpful description of where the styles on this property come from. In this case, we see that the width value that we just applied is coming from the Base breakpoint, the “new token” token on the Body instance. See Label Colors to understand what the different colors mean. | Hover the label for a helpful description of where the styles on this property come from. In this case we see that the width value that we just applied is coming from the Base breakpoint, the “new token” token, on the Body instance. |
 | A circle in the Token indicates that there are no styles applied to the Token. This will go away as soon as you apply a style. For Local, a dot is added to the center of the circle when styles are added. |
+
+2. To create a Token, select the Style sources field, enter a name, and press Enter.
+
+
+
+3. Select the source you want to edit. The active source is highlighted, and new styles are written to that source.
+
+
+
+Use the Local source for styles that apply only to the selected instance. You can convert Local styles into a reusable Token later.
+
+
+
+Hover a property label to see which breakpoint and style source provides its current value. See [Label colors](anatomy-of-the-webstudio-builder.md#label-colors) for the full reference.
+
+
+
+An empty circle means the source has no styles. A dot appears in the Local source after you add a style.
+
+
## Exporting human-readable classes
diff --git a/docs/university/foundations/expression-editor.md b/docs/university/foundations/expression-editor.md
index 5577cc9043..37d59043d0 100644
--- a/docs/university/foundations/expression-editor.md
+++ b/docs/university/foundations/expression-editor.md
@@ -6,7 +6,7 @@ description: >-
# ➕ Expression editor
-
+The Navigator showing the page structure
+
General page settings
+
Page authentication
SEO settings with search result preview
+
Social image with preview
+
Adding a custom meta tag
+
+
+
Project route authentication
+
+
The Style Panel
+
+
Radix UI components within Webstudio
Radix UI components within Webstudio
Radix UI Collapsible component within Webstudio
Radix UI Collapsible component within Webstudio
+
+