The Velo Sidebar shows all of the files that make up your site, including pages, lightboxes, folders, files, packages, and database collections. Working in this sidebar, you can perform a variety of actions that affect your site as detailed below.
The sidebar displays different content depending on which Sidebar button you select.
To hide the sidebar, hover over it and click the hide button on the right side of the sidebar.
To show the sidebar after it's hidden, click any of the sidebar buttons.
The Page Code section of the sidebar contains the following sections:
Your site's regular pages appear immediately beneath the Main Pages section title. You can change a page's by clicking the Settings icon that appears when you hover over the page's name. You can set any page other than your site's home page as a .
If you've created any dynamic pages, all the pages with the same .
You can add a new dynamic page to a group by clicking the Settings icon that appears when you hover over a section's name.
You can change a page's settings, such as its URL and SEO data, remove its dynamic connections to make it a regular page, or delete it by clicking the Settings icon that appears when you hover over the dynamic page's name.
If you've created a , all the pages associated with that router's prefix will be grouped together under the Page Code's Router Pages section of the Velo Sidebar. For example, if you created a router with the prefix myrouter, the router pages are grouped together under Myrouter Pages (Router).
Each individual router page is given a default name that is used in your router's code. You can change the name, if you want. Your visitors cannot see the page name.
You can change a router's prefix (which also changes the names of the associated functions that are implemented in the routers.js file), and/or you can add a new page to a router. Do this by clicking the ellipsis icon that appears when you hover over the title of the grouped router pages. Choose either Change Router or Add Page to Router.
You can change a page's settings, rename it, delete it, or remove it from a router to make it a regular page by clicking the ellipsis icon that appears when you hover over the name of the router page.
You can add a new router by clicking the plus icon that appears when you hover over the Main Pages section header in the Velo Sidebar.
Some apps, like those that add Members functionality to your site add special pages to your site. These pages appear in the their own section under Page Code.
If you've added a lightbox to a page on your site, it appears in the Lightboxes section of the sidebar. This section only appears if you’ve added at least one lightbox to your site.
You can add a new lightbox using the Add menu in the Editor.
When you select an existing lightbox in the sidebar, the Editor enters Lightbox Mode.
Elements in the Editor can appear either on a specific page or on all of your site's pages. You put code for specific pages in that page's code file. Code that you want to run on all the pages in your site should be in the masterPage.js file. You could have code that you want to run on all the pages of your site for these reasons:
- Code for elements set to appear on all pages: When an element appears on all your site pages and you want to add functionality to it that will be consistent across your site, add that code in the Site tab. When you use the Properties panel to add an event to your element that appears on all pages, the code for that event is automatically placed in the masterPage.js file.
- Code in your site that isn't related to a particular element: If you have code that relates to all the pages of your site but doesn't relate to an element set to show on all pages, add it to masterPage.js.
If you have an element that appears on all pages, but you want to add code to it that is specific to one page, add the code to the Page code for that page.
Tip: Code that you add to the masterPage.js runs on every page in your site. This can impact your site's performance so it's important to consider if you need the code to run on every page. If you have code that needs to run on some, but not all pages you may want to put it in a file and it as needed.
The Code Files section contains the following sections:
You need to export functions from public files and then import them in the files where you want to use them, public or backend. When you add a new .js file to the Public section it contains comments that provide instructions and examples for exporting and importing functions. You can refer to those comments for more information.
As your site's functionality grows, it may be easier to keep your code organized in files that you call as you need them in your page code. You can divide your public files into folders to further organize them.
- You add a new file or folder to the Public section by clicking the plus icon that appears when you hover over the section name.
- You add a new file to a folder or delete a folder by clicking the ellipsis icon that appears when you hover over the folder name.
- You rename or delete a file by clicking the ellipsis icon that appears when you hover over the file name.
Note: Your page and site code, which are also publicly accessible, do not appear in the Public section.
You can also add a Jobs Scheduler file to and an events.js file to .
- You add a new file or folder to the Backend section by clicking the plus icon that appears when you hover over the section name.
- You add a new file to a folder or delete a folder by clicking the ellipses icon that appears when you hover over the folder name.
- You rename or delete a file by clicking the ellipses icon that appears when you hover over the file name.
Sometimes you need to add complex functionality to your site that has already been implemented by someone else. You can use a code library that suits your needs and incorporate it into your own code. Each reusable library of code is known as a package.
There are 2 types of pre-built packages that you can install from the Packages section of the sidebar:
Velo packages can be divided into 2 categories:
You can install a package by clicking the plus icon that appears when you hover over the Packages section.
Once you've installed a package you can manage the package on your site in the Package Manager by clicking the settings icon that appears when you hover over the Packages section.
You can uninstall a package by hovering over the package you want to uninstall, click the Show More icon, and select Uninstall.
Click the magnifying glass sidebar button to open Search Your Code and search all the code files on your site. You can search with options to match case, match whole word, or use regular expressions.
The Database section of the sidebar contains your . Click a collection to open it in the Content Management System (CMS).
You can add a new collection or work with by clicking the plus icon that appears when you hover over the section name.
You can add a new dynamic page based on a collection, update a , , or add and remove to a collection by clicking the ellipsis icon that appears when you hover over a collection name.
When you add certain Wix Apps to your site, database collections are automatically added to your site. These collections appear in your sidebar. contain information about the items in your Wix app. Collections for each app are grouped together in the sidebar and are read-only. You can edit the collections in the relevant App manager in your Dashboard.
Note You may need to save or publish the site and refresh your browser to view the Apps collections in the Database.
The Developer Tools section contain the following sections:
The feature allows you to view information about . It records events, such as console logs, HTTP functions, and web module functions as log entries.
You can view and track site events in real time or you can connect your site events to , an external monitoring tool to perform log analysis and generate visual depictions of site data for you to gain meaningful insights.
When using backend code with your site, you will want to monitor the code's performance to ensure the best experience for your site visitors.
The assists you with the following:
- Track the performance of your backend code over time.
- Detect when your site is not functioning as expected.
- Troubleshoot and determine the causes of a site not functioning smoothly.
- Ask for additional resources when needed.
The Security section of the Developer Tools tab contains your .
Sometimes you may need to add private information to your site's code. For example, you may require an API key for some 3rd-party service you choose to integrate with. You never want to expose your secrets to your page, site, or public code. Instead, you can use the Secrets Manager to safely work with secrets in your code.
In the Automation section you can find the feature.
Triggered Emails allow you to send personalized messages to site visitors who have triggered a specific event.