Create a Website with Elementor
- WP Easify
- September 4, 2020
- 8:55 am
Create a Super Fast Website with Elementor
Today, you will become a true web designer.
We will show you how to create a custom page using Elementor which is one of the most popular page builders out there.
Elementor page builder is a standalone plugin that can be installed the same way as any other WordPress plugin.
Elementor is compatible with any WordPress theme, but since we are building a super-fast website, we will start by installing a super-fast theme – GeneratePress.
GeneratePress is specially designed for speed. Thanks to its tiny footprint and clean code, it makes sure you start off as fast as possible.
Now that we have WordPress installed on our super-fast hosting, it’s time to install our Generatepress theme.
To do so we click on “Appearance” > “Themes” tabs.
This will open a list of all the Themes already installed on our WordPress.
To add GeneratePress theme to our list, click on “Add New”, then type “GeneratePress” in the search box and click “Install” once the theme appears.
Once GeneratePress is installed, our homepage should look like this:
It’s now time to install Elementor. To do so go to “Plugins” > “Add New”:
Type “Elementor” in the search box and click on the “Install Now” button. As you can see, Elementor has over 2 million active installations and a 5-star rating.
To start building our page with Elementor, we first create a new page by going to “Pages” > “Add New”.
Once the page has been created, we can click the blue “Edit with Elementor” button.
After doing that, Elementor’s visual builder should appear. At this point, we can choose to design our website from scratch or use a pre-made template. If you are a beginner we suggest you start with a template because designing a nice looking website from scratch can be very tricky. To hasten our website creation process and start with a template, we simply click the right icon as shown on the image below:
This will open a list of all Elementor’s available templates. All we have to do is to select the template we like. The selected template will be installed automatically on our domain, and we will have a finished web page.
The template indicated with the arrow in the upper image looks like this once installed:
You have to admit it is not bad for something done with such ease.
When creating your website we suggest you start with a template you like. It doesn’t have to be related to your niche.
For example, we can turn our above restaurant template into a Fashion Stylist website by simply changing the images and some colors:
Or we can turn it into a website for a gym like shown on the image below.
See how easy this is!
In case you wish to add elements to the selected template or if you wish to create your website from scratch, you can do so by clicking the plus icon located at the bottom of the template or at the top of the page if you haven’t installed a pre-made template:
We first need to choose our column structure. In this case, we will choose a single column:
Once we have our column structure selected, we can simply drag and drop elements into it. After adding a heading module, a text module, a button module, and a background image, our top section should look like the image shown below.
Every Elementor module has three main customization tabs located at the top left corner. The first one is for content, the second for style, and the third offers some advanced options. Under the Content tab, we can type in our actual text, add links, and define our font size and alignment.
The style tab is the tab we will be using the most. Here we can customize or add background colors, images, overlays, and adjust every style and aspect of the selected element.
Under the Advanced tab, we can adjust the margin and padding of a single element, add motion effects, borders, define custom positioning parameters, and add some responsive options like hiding certain elements on mobile and much more.
Finally, by clicking on the mobile icon at the very bottom of our Elementor’s settings, we can preview and adjust our website for smaller screen devices.
That’s basically all you need to know. Working with Elementor is extremely easy and there’s no need for us to go into further details. We suggest you install Elementor on your WordPress and start working with it.
Now that we have explained how to use Elementor, we will continue adding elements until our page looks like this:
Without any optimization, you can see our website already loads in under 1 second. To be precise, it loads in 0.705 sec.
You can check it yourself here.
This is extremely fast for a non-optimized page.
We achieved such great results because we were using the right tools.
Our website was built on a super-fast hosting, with a super-fast theme, and a great page builder.
After optimizing our page for speed, it will load even faster.
With just a few mouse clicks, we can make our website load in only 0.2 seconds which is basically as fast as it gets when it comes to website speed.
Copyright 2020 © WP Easify