Velo: All About Our New Design
5 min read
We've redesigned the Velo interface to give you a cleaner and neater experience. We're sure you'll get used to it quickly but in the meanwhile let's walk through the changes to existing functionality so you can find the stuff you've been working with.
Then we'll introduce you to the cool new features we've added.
The Site Structure Sidebar Is Now the Velo Sidebar
Search in All Code Files
Was at the top of the sidebar Now you click the Search Code
button in the Velo Sidebar
Page Files for Regular Pages, Dynamic Pages, Router Pages, and Wix App Pages
Were in the Pages section Now they're in the Page Code section
The Dynamic Pages, Router Pages Wix App pages sections are displayed only if you have pages of these types on your site.
Add a Router here:
Lightboxes
Were in a section in the sidebar Now they're in the Page Code section
Public Files, Backend Files, and node_modules
Were in their own sections in the sidebar Now they're sections inside
the Site Code section
- There is a new Site Code button in the Velo sidebar that displays your Public, Backend, and npm packages in the sidebar. This is different than the Site Code tab that was part of the Code Panel in the old design.
- node_modules was renamed to Packages (npm)
Database Collections
Were in their own section in the sidebar Now they're in the Databases
section in Content Collections
Velo Resources
Were under the Site Structure Sidebar Now you click the Velo Help
button in the Velo Sidebar
The Code Panel Has Been Simplified and Improved
Some of the buttons have been removed from the toolbar and their functionality is accessible in a right-click menu,
and with keyboard shortcuts.
Action | Mac Shortcut | Windows Shortcut |
|---|---|---|
Undo | ⌘Z | Ctrl + Z |
Redo | ⌘⇧Z | Ctrl+ Shift + Z |
Search in file | ⌘F | Ctrl + F |
Format code | ⌥⇧F | Alt + Shift + F |
You can also see a list of all the shortcuts under the Show More button, along with a Help link.
The Properties Panel Moved to the Code Panel and Got a New Name
The Properties panel is now the Properties and Events panel and it's now fixed in the right side of the Code panel.
You open and close the panel with the Properties and Events button in the toolbar.
The Site Code Tab Moved
Now it's in the
Global (Site) section in
Was in a side tab in the Code Panel Page Code
- Site code is now saved in masterPage.js in the Page Code section of the sidebar.
- The Site Code section of the sidebar contains your Public files, Backend files, and npm packages.
What's New
Now let's take a look at the new functionality you'll enjoy in our new design.
Tabs in the Code Panel
Our new design lets you open multiple tabs in the code panel for different code files.
What files can I open in a new tab?
How do I open a new tab?
Did this help?
|