Four Methods to Redesign Your Live Studio Site
For those already using Studio, here are four methods to update your website. The methods introduced in this article are examples. Please consider them based on your site's situation.
1. Redesign by Switching Between New and Old Projects
This method involves building the redesigned site in a new project and then setting the old project's domain to the new project. Duplicate the live project and build the redesigned site in a separate project. Once the redesigned site is ready, remove the domain from the old project, register the same domain in the new project, and publish the site.
Using a Custom Domain (Paid Plan)
1. Downgrade the old project plan.
2. Upgrade the new project within the validity period of the old project (consider doing this the day before the expiration to minimize overlapping charges).
3. Disconnect the custom domain from the old project.
4. Set the custom domain in the new project.
Using a studio.site Domain
1. Unpublish the old project and click "×" to clear the domain name.
2. In the new project's publishing settings, enter the previously cleared domain name and publish.
Note:
There will be unavoidable downtime between the domain removal from the old project and reconnection in the new project.
You cannot transfer or carry over a paid plan to the new project. Depending on the timing of the contract, there may be an overlap in the plan period.
Project duplication is available for accounts with owner privileges.
All Apps integration information needs to be transferred manually.
2. Directly Edit the Site to Redesign
Directly edit each page within the project and publish the site once preparations are complete. Changes made in the editor will not be reflected on the live site until the site is updated. This method avoids downtime and allows continued use of CMS data and Apps settings. However, you cannot update the site until the redesign is fully completed. This method is recommended for small sites that can be completed quickly.
3. Create and Replace New Pages for the Redesign
Create new pages for the redesign within the project and replace them when ready. This method is recommended for large sites where the redesign takes time.
1. Add or duplicate pages for the redesign and set them to private.
- Note: Page-level private settings are only available in paid plan projects.
2. Change the paths or delete the currently published pages once the redesign pages are ready.
3. Change the paths of the redesign pages to their official URLs.
- If a popup appears, select "Update" with the checkbox checked.
4. Verify the functionality of site links, etc., in live preview.
5. Change the publication settings of each page to "Everyone" and update the site.
For Free plans, you can use the noindex setting to prevent pages from appearing in search results. The noindex setting allows the page URL to be accessible directly. Therefore, it is recommended to change the page path to an unpredictable string of characters.
- Note: Simple paths like /1 or /2 may allow pages to be viewed through direct links.
- Remember to turn on/off the noindex setting as needed.
Note:
Be sure to switch the publication settings correctly when publishing the site.
To reflect changes on the live site, click "Update" in the publication settings panel.
4. Redesign by Copying and Pasting Entire Pages
Create the redesign in a separate project and then copy and paste the design. This method is only effective for sites not using CMS.
Note:
CMS articles and properties cannot be copied and transferred. Please create them anew.
After pasting, remove the <div> Base by ungrouping (Win: Ctrl+Shift+G, Mac: ⌘+Shift+G).
Copying and pasting symbols will add them as new symbols in the project automatically.
1. Create a new project or duplicate the live project and create the redesign in the new project.
2. After creating the redesign, copy the <div> Base layer from the layer panel of each page (Mac: ⌘+C, Windows: Ctrl+C).
3. Move to the live project, delete unnecessary boxes on the page, and paste the copied <div> Base layer (Mac: ⌘+V, Windows: Ctrl+V) to transfer.
4. Reconfigure links and site settings as needed, and verify functionality in live preview.
5. If there are no issues, update and publish the site.