This is a case study of how CodeinWP used Elementor as one of the key elements in their latest site redesign, plus takeaway lessons on how you can do the same.
Site redesigns can be stressful. Like, seriously. Even more so than building a new website from scratch. At least when you’re creating a new site, you don’t have to worry about your already existing pages, posts, custom code tweaks, and other things that can (and will) break when you press that ‘launch’ button. That’s why it’s a good idea to have some helper tools at your disposal that can minimize stress and take on some of the workload, rather than force you to figure it all out.
In other words, if you can find a tool to handle part of the work for you, you really should! There’s no reason to do everything by hand.
This is where Elementor comes into play for us.
Hi, I’m Karol. I’m part of the CodeinWP team, and I ensure that our main blog at CodeinWP.com/blog runs smoothly and has fresh content every week (hint: you should check it out).
Several weeks ago, we re-launched our site, rocking a refreshed design and some under-the-hood improvements to make the site faster, make our readers happier, and impress Google in the process (at least we hope so).
This is the story of how our new redesign was created, and why we chose Elementor to play a major role in the process. At the same time, I’ll share some tips you can use when pondering your next redesign, as well as some essential tools.
1. Aims and Why Elementor Was a Perfect Fit
The CodeinWP blog has been around for a while now, and there have been a number of challenges along the way. With over 150,000 monthly visitors, the site has had its problems – mainly performance-related issues.
Loading times, resource load, multiple request calls, all translated into a below average experience both for readers and Google.
After all, our readers seek on-point WordPress advice, so we better make our own WordPress site highly optimized, otherwise, why would anyone believe our advice, right?
So, the main goals of the redesign can be summed up by two words: performance and simplicity.
The topic of simplicity has two aspects. On the one hand, you want to make your design simple enough so that the content gets the spotlight. But on the other, you also want to make the backend functional so that writers and editors can use it freely – and don’t need to contact the developers every time they want to get something done.
Before the redesign, we used to build custom-looking pages nearly from scratch and based on custom code. Our homepage, for example, was entirely hand-made. We used custom HTML for internal pages as well (where needed). While it did the job, there was no flexibility, and we couldn’t reuse any of these elements in a straightforward way.
That is why custom-coded layouts don’t generally work for blogs that like to experiment with how they present content.
To make things truly functional, what you need is a front-end facing design/page building tool. You probably know where I’m going with this…
Elementor fits perfectly here since it democratizes web page design. In other words, everyone on the team can use it whenever they need a page that’s custom-looking. They don’t have to ask a designer to help them, but instead can go full-on DIY.
2. How to Make Elementor an Integral Part of the Design and Not an Add-On
Page builders are a great idea overall, not just Elementor, many of them. However, you can still experience some problems if you just happen to install a page builder onto your existing WordPress site.
And those problems mainly stem from your WordPress theme. Although Elementor will work with every theme, not all themes are going to let you take full advantage of its abilities.
To really make Elementor part of your design concept, you need a theme that won’t restrict what you can and can’t do in Elementor.
For instance, some common problems related to this include the inability to stretch out a should-be full-width page layout, site headers that won’t go away, themes that hijack typography, and so on.
With that in mind, here’s what we put on our to-do list:
⦁ Get a simple theme that handles all the basic stuff correctly, offers good performance, optimization, and overall structure.
⦁ Then get Elementor to add some additional flair.
This model is perfect for two reasons:
⦁ You get the theme to handle the core elements and qualities, it offers a decent code structure, optimization, web standards, etc.
⦁ You get Elementor to handle most of the visual elements, while also letting the non-dev team members take full advantage of the options.
3. How to Begin the Redesign
On the technical side of things, we used a separate staging site with duplicated content and the same set of plugins as the original site (all running on Kinsta).
Apart from that, we started completely from scratch.
After doing a lot of research and testing a few solutions, we decided to use WP Astra as the primary theme framework for the site. They boast about their lightweight structure and good out-the-box performance. Astra is also minimal in design, configurable, and does not limit what you can and cannot do regarding the final design.
First, we took care of the general settings, tuned up the typography, colors, and the other core settings of the theme.
We also made sure that all of our imported content looked good and that there were no hiccups with the plugins we were using.
Next, it was time for Elementor.
4. How to Incorporate Elementor Into Your Redesign
First things first, we didn’t partner up with Elementor and ask for custom mods or anything. We just installed the standard version of Elementor + Elementor Pro and got to work!
In simple terms, we decided to use Elementor elements/sections/blocks/templates wherever possible. All to minimize the need to design anything by hand, and thus make it easier to modify those elements later down the road.
Website design is a living thing, and you can’t hope just to build something one day and stick with it for years on end.
Therefore, it’s a good idea to single out the elements of your design that are likely to change with time, and build them in Elementor instead of creating custom template files or child themes.
All in all, we ended up using Elementor for:
⦁ Site headers
⦁ A couple of single post templates
⦁ Custom pages
4.1. Building Your Header With Elementor
Your site header is of key importance as a design element. It should be clear, present the visitor with all the essential information, and point them where to go.
But the main challenge here is that one header is rarely enough for a website.
Why not use different headers on specific pages?
And I don’t mean totally different, but even doing something like showing Menu A in the header on one page and Menu B on another is impossible with most WordPress themes. That’s why we use Elementor.
Creating a header template is simple. Just go to Elementor → My Templates → Add New and select Header from the drop-down menu.
Then, go into Display Conditions and tell Elementor where to apply that header.
As you can see, we opted to use this specific header everywhere except the homepage, for which we created another one.
4.2. Building the Footer
4.3. Single Post Templates on Steroids
Not all posts should look the same. And while your theme might allow you to have a template for a content-sidebar and another one for full-width, this is about as how far most themes go.
But this might not be enough. For instance, we knew that apart from the standard post look, we also wanted a ‘non-post’ look. Meaning, we wanted to have a single post template that looked more like a page – no author info, no publication date, no comments, a nice headline design, and no sidebars.
At the time, we were working on a now-published guide on how to start a blog, and we wanted to use that template on it.
And, spoiler alert: Elementor lets you do that. As in, you can build a completely custom-looking single post template and then use it on any number of your posts (via display conditions).
I wrote a separate post here on Elementor.com on how to build a template like that step by step. Check it out.
4.4. Using Elementor for Custom Pages
At the time of writing, we only have a handful of custom pages built with Elementor, but more will be coming soon.
⦁ Our homepage
⦁ About page
⦁ Contact page
⦁ Newsletter signup page
⦁ A couple of landing pages for guides and ebooks
Using Elementor to build custom pages is probably the most obvious thing you can do with it, but it’s also incredibly powerful. What’s great here is that, effectively you don’t need a designer just to slow you down. You can go from concept to execution all on your own. Though, I have a feeling I’m preaching to the choir here…
5. Mobile Challenges
Overall, our Elementor experience was all fine and dandy on all fronts. However, we did want to improve things on mobile.
While Elementor does a great job when it comes to the mobile controls (giving you a choice as to what you want to show on mobile and so on), we wanted to go full AMP for this version of the design. This would give us better performance on mobile, better SEO, and probably a better user experience as well.
Apart from making the site AMP as a whole, we also wanted to take the most important pieces of content and build custom AMP versions for them. We used a couple of AMP plugins to make that happen, including AMP for WP, which lets you create a whole separate look for each post/page and display it only on AMP.
In general, the topic of performance is very close to our hearts. Improving your loading times is the one relatively simple thing you can do that can have a huge impact on UX!
To that tune, we took advantage of the CodeinWP redesign and used it as a testing ground for our new image optimization tool, OptiMole. We’ve built a custom CDN infrastructure for it, and have been stress-testing it heavily on CodeinWP for the last couple of weeks.
A lot of engineering has gone into it so far, and we’ve been able to get a ~0.4s boost in load times for most pages with it enabled. It works particularly well for Chrome users since we serve images in WebP. Pretty stoked about this!
With everything ready, it was time for the launch! Nothing particularly fancy was going on during this phase. We just took our staging site, rolled it out, made sure everything worked fine, and crossed our fingers.
Overall, Elementor helped us a lot, especially when it came to speed and flexibility. It’s awesome as a design tool that can be used by anyone – writers, editors, marketers – and that everyone can produce a beautiful page that doesn’t need to be later reworked by a designer.
We like to keep our teams independent, so that everyone can work on their own projects, and don’t have to rely on members of other teams to get their tasks done. For instance, if the marketing team wants to create a page for Campaign A, they can do that themselves, and that page is going to look great thanks to Elementor.
I want to encourage you to give your teams the same freedom. Don’t build site designs that still require a designer’s work to run them on a daily basis. This will only cause delays with other projects later on – like launching marketing campaigns or custom pages/posts. You really don’t want your overworked designer to be the bottleneck for everyone.
We’d love to hear what you think of this dual approach to site redesign: good and simple theme framework + Elementor. Is Elementor a vital part of your site’s design?