How to Build a Fully Responsive Custom Website With Elementor

|Published on: Aug 23, 2022|Categories: Tips & Tricks|

Read Later - DOWNLOAD THIS POST AS PDF

First things first: What is Elementor?

Similar to Divi that we already have talked about, Elementor is the ultimate WordPress drag-and-drop editor. It lets you create beautiful WordPress websites in the easiest and quickest way possible. It comes in both free and Premium versions, depending on your demands. It’s actually pretty easy to build a fully responsive custom website with Elementor.

The default WordPress editor is fine for simple blog posts. Unfortunately it doesn’t offer very many design options and you can’t see what your design will really look like until you click the preview button. Elementor fixes that by giving you full drag-and-drop design flexibility with a live, visual builder where no CSS or HTML knowledge is needed. When you’re creating a design, you’ll see your design exactly as your visitors will. This makes it really easy to quickly adjust your design as needed.

Just like Divi, Elementor offers countless design options and dozens of pre-built content widgets for everything from buttons to forms, sliders, pricing tables, and more.

In addition to designing individual posts and pages, you can also use Elementor to design your entire WordPress theme – including your header, footer, and everything in between.

Why do I need a WordPress editor at all?

As for the “why do I need it”, I believe it’s been answered above.

If you’re ok with just the basic blogging outline in WordPress, you actually don’t need it. But as soon as you want to do something more, like make your site trully yours, you’re gonna need a tool to do that. There are many available online today, but the choice will differ with your needs and wishes. As for my personal experience, two are at the top of my list: Divi and Elementor.

The principle

They differ most of all in the basic principle they’re built around. While Divi is actually a WordPress theme that includes a powerful page builder, Elementor is a plugin that represents a builder itself. Divi has its own plugin too, called Divi Builder, and it can work on its own on practically any theme you want, just like Elementor. But the best results are always achieved using the theme itself.

Both Divi and Elementor have great communities around them, as well as hundreds (if not thousands) third-party modules available. Basically, you can do just about anything with any of them. And WordPress, of course.

What you’ll need to build a website

You’ll need certain things to build a website. There’s some hardware in the list, as well as software. And some hosting account also. All in all, I’m pretty sure you already have some sort of a computer, and apart from the hosting account you can do it all using free tools and resources.

Like I’ve said above, you can build just about anything withfree version of Elementor. There are certain things you’ll need the Pro version for, but many things can be done using the free version also. If you’re just looking to customize your own website, use the free version. This way, when you get to the point where something cannot be done with it, you still have an option to buy the pro version. It’s the same for any system: don’t buy it without testing.

So, you’ll need the following:

A computer: It may sound silly, but you wouldn’t believe how many people are asking whether they can build a website using their phone. You will definitely need a computer to do that, believe me. And it has to have a big monitor. In color.
Hosting: To host a website, you’ll need a hosting account at one of the Internet Service Providers. A standard shared hosting is enough to start and is always easy to upgrade if (when…) needed. This will probably cost you around $20/year, but you can start as low as $8 also.
Local by FlyWheel: it’s a free software that will enable you to create a local development space. This way, you can build your website on a local resource (your hard disk) and test it with the built-in tools or software (browser). While you can also develop on a live site (meaning the hosting account you have), it’s way better to do it locally. Once you’re satisfied with the results, you can easily transfer it to the actual hosting account, again using some free tools (plugins). Of course, you can use any local development system you like (like XAMPP, for instance), it’s just so that I like Local By FlyWheel the best.
WordPress: If you decide to use Local By FlyWheel, it’s included. If not, you can download it for free from wordpress.org. Just choose the language, download to your hosting account and there you go.
Elementor: Download the free version from elementor.com and install the plugin.

Time…

No matter which builder you’re gonna use (WordPress, Divi, Elementor, …), you’ll need some time to learn to work with it. And then build something. Only this way can you be sure that building pages will take off and your efforts will be rewarded. Hint: whatever you have planned, add another 50% on top. And then some when you get into details.

Now, let’s get into some training.

How to build a fully responsive custom website with Elementor

I was thinking about how to present this, but then I found a great beginner training on – surprise! – YouTube. So instead of writing my arms off, I have decided to simply show you the video. Be aware that this training is over 2 hours long, but the result is a fully functioning website, a plant store. You might want to watch it on YouTube rather than here, I know. And you can watch it again and again, repeating the steps until you understand what’s going on. This way, you’ll quickly be able to create something similar from scratch.

This is what is said about the video

This is a tutorial made for beginners and intermediate users that want to learn how to build a fully custom website in WordPress with Elementor easily. We’ll be building a simple, yet modern and aesthetic, website for a conceptual plant online store. We’re going to make sure it’s fully responsive so that it looks great on all desktop, tablet and mobile devices.

We’ll go over the basic structure within Elementor – sections, columns and widgets. We’ll take a look at how to use widgets to create content and how to style them appropriately. When it comes to widgets, we’ll go over icons, images, text editors, headings, image carousels, spacers, icon lists and more.

I’ll use motion effects to create a very fancy, yet simple, parallax scrolling effect. Elementor makes this easy but wield your power responsibly! We’ll create a logo slider along with a custom header that’s going to look amazing on mobile because we’ll use a pop-up to create the mobile menu. Don’t worry, we won’t forget about the footer either.

I’ll also do my best to give you some great design and user experience tips and tricks that you can use to get better at designing and building websites, fast. Everything you learn in this tutorial can easily be applied to your own WordPress website and you’ll be creating awesome custom websites, without the use of templates, in no time.

Chapters included

Here is the list of the chapters included in the video:

Intro
Setting up the back end (WordPress and plugins)
Setting up the front end (global fonts, colors and general website settings)
Creating our first section
Using CSS to make clickable columns
Making the first section responsive
Parallax scrolling section (motion effects, z-index)
Third section (reviews)
Fourth section (icons)
Logo slider section
The rest of the CSS explained
The last section (new arrivals)
Header
Using the theme builder to create the header (Elementor Pro only – if you don’t have Elementor Pro, just try to build this out like a normal section)
Using pop-ups to create the mobile menu
Use the theme builder to create the footer (Elementor Pro only – if you don’t have Elementor Pro, just build this out like a normal section)
Creating a form to collect emails (Elementor Pro only)
Website overview and tips

The training

Summary

No matter what tool you decide to use for your website design (Divi, Elementor, BeaverBuilder, …), be aware that each is slightly different in the way they work. Some are complete themes that include the builder (Divi), while others (Elementor, BeaverBuilder, …) are plugins that need a WordPress theme to work upon. That being said, certain things will be done completely differently.

At the end of the day, you can build almost anything with any builder, really. It mostly depends on which one you like best. And of course what you really want your website to do. In any case, it’s pretty sure you’ll need some additional plugins for all the functionality you want. Some you will find in free versions, some you will have to buy. At the end, you’ll have a website that you wanted, and you’ll be able to start earning (or just blogging) happily.

Don’t forget to like the video on YouTube and subscribe to his channel (Reialesa) in order to get more useful design insights.

You may also like:

We are in affiliate business with many of the vendors who's products we mention here and write reviews about, which means we could get a certain commission from them should you buy their product via our links. We are however not connected to them in any other way, nor we receive any special commissions for making good reviews. We try to hold our opinion fair and honest, giving you both the ups and downs where we see them. Everything written here is our own opinion and assessment of the possibilities that software provides.

Read Later - DOWNLOAD THIS POST AS PDF