1_ZxqU4dcMgnOkEe_YcZ01EQ

A big new feature in Magento 2 is the Visual Design Editor, which can be operated using drag and drop. The Visual Design Editor (VDE) is an easy-to-use “drag and drop” interface for editing the page layout of Magento 2. The implementation of the VDE means that changing the arrangement/configuration of containers and output blocks no longer requires technical knowledge. All changes can easily be made in the admin panel by any website administrator.

To get to the Visual Design Editor, you have to start the Visual Design Editor in the admin backend under System> Design> Editor. For websites with more than one store view, the desired StoreView must be selected from a drop-down list beforehand, because the Visual Design Editor in Magento 2 is only available on the store view level.

mag2_vde

By default, the editor highlights blocks and containers in the visual design so that they can be more easily distinguished. The highlighting indicates that the edit mode is activated. Changes are not allowed while highlighting is disabled. When you exit the visual design editor, the highlighting status is reset to the default value (enabled). The Visual Design Editor highlights containers (draggable and non-draggable) and draggable blocks in the following way:

blueline - draggable blocks (catalog.topnav, page_content_heading, cms_page)
greenline - draggable containers (CMS Content Wrapper)

For more assistance checkout RLTSquare's Magento site.

Magento 2: Drag & Drop Visual Design Editor

Partager cet article