Manually Re-Styling Your Site

In this section we'll discuss manually re-styling your site without the use of a new template.

This is good for lightweight "freshening" of your design, as well as just refactoring an older design that may be a bit messy on its use of classes and variables.

In this discussion we're going to assume the restyling is fairly substantial, and that it involves a complete rethink of your use of classes, sub-classes, global classes, components and variables.

Approach

We'll approach this logistically by using Webflow's password-protected folders to create and test our new pages within the existing site.

Password-protected folders offer;

• An easy place that you can build you can build your new pages securely, without interfering with your ongoing site publishing needs.
• An easy way to test those published pages on other browsers, mobile devices, etc, as long as you have the password.
• An easy way for your team to review page designs, once you give them the link and the password.

Pages within password-protected folders do not appear in the automatically-generated sitemap, and cannot be indexed by search engines.

Page Drafting

‍

Drafting a page takes it offline so that it does not publish at all. This is used for legacy pages that you are replacing, during the final stages of the replacement process.

If you prefer the convenience of drag-drop and folders, you can safely use that same technique for the legacy pages as well, with a different password-protected folder e.g. named legacy or obsolete.

‍

Once they're tested and reviewed you'll swap your new pages into the same path that your existing page is in, and update all of your links to point to it ( details below ).

Skills Needed

Webflow styling & responsiveness

Webflow's styling system can be complex to grasp efficiently, and new designers often get hung up on the style selector, subclasses, global classes, class states, and breakpoints.

If you're not very experienced with those yet I'd definitely recommend that you prepare with the Webflow university courses, focusing on;

• classes, sub-classes, and global classes
• responsive design
• variables
• components and component variants
• localization ( if applicable )

Also recommend that you watch some of Timothy Ricks videos around using classes effectively, he has an excellent perspective on how to get the most out of Webflow's styling systems.

Webflow staging

Make certain you understand Webflow's publishing controls, and how to publish to staging specifically. This will matter for some portions of testing during the re-styling process.

Tools Needed

No tools are required beyond Webflow itself, however we highly recommend;

• Finsweet's chrome extension. During this process you're going to be doing a lot of class work.  Finsweet's Chrome extension has some very useful features here.
• Multiple browsers and mobile devices, or a browser-testing tool like BrowserStack.

Work Preparation

Before you do anything else;

• Make a TEST clone of your site that you can experiment with without affecting your production site
• Make a BACKUP clone that you don't touch- it's just there as a reference when you need it.

Then in your live project, create two password-protected folders, e.g.;

• New Pages /new as the place where you'll build and test your new pages before deploying them.
• Old Pages /old as the place to move your old pages once you replace them.

Make your password easy to remember, it's not as much of a security mechanism as it is a convenient way to keep those pages outside of the publicly visible site content, while keeping them accessible to the team for testing.

Process

There is nothing really complex to a site restyling, but I'd approach it this way;

Create & Test your Style Guide

1. Create your style guide, password-protected at /style-guide
2. Define sections, CTAs, testimonial blocks, contact forms, etc all of the things you want to define styling for but also full sections that can be copy-pasted into a page you're rebuilding to streamline the restyling process.
3. Test your style guide page on Chrome, Safari, and various mobile phones to make sure you've covered all of the bases regarding responsiveness and device behavior.

Begin Restyling your Static Pages

1. Restyle your nav ( all pages component )
2. Restyle your footer ( all pages component )
3. Restyle a smaller page, like About
4. Restyle a forms page, like Contact
5. Continue restyling pages so you can battle-test your style guide, and ensure your responsiveness, class work etc work the way you want.
6. Restyle the home page

When each page is completed, you'll bring it into production. See the Replacing a Static Page discussion below.

Begin Restyling your Collection Pages

1. Restyle your collection pages
2. Restyle any ecommerce pages

Collection pages cannot be cloned and swapped in the same way that static pages can. Instead, you'll need to copy-paste sections into the page and then re-design them directly in the collection page itself.

I'd recommend you do one collection page at a time to minimize the impact.

Use staging to publish changes for browser & device testing, and for review & approval by the team.

Final Cleanup

When you're completely done, make sure to permanently delete any old pages at this point as well, and then run clean unused classes to get rid of anything you no longer need.

Tips

Replacing a Static Page

Webflow does not have a "replace page X with page Y" feature.  If you just change the page path e.g. /old/about, and then draft it, all of your links to that page will break.

They'll still be pointing to that legacy page, and hit your password protection screen for the folder, or show a 404 now that it's drafted.

Once you're ready to publish a page;

• Drag the legacy page into your password-protected Old Pages folder
  
  • If Webflow presents an option, do NOT create the redirect
• Drag new new page from your New Pages folder into the folder it belongs. Update the slug if necessary so that it matches the legacy page.
• Update any nav links, CTA and button links etc to point to the new page.
  
  • You do not need to worry about rich text like blogs or press releases, those links are not auto-updated by a page slug change.  
• Publish to staging.  Test your links and verify there are no interfering redirects.
• Publish to production.

‍

‍