Difference Between Editor 2.0, Flex, and Classic Editor

There are several ways to work in the Without Code site builder, from the simple Classic Editor on up to the fully-responsive, powerful Editor 2.0. You can choose the editor you work in based on your comfort level or the needs of the site. Classic Editor provides an intuitive workspace that produces sites that look great on any screen. Editor 2.0 gives deeper control of elements – allowing more flexibility with position, placement, and responsive layout features. For a mix of both, consider using a mix of Classic Editor + Flex sections.

This article explains the differences between two different editors within Without Code, and a hybrid of both.

Classic Editor

This is the editor that most of our users work in, and is the original editor. This is considered the default standard editor that includes all of the features that our platform was built on, including drag and drop elements, blogging, CMS client management, developer tools, AI Assistant, online store, and more.

The majority of Without Code-built sites that are live on the web were created in this version of the editor.

To Use: Select a standard template from the template picker.

Flex

Flex mode offers a way to work inside the builder that is focused on responsive design. This mode uses inline editing technology that allows pixel-perfect accuracy for any element, and offers control of breakpoints. Using Flex will provide overall greater control of the placement and position of elements across a variety of screens and devices.

Flex is utilized by adding sections while in the Classic Editor. Flex sections can be mixed with non-Flex at will, and you may use as many Flex sections as you like within the Classic Editor.

To Use: Click Add Section, choose the “Designed” option, then choose a Flex section.

Editor 2.0

Editor 2.0 offers powerful design capabilities and responsiveness, built on a completely new layout system that takes advantage of Flexbox and CSS Grid technologies, reusable components, and a server-side rendering model. This editor allows you to maintain full control over the customization of each element’s position and behavior, regardless of screen size.

Essentially, Editor 2.0 is an all-Flex editor. If you’re comfortable working in Flex and would like to work in a fully-Flex environment, then Editor 2.0 is for you.

Editor 2.0 also includes several features that are not found in Classic or Flex:

  • Mega Menu is a powerful navigation system that allows for complex menus that include media elements like images and video.
  • Advanced Accordion is a more powerful accordion widget that includes extensive support for media.
  • Element pinning allows you to select an element, then pin its position.

To Use: Select an Editor 2.0 template from the template picker.

A Hybrid Approach

If you want to stick with the original Classic editor but want additional responsive control over certain elements in your site, you may want to consider a hybrid approach of using the Classic editor with Flex sections here and there. Use cases for this would be if you have certain elements on your site that aren’t behaving as expected when reviewing on certain screens sizes, or if you had a new page that you wanted to behave differently from the rest of the site.

To Use: Add Flex sections to your existing site, or start up a new site, choosing a Classic editor template from the picker. Add Flex sections as needed.

You Cannot Switch Between Editors

Please note that you can’t switch editors once you’ve started your site. Classic editor sites will always be Classic Editor, and Editor 2.0 sites will always be Editor 2.0. The only way to blend features of both is to use Classic editor with Flex sections, as described in the “Hybrid” approach described above.

Previous Flex Versions

If you were an early adopter of Flex, you probably used Flex v1 originally. The original version of Flex was replaced by a more powerful Flex v2. When v2 came along, it became the default. It’s possible that you may have Flex v1 sections on your site. You can leave those as is, or update them if you like to the new, standard Flex. As for terminology, the current version of Flex is simply called “Flex” and only the older existing v1 sections will be referred to with a differentiator.

Flex v1 sections can be identified by a “Flex 1.0 Section” indicator in sections and in the Layers panel.