Working with Velo and Editor X

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 show() and 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.

• Show. If Don’t Display is set for an element in a given breakpoint in Editor X, you cannot display the element using the show() or expand() Velo functions for that breakpoint.
  Note that the show() and expand() functions still set the hidden and collapsed properties of the element tofalse even though the element is not visible.
  The show() and 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 collapse() or expand() is applied to an element. In the Wix Editor, elements push and pull other elements up and down the y-axis when collapse() and expand() are applied. In Editor X, you can choose from a number of tools to control the the y-axis behavior of elements.
  For example:

  • 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 collapse() and expand() functions behave in the same way as the hide() and show()functions.

• isVisible. The isVisible property indicates an element's visibility only if the element is set to display for the breakpoint. If the show() or expand() was applied to the element and the element is set to Don’t Display, the element is not displayed but the isVisible property is still true.

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.