Any website customization requires an understanding of different technical topics such as HTML, PHP, and CSS. Unfortunately, most people do not have these technical skills, but there are other simpler ways of creating and customizing websites that do not require programming. In this tutorial, I’m going to show you how to design a site with Elementor.

Introducing Elementor

Elementor is the most popular WordPress page builder in the WordPress community. It offers a unique web designing experience for the user.

Since 2016 Elementor has fully taken over the WordPress industry. If you are not familiar with it, let me give you a short on it. With Elementor you can just drag & drop fashionable elements and create an amazing website in just a few minutes. You don’t require any coding or technical knowledge.

Elementor page builder also provides ready-made templates for users to instantly apply on the website.

The Reason for Choosing Elementor

Elementor is not only popular for its rich features but also simple to use. It is a WYSIWYG (What You See Is What You Get) type page builder that even non-technical persons can completely use.

In the success to bring the most basic users to WordPress, Elementor is far way ahead of the competition. Just look at the following statistics:

The Elementor and Beaver Builder users numbers came from WordPress.org, while Divi Builder’s user’s number came from the Elegant Themes website. Also, the Divi Builder’s user number refers to the overall number of customers that Elegant Themes serves.

The content editing interfaces in different page builders:

Considerations to Building a WordPress Website

To build a simple website you will need:

• Domain name and hosting
• WordPress
• Elementor
• Happy Elementor Add-ons
• Supported theme

The first step to creating your own site with WordPress and Elementor is to make sure you have everything in place. In this part, we’ll cover getting your own domain name and web hosting, show how to install WordPress, Elementor, and Happy Elementor Add-ons as well as how to install the supported theme.

1. Domain Name and Hosting

When you are mentally ready to create your own website, the first thing you need is to get a domain name and a web hosting service. The domain name will allow visitors to access your website.

If you’re creating a personal website such as a blog or a resume, you might want to consider using your own name as the domain name.

Alternatively, if you’re thinking to build a website for your business, then the most obvious choice is to use your business name for the domain name. There are lots of extensions you can choose from, but keep in mind that.COM is the most popular one. However, if you find that your desired domain name is not available with a.COM extension, try opting for.ME,.CO or .NET which are also very popular.

While you can buy your domain name separately from your hosting plan. The easiest way to start is to combine the two as this allows you to manage everything in one place.

There are also various hosting plans available to start up. A shared hosting plan is a great choice for the beginner to get started. There are also numerous web hosting companies out there, like Cloudways, kinsta, Hostgator, GreenGeeks, and others for you to choose from.

2. Install WordPress

Before proceeding with the installation, you have to know the difference between wordpress.org and wordpress.com.

WordPress.org is to be used to install WordPress. A key point apart from the fact that it’s free, is that you will have to host the site through a third-party hosting service. 

WordPress.com offers more services and options and is a paid subscription. Here you will have the option to create a website, with hosting in a manner of minutes, with no additional, third-party services. 

One-click install

In the one-click installation, register your domain name and get your WordPress site hosted from the same hosting provider. WordPress recommends your host supports minimum PHP 7, MySQL v5.6+ or MariaDB v10.0+, and HTTPS.

You can also use trusted WordPress hosting providers, which will make installation easier and ensure that your chosen host is supported. WordPress itself recommends BlueHost, Dreamhost, Flywheel, and Kinsta.

Manual install

With the manual option, you can set up a server manually, then install the WordPress on your server, and configure it. You’ll need to have an FTP client, a database set up through cPanel or phpMyAdmin, and access to your web server. It is recommended only for advanced users.

3. Install Elementor

Login to your WordPress dashboard and navigate to Plugins > Add New. Search for Elementor and click Install. After installation complete, click Activate.

To get the full advantage of Elementor’s capabilities, you’ll also need Elementor Pro.

4. Install Happy Elementor Addons

Happy Addons for Elementor is a powerful addon. It created a buzz in Elementor users due to its unique designs and flexibility. Also, it comes from the same company which builds other awesome WordPress plugins like Dokan, WP ERP. It is suitable for all types of websites to give a beautiful design with advanced features.

To install Happy Elementor Addon, go back to Plugins > Add New, search for Happy Elementor, and click Install. Once installed, activate the plugin.

5. Install a Supported Theme

The last step is to install the supported theme. In most cases, the WordPress theme will come preinstalled with your WordPress installation.

To install any Theme, go to Appearance > Themes. On that screen, click the Add New button. Search for the theme, and then click Install. When the new theme has finished installing, click Activate.

How to Design a Site with Elementor

Now you have installed Elementor, Happy Addon for Elementor, and a supported theme. It’s time to design the site with Elementor.

Creating First Page with Elementor

Let’s move on to creating the first page. Go to the Pages section and click on the “Add New.”

This is going to be the homepage. Title the page as “Home” and click the “Save Draft” button.

Under the title, click on the “Edit with Elementor” button to open the plugin’s editor.

Create a Homepage with Elementor Using a Pre-made Template

The easiest way to get started with Elementor is to use a pre-made template. This will give you a chance to figure out the settings and explore what the tool can do in a live mode.

Click on the “Add Template” button located near the center of your screen.

Elementor has a wide range of templates collection to choose from. Some are free while others are only available in the Pro version. Find a layout you like and click on the “Insert” button.

Make Elementor Template Full Width

When you move your mouse over the template, you’ll see a light blue control panel. The first icon is the editor for the section. Click this icon to change the left panel view to edit the template width.

The first option available on the left under Layout is for stretching the custom design. You will see a switch type that you can click on and off. Click the switch button to change the layout to go full-width.

Change the Text of the Homepage

Now you can start to customize the content of the homepage. This is done by using the various tools at your control. To edit any of the pages, simply click on them and the left panel will change to the editor for that particular section.

You’re now able to change fonts, colors, size, and even how each of the heading tags appears on the page.

Change the Background Images

Another important element of customizing is changing your background image.

Go back to the Edit Section screen and click on “Style.”

Choose a different image after deleting the appeared one.

You have a lot of options when it comes to change the background. Gradients, size, and even YouTube video content are usable in Elementor.

Change the Colors and Fonts

To change the colors and fonts of your homepage, click the element you want to change and click on the “Style” tab. From here, you can modify text colors using a color picker or by typing in the hexadecimal code if you know. You also have the access to a wide collection of fonts to choose from.

When choosing a font appearance, it’s a good idea to have a set palette that doesn’t include different colors. A site that has too much color is often distracting and could result in the visitor leaving almost immediately.

Once your changes are complete, click on the “Save” button on the bottom left.

After Elementor saves the page, click the Menu (4 lines) icon on the top left.

Click the “Page Settings” option from the menu list.

Switch the Status drop-down to “Published.”

Click on the “X” icon on the bottom left to exit the editor and view your page.

Set the Page as Site’s Homepage

Now you have created the page and published it, it’s time to set it as the home. Go to the Settings of WordPress and click, “Reading.”

Under the “Front page displays” option, you’ll find a radio button to show a static page. This will tell WordPress that you want to use a specific page for the home screen of your website. Click on the radio button next to “A static page.”

You will now be able to change the front page and post page options. For now, click the drop-down window and click the “Home” page you created.

Scroll all the way to the bottom of the settings page and click on the “Save Changes” button.

Your homepage is now ready that you created in Elementor.

Creating the Rest of Your Site Pages

The homepage isn’t the only section that you may want to adjust. You also have pages like the About Us or Contact pages you may want to adjust. In that case, just follow the above steps for the page you want to create.

It’s important to note that you may have to move around your widgets in WordPress so your design fits perfectly. Also, note that some themes have settings of their own you may need to adjust to get the whole site to fit perfectly together.

For instance, there may be some colors in your theme that you may want to adjust.

Start Creating Websites Without Coding with Elementor

You can start creating a website without writing a single code by combining the power of WordPress with the Elementor Page Builder.

The program gives you a visual interface to bring your imagination to life and writes the codes for you behind the picture. These two powerful tools can help you create beautiful websites and high-converting landing pages without learning HTML, PHP, or CSS.

So, start with reliable hosting, install WordPress on it, and use Elementor for easy drag-and-drop site-building experience.