Get Started with an Example

Note: This feature is only available in Wix Studio and is not yet available to all Wix Studio users.

Wix Studio provides a pre-built example page that demonstrates some of Velo's features:

  • Text Manipulation: Set and change text content dynamically.
  • Element Visibility: Show and hide page elements.
  • Expandable Sections: Create and manage foldable content areas.

This article explains how to access and use this example page.

Access the example page

To open the example page with code snippets:

  1. Open your Wix Studio site.
  2. In the left sidebar, click the Code icon and then Start with an example.

A new page named "Get Started with Code" is created.

Tip: If you've already enabled coding, you can access the example page by clicking then Help > Getting Started in the left sidebar.

Use the example page

The "Get Started with Code" page demonstrates basic Wix Velo functionality. Here's how to get the most out of it:

  1. Review the examples: The page features several interactive demonstrations.
  2. Test the behavior: Preview to see how each example works.
  3. Study the code: Examine the snippets associated with each example.
  4. Modify and experiment: Change the code and observe the effects.
  5. Preview your changes: Check the results after modifying the code.

Try an example

To see an example in action:

  1. Go to the "Get Started with Code" page.

  2. Choose an example from the page, such as the "Change text on button click" example. The following screenshot shows this example:

  3. In the code editor, review the existing code for the example.

  4. Modify the code:

    • Find the line that sets the text for the button.
    • Change the text inside the quotation marks.

  5. Click the preview icon in the top right corner to see your changes.

  6. Click the blue "Click to Change Title" button. The existing text changes when you click the button.

Next steps

After exploring the examples:

Was this helpful?
Yes
No