Importing Relume Projects into Webflow
Learn how to seamlessly import your Relume wireframes into Webflow without class duplication and sync your project styles.
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
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.
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
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
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:
- Clone Relume Webflow Style Guide
- Install and open the app
- Importing Style Guides
- Import sitemaps as Webflow pages
- Import individual wireframes
- Importing global sections
Clone Relume Webflow Style Guide
{{note-webflow-clone="/resources/assets/rtc"}}
The new Relume Webflow App only supports the latest style guide cloneable (v3.0). This is due to the new classes and variables that were necessary to support Style Guide Builder export to Webflow.
How to move forward with older style guide versions
You you can still bring in new components into an existing or older style guide using 3 other options:
- In the Relume Site Builder, you can navigate to a section or page and copy and paste them into Webflow directly.
- You can use our chrome extension to copy a component and paste it directly into Webflow.
- You can navigate to our Webflow Library to copy a component and paste it directly into Webflow.
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.
Importing a Style Guide
Once you have chosen a project, you’ll have the option to import using an existing style guide or one of your Style Guide Builder concepts. You can only import a style guide once per webflow project.
Import sitemaps as pages
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.
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 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?
For account-related issues, please contact [email protected].
