Vev's WordPress plugin lets you create wildly immersive, interactive content beyond the boundaries of WordPress templates — letting you embed specific content modules, like forms or carousels, or entire animated pages built in Vev.
The integration works with the Gutenberg Editor, as well as the Classic Editor and most themes to deliver beautiful, responsive web experiences to your WordPress site. To install and activate the plugin, simply search "Vev" within the WordPress plugin marketplace.
Add as a block in Gutenberg editor (Block editor)
This is ideal for working interactive sections into the rest of your WordPress page design, such as scrollytelling video backgrounds, animated charts, forms, hotspot images, audio players, and 3D objects.
Install and activate the plugin on your WordPress site.
Click “Add New” under “Pages” in your Dashboard to enter the Gutenberg editor mode.
Click the plus sign (Add Block) shown in the paragraph. Search and select “Vev embed”.
You will be asked to paste the Vev project URL (https://editor.vev.design/edit/xxx/xxx). Make sure you are logged in to the Vev Design Editor and published to "Embed your site anywhere" prior to embedding to WordPress.
Click “Embed” to integrate your Vev project.
If your embed is successful, you will see the “Content has been set” message, as well as the preview of your project, will be blurred in the background.
If your Vev content is more than full 650px and you want it to fill the screen, then toggle on the “Show full width” option
If your embed is unsuccessful, you will see “Sorry, this content could not be embedded.” Please make sure you have copied and pasted the Vev project URL correctly.
Preview your WordPress page, and once you are happy publish your page. Your Vev content will now appear live on your WordPress site!
Note: Any changes you make in your Vev project post-embed will be reflected in your WordPress page once you publish the changes in Vev. You don't need to update your URL in the plugin every time you make new changes.
Add as a page in Gutenberg editor (Block editor)
You can also embed entire Vev-built pages into your WordPress editor, for even more design freedom. Install and activate the plugin in your WordPress site.
If you want to integrate your Vev-built landing page or microsite and override the Header & Footer element, follow the steps above;
and then click “Page” on the right panel of the Gutenberg editor and choose “Vev page” under Template.
Preview your WordPress page and publish it when you're ready.
Voila! Your Vev page is now live on your WordPress site.
Add in the Classic editor or other page builders
If you are using the Classic editor, just paste our Embed code into your desired location on the page in the “Text” tab.
To embed a whole Vev-built landing page, go to Page Attributes > Template > Select “Vev page” > Save Draft > Preview > Publish.
Limitations
Caching
Once you have embedded your Vev content to your desired destination, your browser will cache it. Thus, your changes may not be reflected immediately after publication.
Here are three possible ways to work around this:
Open your browser in Incognito mode and check for the changes
Try to delete the cache and check for the changes
Just wait and it will usually take an approximate time of 30mins to reflect the changes
Security
Due to the security setup in your technical landscape, third-party codes may be disabled. In such cases, Vev content will have limitations. Please reach out to your system admin to check for any such security restrictions.
Breakpoints
Assess the destination container of your WordPress page. That is dependent on the WordPress theme which you have chosen. Select your main breakpoint in Vev based on your destination and remove the breakpoints that are higher than the selected one.
Example:
If you want to add Vev content in a 650px container, then it is recommended to use the “Tablet” device as Main Breakpoint and remove the “Desktop” breakpoint for that project. Otherwise, there will be issues with respect to alignment and styling.
Embedding multiple pages
The URL won’t change if you have embedded a Vev project with multiple pages. If you want your pages to populate in the URL, please create WordPress pages accordingly and embed your Vev project per page.
Troubleshooting
Compatibility
While our plugin works with the Classic and Gutenberg editors and their default themes, it may not be compatible with other plugins or page builders, like Elementor, Divi, Beaver Builder, etc.
If our plugin is not available within the page builders, use our Embed code to integrate the Vev content with the page builder.
Managing "Empty State"
Have you forgotten to publish before integrating into WordPress?
If so, you may see the screen below. Just go back to your project and make sure to select the "Embed your site anywhere" checkbox in the Publish Modal.
Removing the watermark
Depending on your Project plan, you may see the Vev watermark on your design. Add a Project plan for $7.00 USD/ month to remove this from your project.