How to use cloneables

Design help Custom code
1

Hello Webflow Community!

I am still trying to wrap my head around how to use cloneables. I’m comfortable working with HTML/CSS but am still trying to connect the dots in the Webflow designer and I’m stuck.

From what I’ve been reading, there’s no simple cutting and pasting. You grab a cloneable and reverse engineer it, right? That makes sense to me. But I can’t figure out how to go about doing that.

Here’s a simple example:

I’d love to use these css animations:

So I clone the project and attempt to cut and paste the elements into my project. Then (pretty much any time I’ve ever tried to use a cloneable) I get an error message saying the styles had to be renamed so nothing works.

How should I go about reverse engineering the styles here?

And I’m scratching my head, wondering why someone would create a cloneable and use style names that can’t be copied over? Like, what’s the secret that would make these things easy to use?

Here’s the cloneable project:
https://preview.webflow.com/preview/mcbs-fresh-site?utm_medium=preview_link&utm_source=designer&utm_content=mcbs-fresh-site&preview=8fd782d783d7d96624cd8a3d2160fe0b&workflow=preview

Here’s the page I copied the cloneable into:
https://preview.webflow.com/preview/mrmichaelbrown?utm_medium=preview_link&utm_source=designer&utm_content=mrmichaelbrown&preview=13fd6fee57490212c8aed82bef750c93&pageId=664d29ef538c35c438080723&workflow=preview

I love the idea of learning how things are created as opposed to just cutting and pasting but I’m lost…

REALLY appreciate any guidance and advice.

Thank you!

-M

2

This demo uses different techniques which are visible when you inspect the code in a browser. Pay attention to the w-embed elements to see the CSS used. Dev tools is the solution.

3

Awesome. Thank you! I will try this.

4

As I work on mastering front end web dev to the point where I can use dev tools to take a look at the code and understand everything that is going on, I was wondering if it might be useful to work through this simple example above in order to learn how cloneables are typically used by folks that are able to use them.

In the example, the styles are renamed when you copy them over because those styles already exist. Ok sure, so in order to leverage what’s set up, I would rename the styles accordingly?

Can anyone offer a demonstration that might set me on the right path to learning how to do this?

Hopefully there are more than a few newbies out there that are wondering the same thing and might benefit from seeing a basic example?

Hugely appreciate any tips or guidance!

Thank you!

-M