Using the Relume Site Builder Import Webflow App

In this doc you’ll learn how to:

1. Install and open the app
2. Import sitemaps as Webflow pages
3. Import individual wireframes
4. Importing global sections

Install and open the app

Open up the App Marketplace within the Webflow Designer. Search for “Relume” and launch the app. Or you can install the app from the Webflow App Marketplace.

Click the login button on the app and you’ll be redirected to relume.io to log into your Relume account.

Import sitemaps as pages

Click on a project in your list. Hover over a sitemap you wish to import and click on “Add Pages” to add an entire sitemap. The Webflow app will create all of the pages, sections and copywriting as well as import any global sections you had identified in your sitemap and bring them in as Webflow components.

Class Sync

When you import your sitemap into Webflow, make sure to have the Relume Chrome Extension installed and Class Sync turned on. Class Sync will sync the styles between classes that have the same name - significantly speeding up the process.

Import individual wireframes

If you are just wanting to bring in a single page, you can also do that. Just hover over any of the pages and click on “Add to page”. This will import just this page along with the global sections of that page.

If you already have a existing pages with the same name, you’ll have the option to replace existing pages or create new pages.

Global sections

Any section in your sitemap that you have marked as a global section will import via the Relume Site Builder Import Webflow app as a Webflow component. When importing, if there is an existing global Webflow component with the same name (eg “Navbar”) it will not override or create a new global component, it will use the existing component in Webflow. If you would like to add an additional nav, simply give it a different name and it will import as a new global Webflow component.

‍