# Intro to the builder

## Embeddables sidebar:

{% @arcade/embed flowId="nHxqUjjEnaxfYHqyVaQD" url="<https://app.arcade.software/share/nHxqUjjEnaxfYHqyVaQD>" %}

## All Builder Options:

<table><thead><tr><th width="117.66666666666669">Icon</th><th width="174">Name</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FgwV9tUnsBbn7moYIGV7g%2FGroup%20181.jpg?alt=media&#x26;token=db378538-4cd6-463a-886a-317d0bafbfc9" alt="" data-size="original"></td><td><a href="#version-control">Version Control</a></td><td>Save, push live or to staging, view, and switch versions.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F80yjQo520ckAlUEjFtMn%2FGroup%20152%20(1).jpg?alt=media&#x26;token=566d929a-0362-479f-8345-29f237af5a05" alt=""></td><td><a href="#add-button">Add</a></td><td>Add components, layouts, or entire pages.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FIi6irYMZRPyN6oSWZ5GD%2FGroup%20153%20(1).jpg?alt=media&#x26;token=33053566-a2f6-4b15-9a57-59d8b9132438" alt=""></td><td><a href="#edit-menu-button">Edit</a></td><td>Edit the design and settings of components and pages, and control images and videos.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FFcm7LYyOVbGEYfAXxDde%2FGroup%20184.jpg?alt=media&#x26;token=c316c8bb-3ac6-43db-b526-cf418eeba878" alt=""></td><td><a href="#split-testing">Split Testing</a></td><td>View, add, and modify split tests running on the page.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fs0INbKJS8rqfNpeQmtSO%2FGroup%20159.jpg?alt=media&#x26;token=d9f34df9-c75a-4351-bb0c-51d0ab5d55ce" alt=""></td><td><a href="#comments">Comments</a></td><td>Collaborate with your team with commenting and more.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F4CdvjHvK05bS1g6AMUQk%2FGroup%20160.jpg?alt=media&#x26;token=446f066f-448d-44d3-b752-5cde8cc05f16" alt=""></td><td><a href="#analytics">Analytics</a></td><td>View insights on how your flow is doing, including breakdowns, funnels, and split tests.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FFprvn1M32DUiraXeJOVN%2FGroup%20162.jpg?alt=media&#x26;token=53cd7e0a-6563-4831-8ae9-c38ac51ed1d8" alt=""></td><td><a href="#debug">Debug</a></td><td>View and edit live debugging info with our user data and event log explorers.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fzmu7GWfPsa79MAi7TOKD%2FGroup%20163.jpg?alt=media&#x26;token=9247a372-7531-4800-a95e-bfb9eba53e6a" alt=""></td><td><a href="#pages">Pages</a></td><td>Easily move between pages, as well as clone them, rearrange them, and edit their keys.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FGkGWeiayPBad6nSPUZ6z%2FGroup%20165.jpg?alt=media&#x26;token=03e5a157-4ca2-4902-aefd-22ac21d5f595" alt="" data-size="original"></td><td><a href="#apps">Apps</a></td><td>Access our growing collection of useful apps, like our handy Google Lighthouse integration.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FS7TDcmDgmC5LruqqLVTo%2FGroup%20204.jpg?alt=media&#x26;token=a1343e23-e897-4a1c-bf80-7cdb9dfcb3b1" alt=""></td><td><a href="#logic">Logic</a></td><td>Easily create, view, or modify computed fields and actions.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FpXR36W7Q29TVmSC20vuN%2FGroup%20192%20(1).jpg?alt=media&#x26;token=46195f14-e36b-48a1-a381-a589dc40f4dd" alt=""></td><td><a href="#breackpoints">Breakpoints</a></td><td>Easily view your flow on mobile, tablet, and desktop devices with a single click.</td></tr></tbody></table>

&#x20;

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FKwUzsHnHMOdMPewOkd9p%2FGroup%20168.jpg?alt=media&#x26;token=4aedaae0-c534-4add-8662-f75a30dc48d8" alt="" data-size="line"> Version Control:

{% hint style="info" %}
The same button would change depending on what you can do at any given point.
{% endhint %}

<table><thead><tr><th width="135.33333333333331">Icon</th><th width="136">Button State</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F2NxfgMs4e6Sy41gL3eKl%2FGroup%20168.jpg?alt=media&#x26;token=5eba9f2d-012f-4f65-b9be-54f3d046af81" alt=""></td><td>Live version</td><td>The gray background with the tick icon means that you're seeing the live version.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FCgLJoGbpVmqOmT0LRsrQ%2FGroup%20181.jpg?alt=media&#x26;token=eea9d38f-6a04-4357-b987-7c2a5169051e" alt=""></td><td>Unsaved changes</td><td>If you have <strong>unsaved changes</strong> the button would show the <strong>diskette icon</strong>.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F7LpiG8dlx6QJg8OjVkBO%2FGroup%20180.jpg?alt=media&#x26;token=750db826-4f7a-462a-adfa-cd4c89df1123" alt=""></td><td>Push to staging</td><td>If you don't have any unsaved changes the button would first have an <strong>arrow icon</strong>, which on click would send the current version <strong>to staging.</strong></td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FCarIUtNc5Dy3irVYpFWH%2FGroup%20179.jpg?alt=media&#x26;token=5c77fe97-f30e-4f9e-98e2-4f80b04ce7fe" alt=""></td><td>Push live</td><td>If you don't have any unsaved changes and you are on the version that is actually on staging, the button would show the <strong>web icon</strong>, which when clicked sets the current version live on the page where the flow is embedded.</td></tr></tbody></table>

{% hint style="info" %}
Check out our tutorial on "How to set your flow live"
{% endhint %}

#### <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FIIKS8H0rkyol8qP0N1ze%2FGroup%20194.jpg?alt=media&#x26;token=56d2ba73-4dc8-4cc7-bb8f-4602d1bc9448" alt="" data-size="line"> Navigating between versions:

By clicking on the bottom part of the "Version Control" button <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FilTgC9PYgCJvcfFGT07B%2FGroup%20194.jpg?alt=media&#x26;token=e6f6d594-47af-48d5-8785-a2a424d027a9" alt="" data-size="line"> you can see a versions list and switch between them.

{% hint style="info" %}
Check out our tutorial "Switching between versions"
{% endhint %}

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FD9rpyY44CfOze3IWn1f2%2FGroup%20152%20(1).jpg?alt=media&#x26;token=c5abac7f-ecd5-4194-87e5-7b9432c6ff51" alt="" data-size="line"> “Add” button:

{% hint style="info" %}
This button would open a card from where you would be able to add different kinds of elements.
{% endhint %}

#### Card sub-sections:

<table><thead><tr><th width="147">Name</th><th>Description</th></tr></thead><tbody><tr><td>Default Components</td><td>From this section, you can add all the most common types of components you normally use on pages. (E.g. buttons, text, containers, images, etc)</td></tr><tr><td>Layouts</td><td>Here you'll find a variety of pre-built layouts. These are structures that are common to use and by adding a layout you could save valuable time.</td></tr><tr><td>Pages</td><td>From here you can add new blank pages</td></tr></tbody></table>

{% hint style="info" %}
Check out our tutorial on "Adding new components", "Using layouts", or "Adding blank pages"
{% endhint %}

##

## &#x20;<img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FEBuRTKbbyR4ebSYAgeUR%2FGroup%20153%20(1).jpg?alt=media&#x26;token=b5d8291b-fe3d-4818-adbd-3376ccdeee53" alt="" data-size="line">"Edit" menu button:

#### Edition sub-menu:

<table><thead><tr><th width="121.33333333333331">Icon</th><th width="123">Name</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F6k4tdDoiezhexKYNFznl%2FGroup%20169.jpg?alt=media&#x26;token=8e809168-32ee-41ba-b86a-334d9422d8da" alt=""></td><td>Designer</td><td>The <strong>designer</strong> button would open the Designer card where you would be able to set values to CSS properties for any selected component.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FWwLVUXT0OlLD67YJajOS%2FGroup%20170.jpg?alt=media&#x26;token=412cbcef-cc5a-4353-96c3-f4bce6bae5c6" alt=""></td><td>Assets</td><td>The <strong>assets</strong> button would open the Assets card where you would be able to upload or select an image to use in your flow.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FxzNOLAMouSRcySsYi6Xo%2FGroup%20171.jpg?alt=media&#x26;token=f40643db-8224-4c31-be7f-6b56ea91951f" alt=""></td><td>Options</td><td>The <strong>options</strong> button would open the Options card where you would be able to set different kinds of configuration options depending on the type of component you have selected.</td></tr></tbody></table>

&#x20;

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FCSFJAN5q7oEKb2788hqu%2FGroup%20184.jpg?alt=media&#x26;token=ef8e8600-3873-48f5-99b5-5f8473f55728" alt="" data-size="line"> Split Testing:

{% hint style="info" %}
Split testing (also referred to as A/B testing or multivariate testing) is a method of conducting controlled, randomized experiments with the goal of improving a website metric, such as clicks, form completions, or purchases.
{% endhint %}

<table><thead><tr><th width="123.33333333333331">Icon</th><th width="135">Name</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FikfsKbxJGOKDhiP4eNZf%2FGroup%20152%20(1).jpg?alt=media&#x26;token=544c9be8-72c6-4dae-8d34-26b492a01db8" alt=""></td><td>Create New Test</td><td>Create a new split test by cloning the selected page and assigning a percentage of flow for each page version.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FyfEduk559zihyJ2IC1Mw%2FGroup%20183.jpg?alt=media&#x26;token=2185cad8-208e-4097-8bcb-5b90769fb071" alt=""></td><td>View Current Tests</td><td>View all flow's split tests and turn them on or off, see the resulting analytics, and go to the variant's pages.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FYBjkD2KqrAmWpKLHmzck%2FGroup%20182.jpg?alt=media&#x26;token=de305b8d-d361-4020-9b9d-e74d95a82de7" alt=""></td><td>Stat Sig Calculator</td><td>Calculate your statistical significance.</td></tr></tbody></table>

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FLumGqsFqDMAeotsLSyfn%2FGroup%20176.jpg?alt=media&#x26;token=992cb0a5-f2fa-47d4-850a-12a288117073" alt="" data-size="line"> Comments:

This is a powerful tool that allows you and your co-workers to leave each other comments on the actual pages, placed over the component the comment is referring to. This makes it as easy as possible, to get the context for what the comment is about.

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FUm1Jm6RXhsMIHGInpgLi%2FGroup%20160.jpg?alt=media&#x26;token=08220a52-0a36-4577-a86f-4ae366f3ce41" alt="" data-size="line"> Analytics:

#### Card sub-sections:

<table><thead><tr><th width="140">Name</th><th>Description</th></tr></thead><tbody><tr><td>Overview</td><td>Check out how many visits your flow had.</td></tr><tr><td>By page</td><td>Check how many users got to each page. </td></tr><tr><td>By source</td><td>See where your traffic is coming from.</td></tr><tr><td>Over time</td><td>See a diagram showing the variation on the number of visitors your flow had over time.</td></tr></tbody></table>

{% hint style="info" %}
All the previous options can be set to display the data from different periods of time.&#x20;
{% endhint %}

&#x20;

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FEmuuT3AVCrjBtasRNNqh%2FGroup%20162.jpg?alt=media&#x26;token=2e210f2f-b16a-4780-9700-315fce9b72e7" alt="" data-size="line"> Debug:

<table><thead><tr><th width="125.33333333333331">Icon</th><th width="135">Name</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fdnw3Ne1Hw2tPnMwj9GJX%2FGroup%20155.jpg?alt=media&#x26;token=220e36dd-5aea-48a1-b279-0992a67557dc" alt=""></td><td>User Data</td><td>Powerful tool which allows you to easily check and edit all the user data in real-time to facilitate finding bugs or just knowing what's going on with all your variables.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FehgxOFh3kDsnYOz5bv4X%2FGroup%20172.jpg?alt=media&#x26;token=56b11d04-da3f-4e09-b77a-efede6331f25" alt=""></td><td>Logs</td><td>This card gives you logs about what happened since you opened the page. You can easily track your variable changes for each user interaction.</td></tr></tbody></table>

&#x20;

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FPP6QrVmee3Vvw9qU4z06%2FGroup%20185.jpg?alt=media&#x26;token=85adeb56-c62e-45d1-9f48-420f4764f8be" alt="" data-size="line"> Pages:

This card shows you a **preview of each page** you have in your flow arranged vertically.&#x20;

From here you can:

1. **Switch** from editing one page to another.
2. Change page **order**.
3. **Delete** any page you want.
4. **Clone** pages.
5. Change page name (**key**).

&#x20;

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FWGY1oyf4MVoMPCpnHJSq%2FGroup%20165.jpg?alt=media&#x26;token=e8f9c1a8-483e-4c84-81e6-77b0ea08b7b4" alt="" data-size="line"> Apps:

<table><thead><tr><th width="119.33333333333331">Icon</th><th width="138">Name</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F02KPZb5eooI0nXtq8Ljz%2FGroup%20173.jpg?alt=media&#x26;token=0db1ee1e-9024-4082-a96f-976e549ca539" alt=""></td><td>Convert from Figma</td><td>Convert a Figma file to Webflow:<br>Share a link to your Figma file and we’ll convert it to a Webflow page in as little as 48 hours. <strong>Want a price estimate?</strong> Click ‘Request Price Estimate’ in the flow and you’ll get one within 24 hours.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FVCLfZIFSTfw9R7GpUEjY%2FGroup%20174.jpg?alt=media&#x26;token=9fe46433-37b5-40cf-a45c-4ca7ffb824b9" alt=""></td><td>Page Speed Insights</td><td>Run a Google Page Speed Test:<br>View the speed of the current page and any notes for improvement.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FVIIejw78EiE1WQAWwlUt%2FGroup%20175.jpg?alt=media&#x26;token=a693c1f0-ee21-46d1-815c-cdc60b99bae2" alt=""></td><td>Image Compressor</td><td><p>Reduce your image file size:<br>Decrease your page load speed, rank higher on Google and offer a more delightful experience.</p><p>Just upload your image, we’ll compress it and give it back to you to download - with no loss of fidelity.</p></td></tr></tbody></table>

&#x20;

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2F3sfl0cTBvtrn69Zi1WJh%2FGroup%20204.jpg?alt=media&#x26;token=28e13924-3693-4b57-b7af-2d33ab54eff2" alt="" data-size="line"> Logic:

By clicking the "logic" button you'll open the "Logic" card, where you'll see all your Computed Fields(CF) and Actions. From here you can View or edit the existing ones or create new ones.\
Some CFs or actions would need some custom code to be written. If so, an editor window will open with some options and a big writing area.

## <img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FtnWlUSKaugBV9Bg5Hy2b%2FGroup%20192%20(1).jpg?alt=media&#x26;token=0e617c94-2cf9-4851-908b-0255717c69e1" alt="" data-size="line"> Breakpoints:

Sometimes you want to check how your page looks on a different device. This is the button you click to switch views from desktop to tablet and mobile.<br>

<table><thead><tr><th width="127.33333333333331">Icon</th><th width="117">Name</th><th>Description</th></tr></thead><tbody><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fg9J0DKt5RJLGJNrWswvu%2FGroup%20192%20(1).jpg?alt=media&#x26;token=ca11ca6a-259b-441b-b017-f78108f6b04a" alt=""></td><td>Desktop</td><td>Full-Screen mode, this view would adjust to the size of the browser window.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FBL3RMuUv6VsI5wdNsUlY%2FGroup%20195.jpg?alt=media&#x26;token=25abe1ec-0d27-4b49-8a90-9178ef1cc51f" alt=""></td><td>Tablet</td><td>The tablet mode would show you how your flow looks on a 600px wide screen.</td></tr><tr><td><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FXoXSuOAgsdvjdT9leoFQ%2FGroup%20196.jpg?alt=media&#x26;token=9e4a681d-8939-4f82-b803-b80589b19f1a" alt=""></td><td>Mobile</td><td>The mobile mode would show you how your flow looks on a 400px wide screen.</td></tr></tbody></table>

{% hint style="info" %}
The same button would be showing a different icon, based on the view you are currently on.
{% endhint %}

## How-tos sections:

{% content-ref url="../how-tos/design-how-tos" %}
[design-how-tos](https://docs.trysavvy.com/how-tos/design-how-tos)
{% endcontent-ref %}

{% content-ref url="../how-tos/general-how-tos" %}
[general-how-tos](https://docs.trysavvy.com/how-tos/general-how-tos)
{% endcontent-ref %}

{% content-ref url="../how-tos/logic-how-tos" %}
[logic-how-tos](https://docs.trysavvy.com/how-tos/logic-how-tos)
{% endcontent-ref %}