Wirementor: the smart way to wireframe and prototype websites with Elementor Pro

Wirementor… Why?

hello, I’m your host Kaycinho, I’m a digital alchemist, and today I will show you why it makes more sense to wireframe and prototype with Elementor Pro, if the final website is built with Elementor Pro anyway. But I didn’t always think like that, but that’s because, with experience I often do the wireframes mentally, but in some cases, that’s not enough. I will talk about the tool later on in this video, and by the way you can find the purchase and demo links in the description below, but right now, let me show you where the problem lies, and which solution I came up with.

Wirementor: The Context

Now, first things first. What’s the difference between wireframes, mockups and prototypes, and why do you need it anyway? If this is the first time you hear about it, it may sound confusing but it’s actually very simple. The problem comes from the fact that people sometimes interchange the words wireframes, mockups and prototypes. What’s more, sometimes, the lines are actually blurred between those. So let’s take a look at each of these.

Wireframes

Wireframes is the first step in the design process. They are basic layouts. They are low-fidelity representations of a final layout. Wireframes consist of structural guidelines and do not focus on design at this stage. Basically, wireframes are often sketched with pen and paper and it can actually work really well that way. That’s a matter of personal taste, but as you’ve probably guessed it, I prefer digital wireframes, but I can totally understand that in some cases, pen and paper are the way to go.

Mockups

Mockups are static layouts, usually built in Photoshop or similar software. So basically, once the wireframes are approved, then comes the design phase. And in that phase, the wireframes will be used as structural guidelines and the elements will be sculpted to form a design.

Prototype

Think of prototypes as functional demos. And by that I mean, when you click on a button, something actually happens. Transitions are visible as well as interactions. For example, hovering over a button in desktop mode should reveal the hover color. Now prototypes are not websites, but they simulate the final website. Prototype can be created with great tools such as Figma, Sketch and Invision App just to name a few

Why would you to go through that process?

Well, when creating a 4 pages WordPress website, it can definitely seem overkill to go through all of these phases. You just need 4 pages right? And with the amazing amount of free themes and layouts for page builders, you can import full designs in just a few clicks and take it from there. If the story ended here, it would make total sense to skip wireframes, mockups and prototypes. But as you may have guessed, the story does not end here. So let me give you a few reasons why some kind of plan is crucial:

1. Blueprint

Would you consider building a house without any kind of plan? Nope, right? Well in some way, building a website is kind of similar. If you don’t plan ahead, you may find yourself with issues that will double, triple, quadruple or even more, the time spent finishing the website. For example, even for a four pages websites, without a plan, I bet you’ll start diving into design right away. But there are so many design possibilities and directions, even with a defined brand identity, that you will probably waste a lot of time. So even if you just do the wireframes with pen and paper, that will help you tremendously!

2. Project Management

Let’s say you start building a website for yourself, then you move onto selling small four pages websites for very small businesses, and one day you get offered to re-design a big website. We’re talking sixty to one hundred pages, with complex forms and so on. Well, if you are not used to working with wireframes, mockups and prototypes, that dream project may turn into a nightmare, in terms of project management, time waste and finances. Because if you charged a certain amount but end up spending 10 times the amount of time you initially thought you’d need, then you’re in big trouble.

3. Custom = more

If you want to charge more money for the websites you create, you need to deliver more. And just downloading free layouts, or even popular premium ones ain’t gonna cut it for some clients. Initially clients do not typically care as long as it looks good. But when they see that their website seems to be the exact same replica of a competitor’s website, trust me: they won’t be happy.

I actually landed a new client just like that, because he was so angry at the web design studio he used to work with because basically they used a popular design that many other companies were also using.

So if you want to stand out from the crowd, custom design is a good direction to take.

4. Outsourcing / collaboration

Let’s say you decide to outsource part of the project to another web professional. More than likely they will expect at least the wireframes, in case they take care of the design, or even the mockups or prototypes, if they only take care of back-end development. And I could go on… So, as you can see, there must be some kind of preparation and customization ahead of building a website. But if it was all working well, I wouldn’t be making this video, and I would not have built a tool to address the issues with the current process. Right?

So, what’s the problem then?

1. Learning new tools

As mentioned, there are great tools out there to create wireframes, mockups and prototypes. So this is a possible stack:

• for wireframes: Figma. Figma is an amazing tool and I’ve created beautiful wireframes with it.
• for mockups, Photoshop or Affinity Photo.
• for prototypes: Sketch, Adobe XD or Invision.

So if you already know the tools then great. But i you don’t, it means learning a few new tools and keeping up with the development of those tools. Now, learning new tools can be fun, but it takes some precious time out of your hands.

2. It’s not that practical

Once you’ve learned to use the software, now you need to take into account the responsiveness of the website you’re going to create. So let’s say you’re preparing a 10 pages websites, so actually you’ll need

• 30 wireframes (10 for desktop, 10 for tablet, and 10 for mobile)
• 30 mockups and a responsive prototype.
• And each times there is a revision on a page, you will need to edit 3 wireframes, 3 mockups and the prototype.

Some people only do the homepage and standard page to create the wireframes and mockups, so that’s less work upfront, but it may mean more work when creating the functional prototype.

3. Waste of precious time

Let’s take a look at the process. You know you will create the final website with Elementor.

• so you start doing the wireframes with pen and paper or a tool like Figma.
• once you’ve done that you go through revisions
• once the wireframes are approved, you move onto creating the design mockups with Photoshop.
• another couple round of revisions at best
• you export your mockups image assets, and start working with Figma, Sketch, Adobe XD or Invision
• a few rounds of revisions later, you finally can start building your website in Elementor Pro.
• …meh!
• you can export and import some of the css but for the rest, you’re just going to have to start building from scratch, with the final approved mockups as reference

So … If you are coding websites from scratch, or if you have a dedicated team to do that, great. BUT, if you work alone, or with very limited human resources AND if you know you’re going to build the final website with WordPress and Elementor Pro … Then it makes no sense to go through all of that hassle! At least in my opinion.

So… What’s the solution?

After realizing that this process made no sense, it all became clear to me. Why not wireframing, designing and prototyping straight in Elementor Pro? So I decided to go look for a UI Kit for Elementor, but I couldn’t find any. Well, to be fair, I did find some, but they were actually designed layouts, which is not what I was looking for. What I was looking for was a way to use Elementor Pro to create neutral wireframes. Then once approved, I could move straight to design inside of a fully functional Elementor website prototype.

So as mentioned, I went to look for such a tool, but to my surprise, there wasn’t any. So … I built one.

Wirementor!

Let me introduce WireMentor, which is basically a Wireframing and Prototyping Kit for Elementor Pro that I created to help make the whole process much faster. At the time of recording this writing this post, Wirementor packs around 430 pre-styled items:

• 49 pre-styled widgets with hundreds of variations
• 17 pre-styled blocks with light / dark variations
• 26 pre-styled layouts and more will be added monthly

Instead of going black and white or just with shades of gray, I went for a more modern and vibrant look with Wirementor, so that it stills looks good even before the design phase. So, shameless plug for my product, I know, but after all, it’s my blog :p More seriously: I did not build a tool just to build one, I built it because I needed it. So my hope is that it can help some of you out there.

I did not build a tool just to build one, I built it because I needed it, and I couldn’t find it. So my hope is that it can help some of you out there.

Wirementor Benefits

So here are the benefits of using WireMentor if you know the site will be built with Elementor Pro :

1. One tool only

You need to know only one tool: Elementor Pro. Chances are you already know it, and if you don’t, it’s super intuitive. There are countless tutorials on the web and especially on Youtube, and many on my channel alone.

2. It’s practical

No need to use 3 different softwares. You only use Elementor Pro.

• You start using the pre-styled Elements, Blocks and Layouts and create the digital wireframes.
• Each revision is done in straight in Elementor. My advice is to clone the website for each revision or at least make a backup. That way, you can always go back if needs be.
• Once the wireframes are approved, no need to start from scratch. Clone the latest revision and start designing straight in Elementor.

This way, you don’t need to start from scratch, all you need to do is start customizing and adding design to the approved wireframes, and by doing that you merge the mockups and prototype phase together. The prototype may or may not show the final content. This depends on the scale of the project, and also whether or not you got the content in time. Now my advice is to get creative. You don’t want all of your websites to look alike. Instead, play with the color palettes, shapes, images, and fonts. But if you have a clear brand identity, that should not be a problem. If you don’t, I have video tutorials just about that, as well as a free brand identity guidelines tool.

3. A precious time saver

It’s much more effective because at this stage, you don’t have to guess where to place things. You can focus on the design, and cherry on the cake: all the structure and responsiveness is already done! And did I mention there is a one page layout, ready with the scrolling navigation? In a previous post (& video), I showed you how to create a one page website from scratch. And that took a long time! Now bear in mind, that all the pre-thinking process had already been done. I’m talking about:

• the main content guidelines
• the order of the sections
• the search and optimization of the images
• the definition of the brand identity

And still, with all that already prepared, it still took a long time. Now with WireMentor, you can just start quickly creating the prototype by just copying and pasting and editing pre-styled WireMentor Blocks. Once the wireframes are approved you can just start matching the content and brand identity in no time. Once you’re done with the design, you have a fully functional prototype and once approved, all you need to do is integrate live website components such as seo plugins, CDN, cache plugins, security plugins, and so on. Again, I have a post & video about all the steps involved in launching a website.

Wirementor: what’s the big deal?

Now, you may think: what’s the big deal? Just a bunch of pre-styled widgets, sections and layouts right? Not quite:

• on top of the widgets, sections and layouts, you also get website headers among which the hybrid headers with fullscreen navigation, which by the way I teach you how to do for free in one of my most popular videos at the time of recording this one
• the Elements (which are pre-styled widgets) and the Blocks (which are pre-styled sections) often come in variations with light and dark backgrounds so instead of the 92 items announced, you actually get around 430 pre-styled items as of today
• WireMentor will grow with Elementor: for example when new widgets or functionalities are added to Elementor Pro. New blocks and layouts will also be added periodically
• I spent countless hours planning, desiging, and refining the hundreds of items for desktop, tablet and mobile modes, to make sure it saves you a lot of time

So – Wirementor in a nutshell:

• huge amounts of time saved between the built-in responsiveness, taking away the guesswork, and the phased process, just to name a few
• working by phases allows for better time management, and thus more profit, but it comes with an added benefit:”Instead of asking 50% upfront and 50% at the completion of the project, for a website I usually ask 50% upfront, then 30% to 40% when the prototype is first shown, and the remaining 10% to 20% when the project is complete.“.This allows for more cashflow whether or not you receive the final content in time
• if you are not a designer, WireMentor can also help you, whether you just want a good starting point, or whether you plan to outsource the design phase

I put a lot of time, sweat and love in this tool so I hope it will help you save precious time, as it helps me!

Where can I see Wirementor in action?

I have created a full walkthrough video if you want to know how to install / use Wirementor. Click here to view it. You can also just take a look at the demo… Which was built with … Wirementor! Inception, anyone? :p

Wirementor Demo

Where to get Wirementor?

PLEASE NOTE THAT to you need a valid Elementor Pro license in order to use WireMentor, because Wirementor pre-styles Elementor Pro widgets and uses Elementor Pro theme builder features. In case you don’t have Elementor Pro yet, you can get it here. If you are interested in purchasing WireMentor, here is a handy button:

Buy Wirementor!

Wirementor: What will you build with it?

So, I hope that I managed to show you why it makes more sense to wireframe and prototype with Elementor Pro, and why WireMentor could be a great tool in your Elementor Pro toolbox! Now, what is your current process when it comes to designing websites, and do you find it effective? Let me know in the comments ! If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel and if you know someone that could benefit from it, I’m going to ask you if you’d like t share it now? If you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online. So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!