Understanding pages in Vev

Understanding page structure within Vev projects

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Page structure

You can structure your project as:

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.

Create a new page

  • Click on the + (plus) icon on the top right corner

    Automatically Vev auto generates a gibberish name for your project, so double-click the name to edit.

Note: The first page of a project will always be the Homepage, indicated with the house icon next to the page name. You can change the Homepage from the Project Settings. Other pages are considered subpages of this page and will have their own sub-path in the URL.

Edit page settings

Here, you have the option to add and edit:

  • Cover photo: This will be the image featured when sharing on social. You can see the social share preview in the tile listed on the right.

  • Title and Description: This is important for your SEO

  • Page Status: either Ready, In Progress, Needs review, or On hold. Anything other than Ready will not be published and will remain private.

  • Path: aka slug to the page. This will be auto-generated but you can always customize it.

  • Custom page variables

Copy-pasting a Page

  • Open the home page settings

  • Click on Pages to see the pages' panel overview

  • Click on the three dots of the page you want to copy

  • Select copy

  • Click on Insert page

You can copy-paste pages across projects as shown in the gif, we recommend having two tabs open to do this.

Deleting a Page

Follow the steps listed below to learn how to delete pages.

  • In the editor, click the Cogwheel icon next to the Publishing button.

  • Select Pages from the dropdown menu.

  • Click the 3 dots over the page you want to delete.

  • Select Delete

The page will no longer appear in the page's panel.

Navigate between pages

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

Controls

Description

Use arrows to go to the next/previous page.

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

Integrations: Page variables

You can access the information about a page as page variables and use them in Integrations. Use this to add a unique ID, the description, or the cover photo URL into meta tags, Custom HTML, or scripts that are bundled in with your published project.

Default page variables

Property name

Type

Description

key

String

The unique page ID, e.g. p4AIhEUm7I_

cover

String

The URL of the cover photoset in the page settings

created

Number

The unix timestamp for when the project was created

Updated

Number

The unix timestamp for when the project was last updated

Status

Number

Page Status Done = 0 Progress = 1

Hold = 2

Review = 3

Description

String

The page description

Path

String

The page's path/slug

Project

String

The project ID

TemplateApplied

Boolean


If a template was applied

Title

String

The title of the project

Custom

{[customVariable]: string }

You can define any number of custom page attributes to attach to a page, in the page settings. See custom page variables

Example of usage

In the image below you can see the Open Graph Metas integration uses default page variables to supply search engines with the cover photo of your project.

Note: The default page variable cover is used in the Open Graph meta to supply Social Engines with the cover photo.

Custom Page Variables

To add/remove custom page variables to your Project, go to the Page Variables section in your Page Details view.

Adding Variables

  • Press the Add + button to add a page variable

  • Give the variable a name, such as "author"

  • Press Add variable

  • You can now provide every page with an "author"

  • To use the new author variable, go to your Integration Settings and use @vev.page.custom.authorto access the variable and print it in for example the Meta Tags integration as name=authorand value=@vev.page.custom.author

Note: If you are using the Webhook to publish your content, you can toggle on Also send package data to get the values of your Integration Settings as JSON with the publish payload.

Removing variables

  • To delete a variable, over the trashcan icon, and press it.

This removes the variable, and if it is in use, it will now print out a blank string where it once printed the author.

Did this answer your question?