How CodeinWP Redesigned Their Entire Website With Elementor

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
⦁ Footers
⦁ 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​

The principle and reasoning are the same here.It’s just a good idea to have at least one main footer – with all your links, and then a secondary footer with minimal links, or no links at all.You can use that second one on landing pages or sales pages, where you don’t want to distract the reader with additional links apart from the main Call to Action.Again, you can create footer templates in Elementor → My Templates → Add New. Then set display conditions accordingly just as you did with the headers.

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!

What's next?

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?

About the Author

Karol K. (@carlosinho) is a blogger and writer, published author, and founder of NewInternetOrder.com

21 Responses

  1. Looks great! I am so psyched about Elementor. I rebuilt my entire website (https://flashbulbphotobooth.com) with Elementor after having just gone through a redesign 7 months ago, I couldn’t wait. Needless to say, I am definitely happy with the results. Now I tell every one of my web-design friends to switch to Elementor page builder!

    Thanks for the awesome product, and time-saving new features.

  2. Great article! Shoutout to Elementor for being the best. Thanks for linking other plugins as well. Will check these out.

  3. Hi there. Very good post.
    Just a few questions. I am user pro elementor for my web design in https:www.chosqueweb.com I customize every part of my site except categories and archive because it’s very unfamiliar interface. There is some guide for this part of the website? Thanks

    1. I am also very curious about this, maybe Astra provides something more robust to start with I guess. Why not go all in with elementor? and what about gutengberg? are they both fully integrated with gutengberg, astra and elementor?

  4. I liked the clear and precise way to explain, congratulations! Using Elementor Pro to redesign the site, standardize pages, simplify upgrade processes, aim for quality and performance is perfect. It shows me that I’m on the right track, too. Thanks for the beautiful beautiful stuff, really inspiring. I wish much success.

  5. @Karol – there is something that I didn’t understand. Even with the same category, there is another viw of the blog. What are then the conditions?

    Is it possible to tell step-by-step how you submit a blog message, with a predifined template. For example the pages woth the tweet-message?

  6. Great read.
    On our ecommerce site https://otushop.com , we are replaced Visual Composer and Mega Menu that came with theme completely with Elementor. Elementor is a great tool for building Mega Menu.
    We are slowly moving towards Header & Footer and WooCoomerce product part. That post gave a great insight on that part!

  7. I’ve been designing webs for the last 5 years but in the past 1 year, my design life has totally changed for better. Elementor has made things way better than any of there competitors. Every other day, i happen to question how life would be without these guys on the block for the past 2 years. Long story short, just a few months back, we had to work on a client project where we designed their blog from groundup using a base framework theme twentysixteen and Elementor. https://www.infinixgeek.com/. Our client couldn’t believe the outcome and how dyanmic, simple, easy and fast Elementor could take us. Bottom line, I am now redesigning my blog https://www.gotechug.com using the same exact procedure and quite alot is gona improve..
    Elementor, you have made designing webs way too easier than before.
    Kuddos

  8. I have been using Elementor for 7 projects. I am currently making mine (drop your email to be alerted of the launch : https://www.maroin.fr)

    Last month, I made a workshop with my client during 3 days we designed their website (without any graphic designer signer, juste wireframes on paperboard) on Elementor : https://chairess.org

    Elementor is very powerful to me, I do projects only Elementor, the potential is great, long life to Elementor #FacilitateWebDesign #MakeItAccessible

  9. Greeting!
    I’m Dragan Radanovic, I’m working on a web design. I’ve done 3 sites to clients with Elementor and I redesigned my blog about beekeeping and I transferred wordpress.com to my subdomain. I need to tell the Elementor team that I have the entire design process and everything else done through Android mobile phone. With a bit of experience, Elementor is great for working on Android. I have had a lot of experience on Android and it takes only a little to change some small things and you will have a platform for mobile phones. This is the link for the site and see the Elementor site which is from the beginning to the end built on Android! Elementor is the best! Hello!
    Link
    medpcelarskimagazin.mvbyte.com

  10. Thank you for sharing this. Learnt a few. I’d like to know if you used elementor for search results too? I believe you have loads of content and would need people to be able to easily access it.

Leave a Reply