How to redesign a live site
If you already have a site published with Studio.Design, here are four ways to redesign it. The methods below are just examples — choose the one that best fits your situation.
(1) Create (or duplicate) a separate project and switch the domain
(2) Edit the current site directly to update it
(3) Create new pages within the same project and swap the paths
(4) Copy and paste page designs from another project
(1) Create (or duplicate) a separate project and switch the domain
With this method, you build the redesigned site in a new project and then move the domain from the old project to the new one.
Note:
There will always be some downtime between disconnecting the domain from the old project and reconnecting/publishing it on the new project.
Paid plans can't be transferred or carried over to the new project. Depending on your billing cycle, you may end up paying for both plans during the overlap.
Project duplication is only available to accounts with Owner permissions.
All Apps integration info needs to be set up again manually.
Steps
Build your redesigned site in the duplicated project.
Once the redesigned site is ready, disconnect the domain from the old project, then register the same domain on the new project and publish it.
If you're using a custom domain (paid plan)
When you disconnect and reconnect the domain, you'll need to downgrade the old project and upgrade the new one. Once the new project is ready, follow these steps to switch plans:
Downgrade the plan on the old project.
Upgrade the new project before the old project's plan expires. (To keep the overlap period as short as possible, consider doing this the day before the old plan expires.)
Disconnect the custom domain from the old project.
Set up the custom domain on the new project.
If you're using a studio.site domain
You'll need to release and re-register the domain.
Unpublish the old project, click the "×" to clear the domain name field.
In the new project's publish settings, enter the domain name you just released and publish.
(2) Edit the current site directly to update it
This method is best for small sites that can be redesigned quickly.
As long as you don't update the site while editing, your live site won't be affected.
Steps
Edit each page in your project directly.
When you're ready, publish (update) the site.
With this approach, there's no downtime, and your CMS data and Apps settings stay intact. However, you won't be able to update the site until the redesigned version is fully ready.
(3) Create new pages within the same project and swap the paths
With this method, you create the redesigned pages inside the same project, then swap them in when you're ready to publish. Consider this option if your site is large and the redesign will take a while.
As long as you don't update the site while editing, your live site won't be affected.
Steps
1. Add or duplicate pages
Add or duplicate the pages you want to use for the redesign, and set the page visibility to Private.
2. Change the paths or delete pages
When you're ready, change all the paths on your currently published pages, or delete those pages.
3. Change the paths
Change the paths for each redesigned page to the final URL strings.
*If a pop-up appears, leave the checkbox selected and click "Update".
4. Test the site
Once you're done, use Live Preview to check that internal links and other elements work correctly.
5. Change page visibility
Set each page's visibility to Everyone, then update the site.
Note:
When publishing, make sure you don't forget to switch the visibility settings.
To apply changes to your live site, you'll need to click "Update" in the Publish panel.
(4) Copy and paste page designs from another project
With this method, you create the redesign in a separate project, then copy and paste the design into your live project. Component data is transferred automatically.
Note: Copy and paste only transfers the design elements on the page itself. You'll need to recreate any data in the CMS dashboard from scratch.
Some project-specific information also can't be carried over.
<Examples of data that can't be transferred>
Some font information
CMS property bindings
Steps
Prepare a project for the new design
Create a new project or duplicate your live project, then build the redesign there.
Copy the new design's layers
Once the redesign is complete, open each page's Layers panel and copy theBase <div>layer. (Mac: ⌘+C, Windows: Ctrl+C)
Clear the design from your live project
Open your live project and delete any boxes you no longer need from the page.
Deleting boxes won't affect your live site until you update the site.
Paste the new design into your live project
Paste theBase <div>layer you copied. (Mac: ⌘+V / Windows: Ctrl+V)
Any components you copy over will be added to your project automatically as new components.Ungroup the pasted layer
When you paste the layer, it'll be pasted as a [Base <div>] group.
Ungroup the pasted [Base <div>] layer. (Windows: Ctrl+Shift+G, Mac: ⌘+Shift+G)
Note: About fixed-position boxes
Boxes set to Fixed position keep their settings, but they won't work unless they're placed directly under the top-level [Base] layer.
When you paste the design, any fixed-position boxes inside groups won't sit directly under the [Base] layer. Be sure to ungroup the [Base] group after pasting.
6. Adjust links and site settings as needed, then test everything in Live Preview.
7. If everything looks good, update the site to publish.