Meet the Design Editor

In this lesson, you will learn the basics of the Design Editor

The Design Editor is, without exaggeration, the core of Vev. It's where you craft your projects and where you’ll likely spend time the most. It is what paves the way for the Content Editor, and it is where great things you build in the Code Editor come to life.

Check out the Product Tour to learn more about all three Editors within Vev.

With this grand introduction, the Design Editor is where:

You CAN

  • Add, remove, resize, position, and configure elements and sections

  • Have full control over the style and content in a project

  • Set up projects and templates that can be used in the Content Editor

You CANNOT

  • Create new types of elements and sections

  • Change the code of existing elements

Accessing the Editor

  • Click “Open in Design Editor“ when hovering over the thumbnail of a project in the Dashboard.

  • Or switch to it anytime from the Top Bar when a project is open.

Understanding the Canvas

The Canvas is much like a boundless surface where you craft your content before it goes out in the world.

It is home to the Viewport, which is the rectangle through which you can see the actual content. It represents the device screen of someone viewing your Vev content.

Since devices come in all sizes and shapes, the Viewport has different device modes to help you see how your content will look on each of them, e.g. desktop, tablet, mobile.

Page content, i.e. sections and elements, are highlighted with blue borders when you hover over them. Anything beyond the Viewport is invisible but will still be highlighted.

Lastly, the Canvas can be set in either of two modes:

  • Edit mode, where elements and sections are selectable and editable. They are not fully functional in this mode, e.g. clicking links doesn’t take you anywhere and videos don’t play.

  • Preview mode, where web content is rendered with full functionality as it would in real life.

And in case you’re wondering, behind the Viewport is a nameless, infinite dark space to help you zoom and pan around with ease!

Play Time!

Open a project in the Content Editor and try out the following:

  • Scroll up and down to view the whole length of the page.

  • Zoom in and out by holding CMD/CTRL and scrolling up and down.

  • Hover over content to identify the different sections and elements.

  • Press 1, 2, and 3 on your keyboard to switch between Desktop, Tablet, and Mobile.

  • Press TAB to switch between Edit and Preview mode.

Adjusting the size of the canvas

Adjusting the canvas size

When you place Elements from the create menu in the Top Bar, you position them directly on the Canvas. Simply add sections and put the Elements you want inside and you have a working web page.

Some Elements can be used as Sections as well. I.e. YouTube, Video, Image and many more!

To select an Element, simply use the Pointer-tool to select, or click and drag to select multiple. When an Element is selected on the Canvas, you will see their corresponding Layer in the Page Content-panel highlighted.

You can hold down SPACE while you drag to move around the Canvas. By holding the CTRL key and using your mouse wheel you will zoom in/out.

Top Bar Navigation

The Top Bar gives you quick access to some of the most essential tools you need in Vev.

On the left side, you have:

  • (Our beloved) Vev logo, which takes you to the Dashboard.

  • Select tool

  • Add menu, giving you access to all elements and sections you can use.

  • Shortcut buttons to essential elements and sections, such as text, image, and video.

In the middle of the Top Bar is a contextual set of tools:

  • Master Components

  • Swap Element/Section

  • Add-ons

Lastly, over on the right side, we have:

  • Zoom settings

  • Device Modes

  • Preview mode

  • Design, Content, and Code Editor selector

  • Publish

All of these terms and topics will be discussed in due course.

You arrange and style your Sections & Elements freely on the Canvas.

The Canvas is where you place all your content. What you see on the Canvas is not only how it will look in the browser, it is your website running in the browser. In order to re-size your Canvas and see how it is currently looking at different screen heights/device modes, you can use the handlebars at the bottom and sides to adjust your screen size.

Now that we know all that can be done for one page, wouldn’t it be cool to create more pages?

Let’s do that!

Working with Pages

Step 1 - Go to Page Overview

  • Click the Page Overview icon in the Page Panel

Step 2 - Create a new page

  • Click Add

Step 3 - Change page settings

  • Hover over a page and click the gear icon

You have the option to set:

  • This new page as the homepage of your project

  • The page as a 404 page, which shows up when someone tries to visit a non-existent page on your website

  • The status of the page. Anything other than “Ready” will not be published and will remain private.

  • Title of the page. This is important for SEO purposes, among other things.

  • Description of the page. Also important for SEO.

  • Path of the page. This will be auto-generated but you can always customize it.

As an extra, you’ll be able to see a preview of how your page will appear in a Google search or as a Facebook post when linked.

Step 4 - Modify sections and elements as you please

You’re now a pro at this, so we’ll let you have fun with your Vev content!

You can structure your project as a single-page, a full website, or as part of an existing website (see Vev is best for ...). Wherever you host or embed your Vev content, your sub-pages will be accessible through their own sub-path.

Page overview in Layers Panel

You can manage pages through the panel on the left in both the Design Editor and Content Editor.

You can easily select between the pages of your project or create a new one. There are some additional useful controls:

_**_Use arrows to go to next/previous page

Use the refresh to reload/refresh the page you are working with on the Canvas.

Page Overview, click this to manage all pages and page settings.

Learn about a page

The home icon on the left indicates that this is the index page of the project. Other pages are considered subpages of this page and will have their own sub-path in the URL. You can also see the name of the page, which you can edit by double-clicking. Lastly, o the gear icon to manage page settings.

The colored icon on the right will indicate the page’s publishing status. Green means it will be published when the project as a whole is published. In addition to this you have “In progress”, “On hold”, and “Needs review”. Pages with those tags are visible to you and your team but won’t be published.

Manage page settings

Clicking the gear icon above will open up a set of page settings. See Managing pages for more details.

Page Content & Layer Panel

The Page Content Panel contains all the Elements on your Canvas. It’s built up of Sections which you can place other Elements freely inside.

From the Image above we can see two sections with Elements and nested Elements (grouped Elements or Components).

If an item contains any other items, this will be indicated by the down caret/arrow icon. You can click this to collapse and un-collapse the content.

By double-clicking where it says “Section” you can give the item a different name.

The Lock icon locks the layer, so it cannot be clicked on, hence edited, while you are working in the Canvas.

The Eye icon hides that layer from the current View Mode. You can for example go to Tablet mode and hide a Section. It will then only show up on Desktop and Mobile. Hidden Elements will not show up on the Canvas and not on the published page either.

Lastly, you can drag items in the Page Content Panel to arrange them. You can also right-click to open up a context menu with helpful commands, such as copy, paste, and a lot more.