Creating a project

The anatomy of a project

General Project settings

As you build in Vev, you will naturally start to understand how projects are structured. This article will help get you familiar with how projects work.

Creating a project

From scratch

  • From the dashboard, click on the yellow Create Project button on the top-right

  • Select a Blank canvas project

  • Click on Start from scratch

From a Template

  • From the dashboard, click on the yellow Create Project button on the top-right

  • Choose the template you like the most (you can click preview to check it out)

  • Click on Use template

You can also create your own templates. Read this article to learn how to do it.

Note: To create your own templates, you must be on the professional plan at the least.

Setting your main breakpoint

You can modify a website's layout or styling to accommodate different screen sizes by adjusting breakpoints. Breakpoints consist of a starting point, a finishing point, and a range in between.

When starting from a blank canvas, you can choose your starting layout for Desktop-first, Tablet-first, or Mobile-first. We recommend starting with Desktop-first and easily optimizing for tablet and mobile later if needed. We recommend turning on the "Inherit styles across breakpoints" toggle as it speeds up the workflow in creating responsive content.

Read more on how breakpoints work here

Starting from a breakpoint preset

You can use any of the presets you've saved by choosing them from the “Saved breakpoint presets” menu. Using saved breakpoint presets is a Professional and Organizational feature.

You can easily create, edit or delete a preset when creating a new project.

When pressing the edit or create button it will from the right open a drawer where you can manage the preset.

Here you can:

  • Edit each individual breakpoint by

    • Giving it a new name

    • Edit its size

    • Set as the Main breakpoint, if not already set

  • Add new breakpoints

  • Edit the preset name

Be aware that deleting a preset is an account-wide action, so users on the same account will no longer have access to the preset. Projects that already use the preset will not be affected.

Learn how to edit & save custom breakpoints

Naming a project

  • Name and customize your project name by clicking on the Project title field at the top of the page.

  • Here, you can also change which Workspace the project is located in.

The anatomy of a project

Overview

When building in Vev, it's best to stick to a strict hierarchy or 'anatomy' for your designs. This hierarchy is comprised of sections, frames, elements, and add-ons.

#

Anatomy

Description

1

Project

From here, you can edit page settings, meta-data, hosting, and additional integrations.

2

Sections

Full-width sections that can be added to your canvas with varying pre-built functionality.

3

Frames

Containers or divs are meant to group and organize elements.

4

Elements

Text, images, buttons, and more.

5

Addons

Extend the functionality and interactivity of your content. Animate, link, call APIs, track events with your analytics tools, and much more.

Sections

Sections are fundamental to your design – You can't build in Vev without them. Put simply, sections are full-width components that can extend the entire browser window as opposed to frames and elements which are only contained within the safe zone.

Frames

Frames are meant to organize and contain elements in order to make responsive design easier. They can also function as a design tool to create more immersive and interactive behavior.

Elements

Elements are the building blocks of your canvas such as text, images, buttons, and more.

Addons

Breathe life into your design and content with options like animations and scroll speeds.

General Project Settings

When you don't have any element from your project selected a panel with your project general settings will appear on the right side of the editor. Have a look at the list below to check the available settings.

  • Color styles: When you create a template using Color Styles, you can set a color theme for the workspace. This will be used when you create future projects using templates and includes:

    • Accent palette

    • Background palette

Did this answer your question?