Want to learn how to redesign a WordPress site?
In a redesign, you can improve your site’s user experience and visual appeal. It allows you to optimize site functionality, incorporate new features, and ensure responsiveness across devices. If done correctly, a stellar redesign can boost engagement, conversions, and brand awareness.
In this tutorial, we’ll show you how to redesign your WordPress website!
When You Should Consider Redesigning Your WordPress Site
You might be putting off your site redesign because you’re afraid it’ll take too much time or put your website in maintenance mode. However, here are a few situations where a redesign would be beneficial:
- Outdated design: If your website looks outdated, lacks modern features, or fails to meet current design standards, it may be time for a redesign. An updated and visually appealing website design can enhance your visitors’ experience and make your site more engaging and professional.
- Poor user experience: If users find it difficult to navigate your website or experience slow page load times, it can lead to a high bounce rate and decreased conversions. Redesigning your WordPress site with a focus on User Experience (UX) can help address these issues and keep your audience engaged.
- Non-responsive or mobile-unfriendly: Many people use their mobile devices to browse the internet. This means that having a responsive website that adapts to different screen sizes is crucial. If your current website is not mobile-friendly or lacks responsiveness, it may be time to redesign it to maximize accessibility.
- Branding or messaging changes: If your brand has undergone significant changes or you want to revamp your messaging, a website redesign can give you a new brand identity. Having this consistency in branding and messaging will strengthen your overall image and help you reach your target audience.
- Search Engine Optimization (SEO) improvements: Search engines frequently update their algorithms, and SEO best practices change over time. A website redesign offers an opportunity to optimize your site structure, improve page loading speed, and implement SEO-friendly elements to increase your organic traffic.
- Integration of new features: As your business evolves, you may need to add an e-commerce store, a blog, or social media feeds to your website. With a redesign, you can integrate these new features seamlessly and ensure they align with your overall design and user experience.
It’s important to note that a WordPress website redesign should be approached thoughtfully. Before embarking on a redesign project, thoroughly analyze your website’s performance, gather user feedback, and clearly define your goals and objectives. Additionally, consider consulting with a web designer or developer who specializes in WordPress to ensure you launch a successful and effective redesign.
How to Redesign a WordPress Site
Once you decide to improve your site’s design, you might not know how to go about it. Don’t worry, we’ll walk you through every step of the way!
Step 1: Install Duplicator Pro
If you’re considering a redesign, you won’t want to build an entirely new WordPress installation from scratch. Even if you’re redoing your entire website, it’s important to keep all your posts, pages, plugins, and other key details.
To avoid any data loss, you can make a copy of your live website and move it to a staging site, where you can create a new design without affecting your live users. To do this quickly and easily, you’ll need to install Duplicator. This is the best WordPress plugin for backups, migrations, and cloning:
First, select a subscription for Duplicator Pro. There is a free version available, but a premium plan can save you a lot of time when moving content to and from a staging site. Duplicator Pro comes with drag-and-drop migrations, which can help you get your redesign up and running in no time.
After you finish your purchase, copy your license key. Then, open the dashboard for your live WordPress site and install Duplicator. If you’re not sure how to do this, check out this helpful guide on how to install WordPress plugins.
Next, go to Duplicator Pro » Settings » Licensing:
Paste your license key and click the Activate button. Now you’re ready to start the redesign process!
Step 2: Create a Copy of Your Live Website
For the next step, you’ll need to create a copy (or backup) of your website. Manual backups can be hard work, but Duplicator makes it simple for beginners.
Duplicator works by packaging all of your WordPress files, themes, plugins, and database tables into a zip file. This is called a package. Once you create one, you can easily save it as a backup (in case of emergencies) or move it to an entirely new server.
First, head over to Packages » Create New:
You’ll see that Duplicator automatically named the package with your site’s title and a unique set of numbers, but you can change this if you’d like. Under Storage, select Local:
In your redesign, you might want to delete certain parts of your site. In this case, you can customize the archive file. Simply expand the Archive section and add filters to exclude unnecessary data:
To package your entire site, don’t make any changes. Then, hit Next.
Duplicator will complete a full scan of your live website. Be sure to review any notices before continuing with the package build:
After your backup is created, you can download it:
Note: If you’re planning to use a local staging environment like LocalWP, this software will often install WordPress for you. In this case, you’ll only need to download the archive file. However, for uploading your backup directly to a server with an FTP client or cPanel, be sure to save the installer.php script as well.
Step 3: Check Your Current Performance Benchmarks
As a site owner, it’s always important to maximize Search Engine Optimization (SEO). To see whether your redesigned site is affecting your traffic, you’ll need to know your current site stats.
You can easily check out your current benchmarks by installing MonsterInsights. This is a plugin that connects Google Analytics to your WordPress back-end, compiling all your performance data in a single location:
Once you add MonsterInsights to your website, find the Top Posts/Pages report. Here, you’ll see how many visitors you’re getting:
If you want to save any data from MonsterInsights, hit the Export PDF Report button. This will download a zip file with your page views, user sessions, bounce rate, and more:
By saving these statistics, you can easily see if your redesign was worth it. You’ll be able to compare analytics before and after the new design goes live.
Step 4: Build a Staging Site
When preparing for a big task like a redesign, it’s important to have a staging site. This is a cloned version of your website that you can use to test changes without affecting the functionality or appearance of your live site.
If you redesign your live website, you might accidentally publish glitches to your audience. Using a staging site, you’ll have a safe and controlled space to ensure that everything is working correctly before going live. Plus, you won’t have to put your existing website in maintenance mode as you redesign it.
You can create a staging site in a few different ways. Sometimes, your web hosting provider will automatically build a staging area for you. However, you can also easily create one yourself.
For this tutorial, we’ll be using LocalWP, which is a beginner-friendly local development software. It’ll set up and host a WordPress installation on your personal computer. Plus, it’s free to use:
To get started, be sure to download the version of LocalWP that matches your computer’s operating system. Then, add a new site by clicking on the + icon:
Next, name your staging site. If you’re a developer, feel free to set up a custom version of PHP, Apache, and MySQL. Alternatively, the Preferred option will create a basic WordPress site:
As a last step, enter a WordPress username, password, and email address. You’ll use these credentials to access the dashboard of your staging site:
Tip: You might want to host your staging site on the same server as your live website. This will ensure that there won’t be any errors when you migrate changes between the two sites. To help you do this, check out our tutorial on creating a WordPress staging site.
Step 5: Import Your Backup
After LocalWP builds your staging site, it will be a default WordPress installation. To make it look and feel the same as your live site, you can simply import your saved backup.
On your Local app, select your site and hit WP Admin. This will open the dashboard for the local site:
Here, install and activate Duplicator Pro as a plugin. Then, find the Import page and upload the archive file you saved earlier:
Duplicator will notify you when the package uploads. Click on Continue to start the installation:
On the next page, hit Launch Installer:
After this, you’ll see step-by-step instructions for deploying your site installation:
Be sure to accept the terms and notices. Then, click Next.
Finally, review the installation settings. If they look correct, hit OK:
Duplicator will then replace the default local site with an exact copy of your live site! You can use the Admin Login button to access your new dashboard.
Step 6: Build Your New Design
Now that you have a staging site, you can do a full redesign while your original website is still up. Although you could design your website with the built-in WordPress editors, these aren’t very user-friendly or flexible.
To easily design any type of website, we’d recommend using SeedProd. SeedProd is the best website builder because it comes with drag-and-drop editing, over 150 landing page templates, and even pre-built website themes:
Although SeedProd started as a landing page builder, it’s evolved to customize every part of your website. Using its theme builder, you can easily design new pages, headers, footers, and more.
If you want to take advantage of all these features, install and activate SeedProd on your local WordPress site. Then, go to SeedProd » Theme Builder » Theme Template Kits:
This will give you many different pre-designed theme kits to choose from. Rather than manually coding every page template from scratch, SeedProd can jumpstart the design process. You’ll find websites for portfolios, online businesses, blogs, and so much more:
Once you select a new theme, you’ll have templates for your home page, posts, headers, and footers. To edit any of these, click on Edit Design:
You can then use the SeedProd page builder to fully customize your theme. Feel free to drag and drop new blocks onto the page, edit fonts, update default colors, and make any other changes:
Be sure to save your changes when you’re finished. Then, publish each theme template. At the top of the page, enable the new SeedProd theme:
If you want a more in-depth guide on designing a website with SeedProd, check out this post on how to create a custom WordPress theme without code.
Step 7: Launch Your New Website
Once you’ve fully redesigned your new website, it’s time to publish your changes! With Duplicator, all you’ll need to do is create a package of the staging site. Then, download the package’s archive file.
Before you import this into your live website, consider setting a recovery point. Basically, this will save a backup of your site right before you updated its design. If you notice any critical errors that you missed in development, you can simply roll back to this backup.
To do this, build a package of your original site. Be sure to select Local as the storage location.
Continue creating the package. Once finished, use the arrow on the right-hand side to expand the package details:
Under Options, click on Recovery Point:
In the new pop-up window, select Set to Recovery Point:
Lastly, click on the new recovery icon next to your backup. This will allow you to copy your recovery URL. If you save this in a safe location, you can paste it into a browser window to instantly recover your site:
Now it’s time to import your redesign. To do this, go to the Import page and upload your staging site’s zip file. Then, Duplicator will walk you through how to import your package into the website.
Step 8: Audit Your Redesigned Site
Even if you checked for errors on your staging site, you might miss something. After making your redesign live, it’s important to thoroughly vet your website to make sure it’s looking and functioning properly.
To make sure your Search Engine Optimization (SEO) is on point, consider doing a full SEO audit. All-in-One SEO is the best SEO plugin for this because it gives you a beginner-friendly list of SEO suggestions for your website:
We’d also recommend creating a support ticket form. This way, your audience can report any bugs or 404 errors that impact their experience on your site. Using a plugin like WPForms, you can start with a support ticket template and edit the contact form to meet your specific needs:
Here are some other tasks you should perform right after a redesign:
- Check for broken links and add redirects if necessary
- Review your top-performing web pages and posts again
- Make sure any titles, headings, and meta descriptions stayed consistent before and after the migration
- Test your page loading speed
- Delete plugins that aren’t actively being used
- Review your XML sitemap and fix any errors
- Test your redesign for different browsers
After all this, you’ll have a beautiful redesign that attracts new visitors and keeps them coming back to your website again and again!
Frequently Asked Questions (FAQs)
Now let’s answer some frequently asked questions about WordPress redesigns!
How do I redesign my WordPress site without going live?
By creating a staging site, you can redesign your WordPress site without showing your changes to the public. To do this, create a copy of your live site with Duplicator Pro. Then, you can build a staging site with your hosting provider or set it up on a local server. Lastly, import your cloned site into the staging area and start secretly redesigning your site!
How do I redesign my WordPress site without losing SEO?
The best way to redesign your WordPress site without losing SEO is by making any necessary changes on a staging site. Then, use Duplicator Pro to migrate your redesigned site back to the live server. To optimize for SEO after a redesign, consider installing AIOSEO and completing the SEO audit checklist.
How do I build a new WordPress site while the old site is live?
You can build a new WordPress site on a local staging site. When you’re ready, use Duplicator Pro to create a full backup of the redesigned site. Once you import the updated site, Duplicator will automatically replace your original design with the new one without any downtime. If you updated any pages, be sure to redirect them with AIOSEO.
That’s it! You’ve learned how to redesign a WordPress site.
Do you want to protect your redesigned site from any data loss? Check out our guide on how to set up automatic backups in WordPress.
You don’t have to spend a lot of time manually moving your website to and from a staging area. Download Duplicator Pro to start using drag-and-drop migrations!