Creating Your First Webflow Cloneable: Share Your Design Magic

Published
March 5, 2024
To read
minutes
Category
Advanced
Written By
Jayant Rao

Share your web design expertise with Webflow Cloneables! This guide walks you through creating your first Cloneable, from design & structure to publishing & sharing. Inspire & empower others with your creations!

Introduction

Webflow Cloneables are a fantastic way to share your design expertise and allow others to learn and build upon your web design projects.

In the context of design, "cloneable" typically refers to the ability to create copies or duplicates of a design file or template. This feature allows designers to easily replicate and reuse specific design elements, layouts, or entire design compositions without starting from scratch.

In this guide, we'll walk you through the step-by-step process of creating your first Webflow Cloneable, empowering you to contribute to the design community and help fellow designers kickstart their projects with your creations.

Step 1: Design Your Webflow Project

  • Log in to your Webflow account or sign up if you don't have one.p
  • Create a new project or select an existing project you'd like to share as a Cloneable.
  • Design your project as you normally would, paying attention to every detail, from layout to interactions.

Step 2: Structure and Clean Up

  • Ensure your project is well-organized with a clear structure. Use appropriate page names and folder hierarchies.
  • Review your project to eliminate any unused elements or styles.
  • Optimize images and assets to minimize file sizes.

Step 3: Prepare for Cloning

  • Create a blank page in your project specifically for instructions and documentation. You can call it "ReadMe" or "Instructions."
  • Add detailed instructions on how to use and customize your design. Include explanations for each section or component.

Step 4: Publish Your Project

  • Make sure your project is ready for sharing and is error-free.
  • Publish your project to a subdomain or custom domain if needed.

Step 5: Share Your Cloneable

  • In your project's dashboard, click on "Settings."
  • In the “General” tab scroll down to the "Showcase site" section and turn it on. This will open a tab.
  • Enter all the required information.
  • Click on “Showcase your site”.
  • Click the "Publish" button to save your changes.

Step 6: Cloneable Link

  • Once your project is published with cloning enabled, you'll see a "Cloneable" link. Click on it.
  • Copy the Cloneable link; this is the link you'll share with others.

Step 7: Share Your Cloneable

  • Share your Cloneable link on Webflow's Cloneable platform. You can do this by clicking "Submit Cloneable" on the Cloneables page.
  • Fill in the required information, including the Cloneable name, description, and URL to the documentation.
  • Click "Submit."

Step 8: Promote Your Cloneable

  • Share your Cloneable link on social media, web design forums, and communities like Webflow's forums or Designer News.
  • Encourage feedback and collaboration from the design community.

Conclusion

Congratulations! You've successfully created your first Webflow Cloneable, sharing your design skills with the world. By following these steps, you've not only contributed to the design community but also provided valuable resources for fellow designers to learn from and build upon.

Remember that sharing your Cloneables is a great way to showcase your expertise, gain recognition in the design community, and help others accelerate their projects.

Keep creating and sharing to inspire and collaborate with fellow designers, fostering a culture of learning and creativity in the world of web design.

Your Cloneables are now out in the wild, ready to inspire and empower others on their web design journey.

Looking for a webflow expert?

Just like you, we are also looking for partners who would like to work with us. We want to be your team, part of your team and much more. Take that leap and fill in this form or email us.

Book A Free Call

Download our Free WebFlow Checklist

If you are curious about the checklist we follow for all our WebFlow projects, look no further - we have packed it for you in a comprehensive document. All you have to do is Duplicate it into your Notion Profile and start using it for your current or any upcoming projects.

✓ Kick-Off Checklist

✓ Pre-Launch Checklist

✓ Post-Launch Checklist

Thank you!
Check your inbox for the link.
Oops! Something went wrong while submitting the form.