When you work with Velo in Editor X there are a few changes to the way your code works, as compared to the Wix Editor.
It is recommended that whenever possible you use the breakpoint feature in Editor X to control your elements’ display properties. You should only use APIs to control an element’s display properties when it relates to your site’s functionality, not the way the site is being viewed.
For example, let’s say you have a form submit button on your site. You may want to only display the button when the form is completed properly. In that case you may want to use Velo APIs to control when the button is displayed.
Now let's say that you have a print button that you only want to appear on desktop browsers and not on mobile devices. Choose
Don't Display for the button on the mobile device breakpoint. The Velo
hide() functions will toggle the display of the button on the desktop breakpoint but not on the mobile device breakpoint.
Styles. You can use the Velo Style APIs to set styles in Editor X. However, the Style API only returns style property values that were set programmatically in Velo. It does not return values based on styles that were set in Editor X at design time.
Don’t Displayis set for an element in a given breakpoint in Editor X, you cannot display the element using the
expand()Velo functions for that breakpoint.
Note that the
expand()functions still set the
collapsedproperties of the element to
falseeven though the element is not visible.
expand()functions only display elements that were hidden or collapsed if the element is set to display in the Editor X breakpoint.
Hide. You can use Velo to hide all elements that are displayed in Editor X.
Collapse/Expand. Editor X offers additional layout tools over the Wix Editor to control element interaction along the y-axis. These tools cause different behaviors when
expand()is applied to an element. In the Wix Editor, elements push and pull other elements up and down the y-axis when
expand()are applied. In Editor X, you can choose from a number of tools to control the the y-axis behavior of elements.
- Stack. The collapsed or expanded element causes the other elements in the stack to move up or down depending on their docking settings.
- Max height. If the expanded element causes the container to grow beyond its maximum height, after the maximum height is reached the overflow functionality either shows, hides or scrolls the content according to the overflow setting.
- Min height. The container shrinks as far as its minimum height when
collapse()is called for a contained element.
- Overflow. When
expand()is called, the container shows, hides or scrolls the content according to the overflow setting.
When an element is not controlled by a layout tool, the
expand()functions behave in the same way as the
isVisible. The isVisible property indicates an element's visibility only if the element is set to display for the breakpoint. If the
expand()was applied to the element and the element is set to
Don’t Display, the element is not displayed but the
isVisibleproperty is still
The Editor X layout will react to changes in the size of an element due to data binding. When the content of a text element grows or shrinks, the other elements in the stack or container react according to the max and min height, docking, and overflow settings that you chose.
Master sections, including headers and footers, can be deleted from a given page. When a master section had been deleted from a page, any site code or page code that references an element contained in the master section will stop running on that page. Make sure that the master section will always be displayed before you add code to its elements. Choosing
Don't Display for a master section in specific breakpoint will not stop the code from running in that breakpoint.