Raise your hand if you have ever owned a website built a few years ago, using a theme that wasn’t all that great to begin with, but is now *really* showing its age. It is buggy and the developer hasn’t kept up with the changing WordPress tides. You feel stuck with some design decisions you made long ago, and you really wish you could start over, but that feels like a chore that’s too big to deal with.
That’s how I was feeling with my personal blog, DonnaCavalier.com.
I wanted the freedom to use the theme I’ve come to love (GeneratePress) and the page builder I now adore (Elementor). I longed to be able to have more control over everything, without feeling stuck with old decisions. I didn’t want to completely change the design. I wanted to keep the same brand concept, but the site needed some changes.
Note: You can assume that links in this post, or any post, may be affiliate links, which generate a small commission for me when purchases are made through the link. If you prefer, you can always search for the companies I link to, rather than clicking on the links here.
I put off tackling the rebuild for a while because it seemed like a task I didn’t really have time for. But recently, I was wanting to try out some new Elementor features, and thought, hey, why not try them out on DonnaCavalier.com? Seemed like a good time to tackle that project. So I did.
Here’s how it went.
Step One – Staging Subdomain ~ 5 minutes
I headed off to my site’s cPanel to create a subdomain and new database for the development of the new site.
Step Two – Clone Live Site to Staging Site ~ 5 minutes
I logged into my ManageWP account, and clicked on the Clone button from my site’s backup section. This wasn’t strictly necessary, but while I was “trying new things”, I decided to try out ManageWP’s clone feature. It’s been around for a while, but I’d never used it before. I’m not sure why I was nervous about using it this time. I mean, what could go wrong? I have tons of backups, and yet, I was jittery. I clicked the button, filled in the ftp and database login information in the form, and just like that, I had a clone of my live site on the new staging subdomain I’d created in step 1. Yippee!
Step Three – Install Elementor and GeneratePress ~ 5 minutes
Step Four – Color Palette ~ 5 minutes
I jumped into the Customizer and realized I needed to add one more plugin to the mix. (Not strictly necessary, but Central Color Palette allows me to customize the colors that show up in the color pickers that show up everywhere in both Elementor and GeneratePress, in the Customizer, etc). So I got out of Customizer, installed Central Color Palette, told it which colors to show in all the color pickers, and then jumped back into Customizer to continue.
Step Five – Customizer Tweaks ~ 20 minutes
I won’t go into all the details of everything I did within the customizer, but it basically went something like this. I set the layout to one container and adjusted its width. I updated the font and color options for the body and headings, and checked all the other options to see if I was missing anything. A few tweaks later, and I was ready for the next step. A quick note: These tweaks were quick and easy because GeneratePress Premium has a wonderful set of Customizer options. Otherwise, those same tweaks would have taken significantly longer.
Step Six – Design Header and Footer ~ 7 minutes
The motivation for doing the redesign that day was to try out Elementor‘s new features, so I started with the first thing I was excited about – designing headers and footers via Elementor. I jumped into My Templates, chose an existing header demo block that looked somewhat similar to what I needed, spent a couple of minutes adjusting it, and bam…header done. With that success, I rolled right into designing the footer, using the same process, and about five minutes later, I had an Elementor-designed site header and footer that I could easily redesign as needed.
Step Seven – Design The Archive Pages ~ 10 minutes
With those new features behind me, the next one was probably the feature I was most excited about. I wanted to be able to change the way my blog archive (and other archives) looked. The live site had a straight vertical layout just like you’d expect from a WordPress blog archive of old. I wanted to use a card-style layout, so I opened up My Templates in Elementor, chose the Blog Archive layout template, made a few style decisions, and within minutes, I had the archive layout of my dreams. Wow! I was beyond excited at this point.
Step Eight – Design The Single Post Layout ~ 60 minutes
It was time to design the Single Post layout. Once again, I opened up My Templates and chose the Single Post type. Within seconds, I had a nice-looking layout. I realized I’d done away with my blog sidebar, by choice, and now needed to figure out what to do with some things I wanted to display, just not to the side of the content. I knew I wanted to show recent and popular posts below posts, but after playing around with various options, I decided to do something completely different. Something wild, bold, and frankly, risky. I chose to show ALL posts, separated out into two columns. In the first column would be thumbnails and titles of what I call my “lifestyle” posts, which are the most popular. In the second column would be thumbnails and titles of my “meal kit reviews”, which include posts like my Blue Apron vs. Home Chef vs. HelloFresh review. It’s a lot of stuff…and maybe it’s a terrible idea. Perhaps people will hate seeing all of that under each post. But… maybe it might be something different, something compelling. Who knows…it’s an experiment. I also threw in a newsletter subscription link and a suggestion for people to click through to my wife’s woodcraft art site. Each of these were just sections I added to the single post layout. It took a while for me to finish this part, but only because I was making decisions, changing my mind, trying out various things, etc. Still, it hadn’t taken more than an hour, if that.
Step Nine – Recreate The Home Page Design ~ 60 minutes
Now for the “hard part”. It was time to recreate the home page. Of course, it wasn’t hard at all, as it turned out. Really, it was just three sections. The large hero image at the top, the 4-column “faces” section under that, and the latest posts section at the bottom. I played with various options for each of them, so by the time I finished tweaking each section, about an hour had gone by.
Step Ten – Clone Staging Site To Live Site ~ 5 minutes
Basically at this point, I was done and ready to make it live. If you recall, I was nervous when I cloned the live site to the staging site. Now imagine how nervous I was to do the reverse. I hovered my finger over the staging site’s clone button for quite a while. Finally, I got the courage, and pressed the button. Since I was cloning to a site that already existed in my ManageWP account, I didn’t even need to enter ftp and database info. Just one click, holding my breath for a minute, and bam. My new redesigned site was live!
Step Eleven – Later Tweaks ~ 15 minutes
Over the next couple of days, I tweaked a few colors and settings here and there, and added a nice 404 page using another Elementor section template, but none of that took much time, really.
Total Time ~ 3.5 Hours
Of course, although it only took a few hours for me to achieve this entire redesign, keep in mind that I am already familiar with how GeneratePress and Elementor work. A first-time newb would require a lot of stops and starts as she figured out the various processes. If you are new to Elementor and/or GeneratePress, but you want to do this kind quick redesign of a live site, then I suggest giving yourself some extra time for learning and practicing with both GeneratePress and Elementor. The learning curves are small, but they do exist.
Below are screenshots of the old and new versions of the site. Whether anyone actually likes the design is one thing, but that’s a reflection of my design choices. The fact that I could so easily and quickly achieve what I wanted is a hugely positive reflection on the GeneratePress theme and Elementor‘s fantastic page builder. One thing to note: none of this would have been possible without the Premium and Pro versions of each. Luckily, it doesn’t cost much to acquire them, but it’s worth noting that the free versions – while great – don’t have what’s needed to do what I just did, in such a short amount of time.
Screenshot of the old Home Page
Screenshot of the new Home Page
Screenshot of the old Blog Archives Page
Screenshot of the new Blog Archives Page
Screenshot of the old Single Post Page
Screenshot of the new Single Post Page