Introducing New Remote Restores For More Accessible Cloud Backups
Are you securing your site backups in the cloud? You'll need an easy way to restore them. Our new features…
Introducing New Remote Restores For More Accessible Cloud Backups
Joella Dunn
Joella Dunn
John Turner
John Turner
Are you ready to give your WordPress site a makeover?
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 redesign can boost engagement, conversions, and brand awareness.
In this tutorial, we’ll show you how to redesign your WordPress website!
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.
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.
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.
Many people use their mobile devices to browse the internet. This means it’s crucial to have a responsive website that adapts to different screen sizes. If your current website is not mobile-friendly or lacks responsiveness, it may be time to redesign it to maximize accessibility.
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 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.
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.
Later on, we’ll show you how to completely redesign your WordPress site. However, there are a few steps you should take beforehand.
Before redesigning your website, consider its current design. You’ll want to be aware of its good features, as well as anything you’d like to improve.
Be sure to note what you like about your original website. As you go through the redesign, you’ll want to keep these features and functionality.
But, considering its weak areas is important for a good redesign. By fixing poor layouts and color palettes, you’ll have a website that performs well and is pleasing to look at.
To see whether a redesign was effective, 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.
Once you know your performance benchmarks, you can set goals for the redesign.
With a good redesign, you can:
You could also try out a rebrand with new colors, logos, or layouts. Be sure to record your performance benchmarks before and after the redesign. These metrics help you decide if the redesign was successful or not.
Finally, you’ll need to decide what your budget will be for the project. Some basic costs for a redesign include purchasing a new theme or hiring a professional web designer.
If you want to save money for other areas of your business, we’d recommend doing your redesign yourself. With a good theme builder, you won’t have to have any coding skills to build your new 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!
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.
The best tool for this job is Duplicator. This WordPress plugin is a powerhouse 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.
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!
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 a package, 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 uncheck any components you don’t want included:
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:
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.
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:
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.
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:
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 disaster 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, click on the blue house icon:
Hit Set Disaster Recovery:
At this point, either copy the recovery link or download the launcher file. If you save these in a safe location, you can use them 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.
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:
After all this, you’ll have a beautiful redesign that attracts new visitors and keeps them coming back to your website again and again!
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!
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.
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.
If you’re using WordPress.com, go to Settings » General and click on Reset your site. For WordPress.org, you can install the WP Reset plugin, which will delete your posts, pages, comments, users, custom post types, and custom database tables. However, we’d recommend rolling back your site with Duplicator Pro to avoid completely losing your data.
That’s it! You’ve learned how to redesign a WordPress site.
While you’re here, you may like these WordPress tutorials and plugin reviews:
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!
Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.
