Okay, so if you’ve been following my blog since the beginning, you would have noticed that I redesigned my website. Twice.

Initially, I tried designing my site using the website builder I bought, Elegant Themes Divi. And it wasn’t pretty… I mean, there were amazing free layouts that Elegant Themes provided. But I just didn’t like it.

In the end, I purchased a premium theme. The first one was pretty but just a tad plain. Until I found this current theme by Divi Lover.

Hence, I do have a bit of experience. Here’s a step-by-step guide that will breeze you through the redesign of your WordPress website:

[Entrepreneurship Tips] [10-Step Guide] How To Redesign Your WordPress Website

Disclosure: Some of the links below are affiliate links. I will earn a small commission, at no extra cost to you, if you purchase through these links. Your support encourages me to continue blogging and help with the costs of hosting this site. Thank you!

Step 1) Save CSS

First, log into your WordPress admin panel then click on the Theme Customizer.

You should be able to see the code under Additional CSS.

If you’ve bought a theme previously or if someone styled your site before, you should see some CSS code here.

Copy this code into a document or Evernote. Or save it in the cloud, like your Google Drive.

The point is to store this CSS code securely so you can refer to it later when redesigning your website.

In fact, this was the top thing that I applauded myself for. I kept referring to this CSS document when revamping my site. Even tweaking a little here and there (using the basic CSS knowledge I’ve learned from W3Schools).

WordPress Theme Customizer - Additional CSS

Step 2) Screenshot Every Page

So this is an optional step. You don’t really have to take screenshots.

But I like doing so because I can always refer to this soft copy of my previous web design. They also help keep in mind the previous design, page layout, text format etc.

There might be some elements of the previous design that you really like. You can then duplicate them over to your new design. Thus, having these screenshots will allow you to refer to them easily (especially when the old design is erased completely).

Photo by janjf93 on Pixabay

Step 3) Always Back Up Your Site Before Changing Themes

Let me emphasize this again: Always create a backup of your site before you make any website changes.

This way, should there be a problem after you change your site design, you can always restore this backup version.

I’m currently using UpdraftPlus, which automatically backs up my site every time I update my WordPress version, plugin or theme. I also manually created a backup version right before I changed my theme.

UpdraftPlus Backup/Restore

Step 4) Stop Search Engines From Crawling Your Site

While you’re in the midst of a website revamp, it’s highly recommended that you prevent search engines from crawling your site.

One reason is that the new theme or design might include pages or layouts with placeholder text. Secondly, it might take you days or weeks to edit and check that every page is correct. And you don’t want search engines to crawl your site while it’s still in the editing phase.

You can do this simply by heading over to WordPress reading settings and disable search engine visibility by checking the ‘Discourage search engines from indexing this site’ box.

WordPress - Reading Settings Search Engine Visibility

Step 5) Put Up A Maintenance Or Under Construction Page

I highly recommend that you create a maintenance or under construction page, especially if you’re in one of these situations:

  • Your site has many pages, blog articles etc.
  • It will take a long while to revamp your website
  • Thousands of people visit your site daily

If you use Divi, you can simply search the Divi Library for the maintenance page premade layout. Remember to choose the blank page template so your top navigation bar doesn’t appear and visitors can’t view any other pages.

Elegant Themes Divi - Library Premade Layout Maintenance Blank Page Template

Besides hiding the navigation bar, you also need to include a short message that your site is down (and the expected date that the website revamp will be complete, if possible). Adding an email opt-in form to notify visitors when the website is up will ensure that you don’t miss any potential customers.

Once you’re done, replace your home page with this maintenance page.

Bear in mind to edit the WordPress reading settings and change the static homepage to the maintenance page.

WordPress - Reading Settings Homepage Maintenance Static

Step 6) Get Your New Theme

Now, you’re finally ready to get your new theme!

You can browse the free themes available in WordPress or buy a premium theme.

I recommend the latter because premium themes make your website look professional and thus, instilling trust in your customers.

You can get affordable themes from Creative Market. Plus, there are 6 freebies every week (I’ve already lost count the number of free fonts and graphics I’ve downloaded).

Creative Market - 10% Discount

I’m using the Divi theme by Elegant Themes though because I like customizing my site. WordPress themes have fixed layouts with limited options while Divi includes a visual drag and drop builder where you can customize font, color, animation and many more. Other features that I love about Divi include

  • Divi Leads: great for A/B testing where you test an element on the page (eg. headline, call-to-action button)
  • Monarch: social media plugin
  • Bloom: email opt-in plugin

I mean, just look at the pretty social sharing buttons at the bottom of this post! And that beautiful newsletter pop-up when you click on the top navigation bar! Aren’t they just stunning? (Of course, there was a bit of help since I simply edited the already gorgeous Girly theme by Divi Lover~)

Elegant Themes Divi - Visual Drag Drop Builder - Zoom Out View

Nevertheless, whether it’s a free or premium theme, just make sure that it’s consistent with the brand image you want to portray. And of course, ensure that the theme has all the functions you need.

  • Style: minimalist, elegant, modern
  • Functionality: mobile responsive, eCommerce integrations, customization features

Now, head over to WordPress themes and activate your new theme.

WordPress - Appearance Activate Theme

Step 7) Check Your Theme Settings

In addition to checking your WordPress settings, there might be exclusive settings for your new theme. Do go through each setting and edit them accordingly.

Take for instance, my Girly theme allows me to choose a preloader and the gold/rose gold/silver highlight.

Elegant Themes Divi Theme Options Girly Preloader - WordPress Theme Customizer Girly Settings Elements

I like to start redesigning my site from the broad aspects to the fine details. Where we start with big changes then move on to the small changes. These include

  • Accent Color
  • Font
  • Logo

Step 8) Edit All Your Pages

Next, edit your pages.

You can duplicate the pages first so no changes are made to the original. Then, start editing your new page.

Or you can just create a new empty page and load your new theme layout. Then, edit from there.

Exclusive Tip for Divi users: You can save the edited page as a new layout then replace your old page.

You simply have to add the layout to your Divi Library.

Elegant Themes Divi - Add To Library

Then, load that layout.

Elegant Themes Divi - Load From Library

And of course, you’re able to manage all these layouts in your Divi Library.

Elegant Themes Divi - Manage Library Layouts

Step 9) Edit CSS

Remember that CSS code I told you to save earlier?

Well, now is the time to take it out.

CSS helps to style your content. You can do things like

  • Changing your footer link color so it’s not the same as your accent color
  • Customizing styles for the various headings (h1-h6)

Since I’m using Divi already where I can customize almost everything, I didn’t use much CSS styling.

CSS is usually the last few things I edit during a website revamp. It’s only when settings and editing of pages still don’t let me get the style I want that I resort to CSS. Plus, it requires some technical skills and knowledge. Like I mentioned earlier, you can learn from W3Schools or install additional plugins like Divi Toolbox to make your life easier (where you can achieve awesome effects of CSS, PHP and Javascript without writing a line of code!).

WordPress Theme Customizer - Additional CSS

Step 10) Announce Your Redesigned Website

After making sure that every page appears as the way you want it to be, you can replace the maintenance page with your home page. Where visitors can navigate to other pages through the top navigation bar.

Again, remember to edit the WordPress reading settings. You’ll have to change the static home page and enable search engine visibility by unchecking the ‘Discourage search engines from indexing this site’ box.

WordPress - Reading Settings Homepage Static Search Engine Visibility

Finally, you can now announce your revamped site to your fans and customers. Do a shout-out on all social media channels so everyone knows!

On top of this announcement, you can write a blog post about it. Like the reason behind the website revamp, the major changes etc.

Or you can ask for feedback about how visitors feel about the new layout, how is their experience navigating the site. This way, you can quickly rectify any glaring errors that you might have missed out.

Now It’s Your Turn

What other steps did you take when redesigning your site? Do you have any website revamp tips? Like things to take note of and things to avoid etc.

 

Copyright © 2017-2019
Nicole C. W. All Rights Reserved.

Want to receive updates?

Join My Newsletter Now

Be the first to know about hot new releases, tips from my blog and more.

Pin It on Pinterest

Share This