Streaming live at 10am (PST)

Copy & paste from one Webflow site to another [Content Staging]


#1

Hi guys !

One of the main problems with website redesigns on Webflow is updating live website content on individual pages. To resolve this problem I use two sites on my Webflow account :

1° The first is my live Website.

2° The second is like a staging environment to help me streamline the process of redesigning a website and test new things.

But when I want to push my new redesign from the second site to the live website it can't be pretty tricky... As far as I know, the only solution I have is to rebuild all the design on the first environnement.

To make it easy, is it possible to have the ability to copy & paste from one Webflow site to another with the CSS ?

If not do you have some recommandation for a designer on a "website redesign marathon" ?

Thanks in advance.
Antoine


Developing multiple iterations of one site in parallel - How to copy elements/styles/objects/parts?
#2

Hi Antoine!

I guess you can see for yourself what the implications of copy-pasting design elements into another site are, it's pretty easy.

Use a technology that you can manipulate locally, like bootstrap. Make a page with it, and then create another site and design it as well. Now copy elements from one to the other. The HTML part is pretty easy. Now for the CSS, it's a bit harder to select only the CSS lines you need. Especially if there are inheritances and if the site don't have the same defaults. Once you've identified the minimum CSS to copy, where to copy it? At the beginning of the other site CSS file, or at the end? Or in the middle? What happens with all the redundancy classes? H1? H2? a? li? What gets prioritized, what gets not? Manually clean of add a prefix to all classes?

In the end, it's going to take you a lot of time and you'll have to make a lot of difficult decisions, just to end up with dirty HTML code and dirty CSS declarations. Dirty can only be a jugement because who care if it works? Well, some things are important, like accessibility. Accessibility means the code needs to be clear and understandable, hierarchies easy to understand, etc. If even you Hx are renamed, that's a code nightmare.

All this happens when you make decisions with your brain, difficult ones. So now imagine if a program has to make all those decisions... in order for that to work the program is not going to take any risk, it's gonna append all classes names and deal with hierarchy the best it can.

Me too I'd like to be able to speed up my work sometimes, and as I can imagine that Webflow could let us copy and paste structures of elements, complete HTML+CSS appears to me like a crazy thing to do. As an expert I will cringe a lot trying to help people who merged things multiple time, ending up in a total code disaster (read: I won't help). And even if I want to be able to duplicate structure, I can't see that happening because when less code savvy users will paste their structure it won't look good at all, and a large portion of uses aren't going to be able to deal with it at all. Because after pasting a structure you'll have to counteract the effect of the already defined styles that can conflict with the pasted structure, before styling them back into what is expected.

This is why I don't see this happening anytime soon.

Doing what you do now and having to recreate everything you've drafted elsewhere is actually GOOD. Because in the process you have the occasion to rethink you're structure, hierarchy of classes. That's called refactoring and when that happens it means good design or code quality.


#3

Bonjour Vincent,

Thanks for your great answer.

Is there a specific process you recommend for a website redesign on Webflow ?

Excellente journée à toi.
Antoine


#4

You can preview changes by unticking the main domain checkbox, and publish to the yoursite.webflow.io domain. Once you are satisfied, publish to the main domain.

There is no need for two projects.


#5

I don't know how much it's recommendable but my own workflow works pretty well. I draft on paper if not in a prototyping tool, then I build one section at a time. Once a section is ready, if I'm not completely satisfied with the structure and cleaniness of the styles, I redo it from scratch just under, then delete the draft one and clean unused styles.


#6

Really great answer. I think we can put this topic to rest (the "feature" has been asked for numerous times on this forum).


#7

It is something we see often and we are looking into this internally. I don't have a firm ETA, but we are looking into it! :smiley:


ADMIN EDIT: Please be sure to vote for and comment on this feature request here: https://wishlist.webflow.com/ideas/DESIGNER-I-6


#8