List Of Contents
If I am going to write one blog post this year, it’s most certainly going to be this case study.
In just 2 years, Elementor page builder has got over a million users not only visual designers but also experienced developers.
In brief: If you wish to know how to make website with Elementor in your next web design project, this study is for you.
As of writing, Elementor has got itself over 1 million active installations and an average of 4.8 out of 5 stars rating based on over 1000 reviews.
That aside, I’m glad to have been one of the early adopters of Elementor page builder using the free Elementor themes and free Elementor templates.
Based on the experience I have from using Visual Composer and Divi, I found Elementor convincing to give a try. And guess what, my design life has never turned back.
So this isn’t an Elementor vs Divi or an Elementor pro vs Beaver builder case study.
Today, I have designed and redesigned over 10 websites using Elementor page builder and in this case study, I want to show you around.
Please note that I used a couple of features from Elementor Pro but even without them, you can literally build anything with this tool.
To be more specific
You can design your entire WordPress website with Elementor.
Just like I did here:
I simply installed the WordPress twenty sixteen theme and built everything else from the ground up based on my sketches.
Yes! you don’t need to know any line of code.
Elementor is a visual drag and drop WordPress page/theme builder plugin.
You can use it to design WordPress websites literally from zero without writing or knowing to code.
We call it Visual because;
As you design, you see exactly the outcome and what everyone else will. I mean, a live visual builder!
And its drag and drop because;
You can simply drag elements from one place and drop them anywhere. Elements can include, opt-in boxes, sections, columns, images, text boxes etc.
Lastly, Elementor is completely free and licensed under the General Public Licence. (Open source).
Let me shade some light on this. Elementor can be greatly used as a page builder.
You can incorporate Elementor templates, sections, elementor addons into your existing theme or design and have it work like charm.
Elementor makes it really easy to integrate it with just any other page you have.
But also, we need to know that you can use
Just like I used it on this blog, I created literally everything using this amazing tool.
When a friend saw it at first sight after launching, he asked which theme I used. He insisted that I’d bought a theme.
To be precise, today, my blog looks like just another theme. But guess what.
It’s sited on a WordPress theme just as I mentioned earlier and then built everything using Elementor.
Say like all layouts (pages, posts, archives), header, footer, widgets area and so on.
look at the header
and the blog post template
So, that’s why I would not only say Elementor is a page builder but another great tool to “build themes” without knowing to code.
So, let’s dive straight in.
For easier reading and access to specific areas of your interest, I have arranged this study in 7 chapters.
Each will focus on a major study in this article.
And here we go..
In this chapter, I’m basically going to share with you the reasons I decided to redesign this blog using the Elementor plugin from the ground up.
What I wanted to achieve?, How I wanted to achieve it?, How much time I had to spend versus my budget
I thought sharing with you these will illustrate the bigger picture as to why of all page builders, I ran to Elementor and amazing of all, why NOT buying just another blog theme at $49?
So, let’s go..
Minimalist design has been there like forever but just came trendy of recent due to success in material design and flat design.
With a minimalist design, elements such as sliders, animations, social media widgets or any flashy features are out.
So, one has to concentrate on functionally, brand awareness, color blends, typography, content layout among others.
Most importantly, the simplicity and being straight to the point is what I want most about this design model.
Obviously, my sketches aided a lot in the process and they guided and kept me on track during the whole process.
By following my causally made sketches, I wanted an easy to use, simple but yet very effective WordPress page builder plugin that could aid me in the whole process.
Personally, I don’t write code and so I wanted to have a tool that could enable me to design visually and effectively have the desired output.
The time and money issue is something I don’t want to skip.
I estimated to accomplish the whole redesign process in no more than 25 days working between 7-8 hours a day.
And guess what, I could put everything together within 15 days and I had to go 9-10 hours on some days. Regardless, I got it fixed.
As a digital creative designer, I wouldn’t charge a client who wanted the same quality of work for less than $1800. If per hour I charge $15 and worked a total of 120 hours on this project.
So, considering if I would invest my time and save minimum $1800 or hope out and search for a WordPress web designer on Upwork or Elance who would charge me not less than $20 an hour and would take minimum 150 hours to have everything fixed.
That would cost you not less than $3000.
So, grabbing a pro version of Elementor and work yourself down 120 hours is a great money saver.
After having reviewed and used Elementor page builder plugin on more than 10 websites for clients, I got so convinced to use it on my own blog.
Just 3 unique things I considered
Clean code: I have demonstrated with Elementor by installing it on a website, designing everything up and running, then I delete the Elementor plugin.
The amazing thing is, it leaves all your content on the page (not visually appealing) since the plugin goes off with the CSS but the good thing is, you don’t lose content upon deleting it.
However, Elementor doesn’t leave any dirty code within your content and pages like shortcodes. I have experienced this with other page builder plugins like Divi.
Inline editing: Real live inline editing was brought to life with this page builder plugin. This saves you the time of moving to and fro the content/section elements to select one in order to edit.
With inline editing, you just click on the text or element, and there you go…
Price: Elementor is 100% free and available to everyone anywhere using WordPress. Elementor Pro cost starts at $49.
And with the Elementor free version, there are already plenty of free add-ons that can help you extend it just within the WordPress repo.
In case you’re short of budget, those can be great time and money savers yet staying within your budget.
With Elementor Pro version, you’ll have access to updates and support just in case there are issues with the plugin itself or just compatibility issues with themes and other plugins.
Lastly, there is no blog theme out there that could have enabled me to have the customization I wanted and all that I achieved on this redesign mission.
Even if it would have been there, placing it head to head with Elementor, I would still go Elementor.
In this chapter, I’ll take you around some of the tweaks when designing with Elementor WordPress plugin as your page or theme builder.
I will show you the available tools in the elements library that can enable you to create just anything without code, from creating forms, (contact and opt-in), spacers, Google maps, creating portfolios etc.
First and foremost,
No Coding Skills: If you’re considering to use Elementor plugin to design your WordPress website unless otherwise, you will 100% not need any coding skills. But also, those with coding skills, you can further customize Elementor templates to your own liking.
Elementor has a rich high-end design and all code is compact and optimized for all devices.
Live Drag and Drop: Elementor page builder has gone an extra mile to bring live design into the drag and drop page builder industry.
Elementor makes it extremely easy to move elements around the canvas with no extra effort or experience. Just do as you see.
With the most intuitive and fast editor, you can customize just anything at your disposal.
Edit in Mobile View: I loved this possibility especially when creating the menu you see at the top of this blog.
The mobile view enables you to tweak anything while still in the mobile version of the same features you’re editing / designing.
Breakpoints: You’ve probably designed sites but you want certain features to break when a visitor uses a different device (tablet or mobile). Well, Elementor brings you the custom breakpoint feature that makes this really easy and doable.
Create & Assign Widgets: I managed to create and customize all the widgets on this blog to suit my desire and as earlier made on the sketches.
Also, with Elementor, you can choose from a number of widgets in the elements library, drag and place them anywhere within the canvas.
Template Library: With the current version of Elementor Pro (V2.1.7), there are over 300 professionally designed templates crafted for use. Though with the free version, you’re limited to a number of them.
Personally, if I fell in love with an Elementor pro template, I would redo it still using Elementor itself. Yes, you can create just anything.
Media Library: If you’re that person with love for image galleries, sliders, lightboxes, all this is within Elementor.
Just to take a look at the font awesome icons, you can simply import any icon within Elementor icon widgets. I have used a couple of them on my other client websites.
Forms: If you’re thinking of how you’ll work around with contact forms, subscription forms etc. Elementor makes it simple to add forms that your visitors could use to contact or subscribe on your website.
You’re not only limited to opt-in forms and contact forms, you also have access to a number of other forms.
Like the login forms which you can easily assign to your WordPress users to use via a widget and adding advanced form fields.
And with Honeypot, you are able to prevent spam on any of the forms you create.
Integrations: Elementor comes with a number of options that enable you to integrate with some of the available autoresponders like MailChimp.
You can also use Elementor to integrate with donReach to easily find out the total social shares of your page.
Integrate with Facebook SDK to receive and manage Facebook comments as they come in.
On top of Honneypot, Elementor also enables you to easily integrate with reCaptcha to easily verify form fields and further reduce spammy visitors and bots.
You’re able to integrate with just anything else like, Drip, ActiveCampaign, GetResponse, ConvertKit or Adobe TypeKit to add your Adobe TypeKit key and get all your favorite fonts in Elementor.
In this section, I will share with you how my blog looked before and what I wanted to achieve after the whole journey with Elementor.
I will take you through the layout, design, site speed, security, mobile optimization and the general blog appearance before. And how I wanted those features to be like on the redesigned version.
How my blog layout first looked liked when I launched it in may 2017 with LiteMag theme.
and the archives
and the footer
Then later, I switched to Larus theme, looked liked this..
the widget and footer liked this
But with that, I wasn’t comfortable. I wanted to have a more simplistic design.
But hey, did I mention that I am a minimalist design lover. Yes, I wanted to have an on-point but yet simple layout.
I wanted to have minimal content areas, widget areas but yet very effective, responsive and visible on all devices.
My blog post sketch can prove this;
Talking about design, color, typography. These are some of the major things that when my readers see the newly relaunched blog design, love the most.
With my two old themes, as a non-developer, I couldn’t switch the font faces, font sizes. Let it be the headers, posts or widgets.
I completely had no ability to make the changes I imagined. 🙁
And about the colors,
Both themes would limit me to a maximum of four elements to switch colors; Header/menu color, footer colors, Heading colors and slider colors.
Yes, but I wanted to have a customized color lets say, on one widget talking about my skill set.
I wanted also to have a hire me button somewhere with a visually stunning color.
Just like this..
All this wasn’t possible with the ‘themes’..
With Elementor, I knew I had the possibility to literally do anything anywhere. Either adding features within the header or footer.
Also, creating and customizing widgets, Elementor makes it easy as taking a cup of coffee.
Besides speed being one of Google’s ranking factors, one easily looses out to readers when opening a page that takes forever.
Infact, according to a study by Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.
For all the time before, I did my best to optimize images, javacript files, css, page cache, used a CDN but still, my page speed was way above 3 seconds.
But I knew one thing.
My ‘themes’ could be the ones leading to the low page speed issue.
And I knew that if I could have a way to customize my blog on top of any WordPress developed theme, things would be better.
After redesigining everything in Elementor, switched to the WordPress twenty sixteen theme,
Boom… without any further optimization, site page speed sky rocketed to
Yes, see the site fully loaded time (2.6s from 4.4s), total page size, total requests?
And now, after I did some bit of optimization like switching my caching plugin, regeneration of thumbnails etc.
Site speed went way lower and better. Now at 1.5s.
Also, reduced the page size and page requests.
One of the major concern by bloggers and other online publishers is the security of the theme, hosting provider and…
My previous theme developer isn’t the Nick Roach of Elegant themes. So, I was always 50/50 and not sure if there aren’t any backdoors right within the themes I was running on this blog.
Yes, I purchase my themes at ThemeForest but who knows if there are ‘codes lines’ sending link juice to the developer site or those in their network.
Anyway, my best resort was to use an accredited theme and author. And a theme developed by WordPress themselves was the first priority.
It would be 99.9% secure and would run on my blog just as intended. With free updates, awesome resource and support center.
Wondering if WordPress is secure? Read this blog by Mark Maunder at WordFence Security.
Now you see how I came to choose the WordPress twenty sixteen theme. Maybe..
And yes, Elementor page builder not only has clean and compact code but it’s also secure.
According to Jetpack by WordPress,
See Jetpack’s vulnerability report here.
You may also like reading my other guide to secure a WordPress website using cloudflare free ssl.
And this means that Google now bases what it places in the search index based on a mobile version of a website. While they used to index the desktop version, the switch was made because more searchers now come from mobile devices.
So to better the user experience, Google decided to prioritize mobile results.
Actually, over 70% of my readers use mobile.
See what google analytics says
It is from this that one of my core considerations was to have a 100% fully mobile optimized blog.
Both the WordPress twentysixteen theme and Elementor are 100% mobile responsive.
And after work, this is what I got
Just like any other lad out there, step by step, I am building a personal brand in the digital media field. Brand awareness is the level of consumer consciousness of a company or a persona.
See Neil Patel, one of the digital marketing gurus I know. One can easily associate him with what he does and his brand.
And so, building my blog from the ground up and maintaining an active and responsible role is one thing I know will get me and you there.
Using Elementor page builder WordPress plugin made me get into the early stages of realizing this.
Kudos to Elementor
Note: There is a mistake I intended. When I decided not to make a backup copy of the blog and redesigned every feature as the site was live. However, most of the features were saved in draft mode. From pages, single post template, archives, footer, header.
Till the testing time came. I enabled Elementor maintenance mode for about 5 hours to test out everything I had rolled roll out.
In this section, I take you through every step in my workflow creating each and every element and section.
But first, I will show you how I made my sketches, how I created the header, created the footer, created pages with Elementor, created post template and archives.
Each topic will detail how I made up every element to match my sketch and how I tweaked some elements to suit my liking.
After deciding to redesign this whole blog, from researching which tools to use, just like Elementor and the theme, I decided to draw sketches that would guide me throughout the process.
One disadvantage of designing or redesigning without having a sketch is that we tend to spend alot of time tweaking things here and there simply because we lack a point of direction.
See my home and about page sketches
Archives and blog post sketch templates
So, with sketches, they helped me save up to about 10 hours of the total working time.
The two most amazing features that come with Elementor plugin is the ability for you to create custom headers and footers.
Whether you decide to select a header element from the library or just creating one from scratch.
Elementor makes it extremely easy to create, customize and assign display settings to it.
Just within the header, you can add or play with a number of elements. From the site logo, menus, columns, and sections.
You’re also able to assign settings right within the header like padding and margins.
Just like headers, you can literally do unlimited customization when creating footers with Elementor.
There are also footer templates right within the Elementor library.
You can also assign specific actions and functions to your footer.
Let’s say, you want one footer to appear at the bottom of blog posts and a different footer to appear at the bottom of pages.
It all goes to how far your imagination can go.
See what I could create
Just from the WordPress dashboard, you can select or create pages.
Thereafter, you will have to select the button edit with Elementor. Thereafter, select a canvas under the settings.
Then you’re good to go.
There are plenty of page templates right within the Elementor library.
You can choose from a variety of page template themes like home page, one page, about pages, service pages, contact pages etc.
You’re able to add sections to the page or you can also create everything just from a blank canvas.
You’re also able to import a page template you created already somewhere else and then tweak it.
There is nothing that Elementor page builder plugin made easy like creating single post templates or call them blog post templates.
This is one of the most amazing features I love about this tool
You can actually have your site running with everything just as the theme developer made it to be. But then, you can decide to only tweak the post Elementor templates.
Also, you’re in a position to create post templates that show different layouts for a category or author. Name it.
Posts / single templates can be in different formats. From full width, wide to boxed or custom size.
Elementor also comes with a number of single post templates right within the Elementor library too.
Probably you’ve been wondering if you’re able to create archive templates right within Elementor.
Yes. You have options to use a skin. Say, between classic or cards.
I personally fell in love with the cards.
You can customize everything from featured image sizes, meta descriptions, columns, excerpts, metadata etc..
You can select how many pages should be shown and in a specific format. Archive title sizes and colors or even, how many posts to show on the archive page. etc
Literally, anything you can imagine.
One issue I found with archives was the fact that I am only limited to two skin layouts. (classic or card) Elementor can offer little more than that.
Creating custom widgets has always been my dream come true. With Elementor, you can easily create widgets and assign them to widget areas.
You can select a widget from the elements library and customize it easily.
Also, not forgetting about the default WordPress or Jetpack widgets that come with the theme or plugins.
With Elementor, you’re in full capacity to customize them to your taste.
Elementor page builder offers a CSS customization feature (box) that makes it simple and easy.
Yes, I have to admit that at this point in my redesign journey, I had to touch some CSS code.
I wanted to use the JetPack subscription box but didn’t like the way it appeared with its default fonts, color, padding, and layout.
So, I had to change the box styling (color, fonts, padding) and size. Just to match it with my design and layout.
So, I had to use the CSS feature to style the subscription box to fit my taste.
Besides, it could also work just as it was or by switching it with another Elementor widget that serves the same purpose.
I wish not to close writing this case study without sharing my favorite tools and hacks that made my work way easier than the earlier versions of Elementor.
In this chapter, I will show you some of my Elementor picks like the context menu, inline formatting options, undo, redo and revision options, creating and reusing Elementor templates, allocating display rules, the navigator and assigning canvas sizes.
Most of these tools made my whole job of redesigning this blog way easier and saved me hours.
The context menu came in Elementor version of 2.1. This possibility revolutionized the page builder’s canvas navigation and design.
With the context menu that appears when you right-click within the editor, you’re able to edit a widget, duplicate a widget, copy, paste, paste a style, reset a style, save a section, navigate or even delete.
The ones I have used the most during my redesign process were the copy, paste, and duplicate options.
With duplicate, just as the name says, you can have a copy of the selected element or section.
And with copy and paste, you can copy an element from any page or post and paste it in any page or post. Yes, even a totally different template.
Elementor has come up with a creative way to undo, redo and view revisions.
All this happens under the history widget with options; actions and revisions.
For actions, you can easily track, see all the recent series of changes you have done. And by clicking on the return option, you’re undoing the action.
Under the revisions, you can track and see the number of times you’ve edited that specific element or section. And if you’re more than one user, you can easily know who did what and when.
This saved me a lot in moments I unintentionally deleted elements I still needed.
This is yet another great time saver.
By creating one super template and saving it under my templates.
You can easily reuse it by either pasting its shortcode on any page or post or you can re-edit it and have it work with a couple of other sections.
You can also import templates from elsewhere into your Elementor library. Though, I never tried out this option.
Elementor has made it way easier when saving pages or post templates.
With the display condition, in case you’ve created a header or footer element, you can choose to have it appear site-wide or set it to appear on specific pages.
When setting the display conditions, you have the possibility to choose from the entire site option, archive, singular or even to include or exclude that element from showing up.
You can add as many display condition filters as you want.
Yes, Elementor works and is compatible just with any other theme.
In case you look at using it as just a page builder, I’m sure it will serve you as wanted.
By creating or selecting templates from the library, inserting them into the already existing pages is quite easy and doable.
Regardless of the theme, you can also use your template shortcode just anywhere in the page.
One thing I’m not sure about and haven’t tested is if you want to use Elementor as a theme builder just like I used it on this blog. Can I achieve the same customization abilities with other themes too?.
Yes, there are already Elementor themes recommended like Astra, GeneratePress, OceanWP, Hestia among others but I’m now talking of just any other strange theme out there.
We already know that Elementor is a live editing WordPress page builder, meaning that you see exactly what will appear on the live page even when you’re still designing.
But hey, that doesn’t mean you have already saved or even published.
The only green button within the editor shows publish but besides it, there is an arrow.
By clicking on that arrow, you can have options to save a draft or save as template.
And just beside the publish button, is the preview button (eye) that lets you view in a new tab what you’re about to save.
By clicking on the preview button, you’ll be able to get a preview link that will open straight in a new tab.
The Elementor navigation is kind of a context menu of some sort.
You have two options to enable it. Either from the tools tab (layout icon) or by right-clicking within the editor itself. Then select, navigator.
The navigator will enable you to browse through the whole work area / editor without having to scroll up and down.
By clicking on a section, column, heading, inner sections, you can move straight to it.
And, in case you don’t want an element to appear on the template/page, you can simply select the eye beside it to disable.
By just using the navigator, you can save hours of scrolling through the editor yet not locating what you’re actually looking for.
Before finalizing with this study, I want to show the outcome or the results I achieved on my redesign mission.
Just like I have been sharing with you right within this Elementor review and case study, the sketches I made before the start of the redesign process helped out a lot.
It is from them that I could have the whole job go below 120 hours yet for some other designers, it could cost them over 300 hours. And if they were to do custom development (not on any CMS), this job would go way more than 800 hours of work.
I have already shared my views on a number of sections in the previous chapters, however, I wish to shed some more light on them.
Elementor page builder enabled me to 100% accomplish my blog redesign with zero knowledge in coding. Just dragging and dropping and yet achieved the desired outcome.
I wanted that this blog looks just like no other but still very relevant and stands out. Of course, not the best in the industry but I love it just the way it is and how I managed to tweak it here and there.
After the mobile first indexing, I couldn’t anymore ignore a mobile version of this blog.
Actually, 70% of my readers come from mobile (smartphones). See chapter 3
Elementor enabled me to build a custom-made mobile site that is proportionally visible on all devices with no hustle.
I personally never knew how just switching from one theme to another could impact my website speed, page load size, and page requests on the server.
Yes, now GO Tech UG is way faster without any ninja optimization hacks but only switching a theme and letting everything be handled by Elementor from pages, posts, headers and footers
And still with secure and clean code.
Not for getting a better and improved user interface and user experience.
Elementor plugin is free for anyone to use.
You have to find the plugin within the WordPress repository or from the Elementor official website.
However, the free version of Elementor is limited to what you can do. From templates and support. If you’re that person not put off by this, you can easily use it for free always.
Elementor free version at the moment has over 1 million active installations and running on version 2.1.7
These are the features that you’ll have access to with this version
You can download it here.
Elementor page builder pro version is at the moment running on version 2.0.4
You can only install the pro version when you have the free version installed and activated.
The pro version starts at $49 for a single site with one-year of updates and Elementor support available. – $199 for multi-site, one-year support license.
Here are the features you’ll have in the pro version. With all those from the free version.
Get Elementor Pro
On top of having access support with Elementor Pro, you’ll have access to Elementor themes, Elementor training, Elementor pro tutorials, Elementor blog, Elementor youtube channel and a helpful Facebook group.
There are a number of reviews online from a number of bloggers and users. I found it wanting and I think sharing a few of them here would be of help.
Read Elementor reviews on WordPress
Read Elementor reviews on Capterra
I’ll be happy to read your views, comments, and feedback in the comment box below. Feel free to ask any Elementor related question regarding this case study, I’ll be willingly available to answer them to the best of my knowledge.
Though, I have some questions for you about this case study.
What did you like most?, What didn’t you like?, Where and what could be improved? Which chapters?
Again, thank you in advance for sparing your time to read this.
I hope this case study brings you value.
Disclaimer: Elementor didn’t pay me to write this case study. It’s from my liking and love for sharing that I did this.
Yes, its a pile of work. Researching, compiling and publishing a 5000+ word case study.
However, I think it was worth the effort. Even if Elementor had paid me to do this, I would still mention it.
So, whatever I shared in this study, is only my opinion.
Thank you 🙂