Streaming live at 10am (PST)

How to DUPLICATE a page, but be able to change all the info, without changing the original?

Hi all—

It’s been over a year since I touched Webflow, so I forgot quite a few things.

I need to update my work to look for a new job, I decided to do it the fastest way possible, by DUPLICATING one page that would fit with the style of the new page I need to create and then update the colors, type, and the work itself of course.

I duplicated, but the original page started to take on the new changes (including the copy I was writing…)

How can I quickly stop this and be able to use the duplicated page independently?

Here is the screenshot of the pages, so “WPD_A_Shutterfly_Brand” is the original one I created, I duplicated it to create “Wag!”

Link below to see what I am doing wrong.

Would appreciate the support!
M


Here is my site Read-Only:
https://preview.webflow.com/preview/marinas-first-project-36f0e9?utm_medium=preview_link&utm_source=dashboard&utm_content=marinas-first-project-36f0e9&preview=f9ecc6e498584765426ac6820f35e20d&mode=preview

Hi,

Do you mean that the styling changes you applied to the duplicate page started to affect the original?

If so, that is because you need to duplicate the Classes as well.

Let’s give an example on the Wag! page: if I wanted to change the style of the div with the class of “Wag_Intro_Content_Div”, I can select it and look in the top right of my screen to see if the div class is used anywhere else. In this instance, it is used on one other page, therefore any changes I make to this div class will affect all instances of it:
wag1

So you need to duplicated the div class and rename it to something unique. That way, any changes you make will only affect it in one location (if indeed you only have an instance of that class in one location):
wag2

The same does not apply to text, text is unique i.e. in the example given above, before duplicating the div class, you can enter text and it will only appear in that location.

Hope this helps, and sorry if I misunderstood your question and this was completely the wrong answer!

@Andy_Vaughan Ok let me try that now! I think you are answering what I need, but I am a visual learner and need to try before I can be certain :smiley:

No problem, let me know how you get on :slight_smile:

@Andy_Vaughan Ok so first I duplicated the div class and I see that now they reflect different names… Now I will try to change something minimal on the new Wag page to see if the WPD page stays as is… hold please :slight_smile:

@Andy_Vaughan Ok it looks like it worked!

I changed the color of the background of Wag and it stayed the same on WPD as the old one :slight_smile:

So now I need to remember how to be able to change the color of TEXT on one page but not the other, can you quickly remind me of that?

Thank you so much!

Same concept, just duplicate the class of the text box you are wanting to change :slight_smile:

@Andy_Vaughan Ok I think I am starting to remember how to use this! I went into my styles and saw that I had various styles saved, like H1 and H1 Color etc. So I changed it up! :slight_smile: Thanks for the help!

1 Like

Another strategy that might be more efficient is to add a tag to the classes you want to hold a variety of styles.

For instance you can have “Intro_Content_Div” as the class, then add the word “Wag” as a tag. Once the tag is applied, you will be able to customize it as you desire. Then, the fun part, if you delete the “Wag” tag it will revert to the CSS you assigned to the Class initially.

1 Like

@visualcravedesign awesome, I glad my solution worked for you! However seetravers solution above is definitely a cleaner option than mine (sometimes my novice-ness shows by not thinking of these simple solutions haha)