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.
With this grand introduction, the Design Editor is where:
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
Create new types of elements and sections
Change the code of existing elements
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.
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!
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.
3 on your keyboard to switch between Desktop, Tablet, and Mobile.
TAB to switch between Edit and Preview mode.
Adjusting the size of the canvas
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.
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.
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:
Lastly, over on the right side, we have:
Design, Content, and Code Editor selector
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!
Click the Page Overview icon in the Page Panel
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.
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.
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.
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.
Clicking the gear icon above will open up a set of page settings. See Managing pages for more details.
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.