Importing Relume Projects into Webflow

Learn how to seamlessly import your Relume wireframes into Webflow without class duplication and sync your project styles.

Company Description:
Movemint is a cutting-edge training facility based in Sydney, Australia, designed for high-performance athletes and those aspiring to reach peak physical condition. Offering advanced sports science assessments, personalized training programs, and recovery services such as cryotherapy and sports massage, Movemint caters to the specific needs of competitive individuals.

Goals:
- Primary goal is to encourage new members to join
- Secondary goals include driving downloads of the app, providing the gym location and learning about the coaches.

Other relevant notes:
- Include a coaches page
- Include a blog- Include a page for each service offering (reference the company description)
- Keep the pages to 4-8 sections long
Company description:
Purely Organic Markets is a chain of eco-friendly grocery stores based in Portland, Oregon, offering a wide range of organic foods, natural personal care products, and sustainable household goods. We are committed to promoting healthy living and environmental sustainability.

Goals:
- Primary goal is to increase foot traffic in our stores.
- Secondary goals include promoting our loyalty program and highlighting our community involvement initiatives.
Company description:
Codex Learning Center is an educational institution based in Boston, Massachusetts, that provides advanced coding bootcamps, tech workshops, and career placement services for individuals looking to enter the tech industry.

Goals:
- Primary goal is to enroll new students in our coding bootcamps.
- Secondary goal is to promote free introductory workshops

Other Relevant Notes:
- Feature a section on instructor bios
Company description:
Wanderlust Travel Co. is a boutique travel agency based in Austin, Texas, specializing in bespoke travel itineraries, luxury accommodations, and unique travel experiences around the globe for the discerning traveler.

Goals:
- Primary goal is to increase bookings for our custom travel packages.
- Secondary goal is to drive newsletter sign-ups
Company description:EcoDrive Innovations is a tech startup based in Seattle, Washington, focused on developing eco-friendly automotive technologies, including electric vehicle (EV) components and energy-efficient systems.

Goals:
- Primary goal is to attract investors and partners.
- Secondary goals include promoting our research and development progress and highlighting patent achievements.
Transcription

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.

Give feedback

Was this resource helpful?

Thank you for rating
Thank you for rating