As you work in Vev, you'll become familiar with how projects are structured. This guide will help you get started and understand key concepts.
Creating a project
From Scratch
From the dashboard, click the Create Project button in the top-right corner.
Select Blank Canvas.
Click Start from Scratch.
From a Template
From the dashboard, click the Create Project button in the top-right corner.
Choose a template (you can click Preview to see it in action).
Click Use Template.
You can also create your own templates. Learn how to create templates here.
Note: To create custom templates, you need to be on at least the Professional plan.
Setting Your Main Breakpoint
Breakpoints allow you to adjust a website's layout for different screen sizes. Each breakpoint has a starting point, a finishing point, and a range in between.
Using Pre-made Breakpoints
When creating a project from scratch, you can set your layout to be Desktop-first, Tablet-first, or Mobile-first. If it's your first time in Vev, we recommend starting with Desktop-first and optimizing for tablet and mobile later.
Using Saved Breakpoint Presets
Note: This feature is available on Professional and Organizational plans.
You can use saved breakpoint presets by selecting them from the Saved Breakpoint Presets menu, or create a new one.
To create, edit, or delete a preset from this view:
Click the Edit or Create button to open the preset drawer.
Here, you can:
Rename individual breakpoints
Edit breakpoint sizes
Set a breakpoint as the main one (if it's not already set)
Add new breakpoints
Edit the preset name
Important: Deleting a preset is an account-wide action, meaning all users on the account will lose access to it. However, projects already using the preset won't be affected.
Naming Your Project
To name or rename your project:
Click on the Project Title field at the top of the editor. If not set, it will say Untitled.
You can also change the folder where the project is stored from this same menu.
Project Settings
You can enter the Project settings by clicking the cogwheel in the bottom left corner. The settings panel appears on the left side of the editor. Here's what you can adjust:
Color Styles: If defined on folder level, the colours will inherit into the project settings. These colours can be overridden on the project leve. Set a color theme for your folder when using templates.
Breakpoints: Learn how to manage breakpoints here.
Project Tags
Figma Import: See how to import a project from Figma.