How to Create a Website Using Elementor in 2022 | A Beginner's Guide
A well-designed website may provide an excellent first impression. Creating a top-notch website isn’t always simple, especially when you have never done any design or programming work before.
The WordPress Elementor website builder plugin can help with that. Without writing a single line of code, you can build a beautiful website by using this cutting-edge, user-friendly plugin.
You will learn all you need to know about this wildly popular WordPress page builder in this article. Then, we’ll walk you through some of Elementor’s most fundamental functions, including making layouts, pages, and even personalized Elementor templates. Let’s get going step-by-step!
- Introduction of Elementor Page Builder
- Elementor Free vs Elementor Pro vs Elementor Cloud
- Install Elementor Page Builder Plugin
- Some Important Tasks Before You Get Started
- Create a Page or Post Using Elementor
- How to Create a Popup-Form in Elementor
- How to Create and Customize a WooCommerce Product Page Using Elementor
- Tips and Tricks for Getting Started With Elementor Free Version
Introduction of Elementor Page Builder
Developing a website in the beginning days of the Internet needed sophisticated web development and design abilities, or access to have skilled professionals. This meant that creating a website required a lot of effort, was sometimes difficult and might be costly.
Modern page builders like elementor make it possible for anybody, without specialized knowledge like coding, to develop a well-designed, high-performing website. Even if you're not a developer, once your site is up and running, you can quickly and easily add content or modify the style whenever you like.
The Elementor plugin is one of the most widely used WordPress page builder plugins with more than eleven million websites built. With Elementor’s user-friendly drag-and-drop editor, you can create anything from whole websites to a landing page.
Elementor is a code-free editor, especially popular among website owners who lack design and development knowledge. It also works well for company owners and small companies that have an idea for an online store but may not have the resources to engage a specialized design or development team.
There are several benefits to using Elementor, even if you’re a seasoned professional. Simply having coding abilities does not imply that you need constantly develop everything from scratch.
Elementor Free vs Elementor Pro vs Elementor Cloud
Elementor Free Plan Along with several other premium subscription levels, Elementor also provides a free plan. The drag-and-drop editor, 40+ basic widgets, and 100+ templates are all included in the free edition, along with all the other capabilities you’ll need to build a great user experience on your website.
Elementor Pro Plan If you need more advanced functionality, you should purchase Elementor Pro. Which comes with some extra widgets, along with Elementor’s Theme Builder. You will be able to modify almost every aspect of the website, including the header and footer, using the Theme Builder. Additionally, you may build your own post and archive pages.
The WooCommerce Builder is part of Elementor Pro if you’re creating an online store. This allows you to alter the product page, product archive, and checkout page of your website’s WooCommerce section. Additionally, you’ll get access to widgets like Custom Add To Cart, Upsells, and Product Related which are specifically created to increase conversions.
You may purchase the pro edition if you want access to more sophisticated features like the capacity to add forms and special CSS. The tiers of Elementor pricing are as follows:
Elementor Pro additionally includes a Popup Builder and a Form Builder. Although you can construct forms and popups using other plugins, using Elementor will reduce the number of plugins you’ll need to install and manage.
Utilizing an excessive number of plugins might increase the hacking risk on your website. It can possibly affect the functionality of your website. Therefore, it’s best practice to have as few installed as possible. Additionally, since you’re utilizing the same platform to build every component of your site, you should find it simpler to establish a unified look and feel.
Elementor Cloud Plan The Elementor Cloud Website hosting service has been officially launched. You can create, manage, and host your website with Elementor Cloud Website. For web designers who wish to concentrate on developing and creating their websites, it is an all-inclusive solution. You don’t have to worry about hosting or any other technical aspects of building a website because the service takes care of them.
Similar to managed WordPress hosting, it’s designed for Elementor websites that are powered by the robust WordPress platform that we are all familiar with and appreciate. The only thing that sets it apart from self-hosted WordPress is that Elementor takes care of all the installation and upkeep so you can concentrate on producing.
Naturally, it also has Elementor and Elementor Pro pre-installed so that you can get started building your site right away. You will receive 20GB of storage for all of your content and assets with Elementor Cloud Website, 100GB of bandwidth, and 100,000 unique visitors per month. The features of Elementor Cloud Website are divided into three categories: Hosting, CMS, and Design Tools.
Pricing for the Elementor Cloud Website is uncomplicated and set at $99 per year. All of the capabilities we described above, including the Google Cloud platform, Cloudflare’s CDN, all Elementor Pro features, a free SSL Certificate, a custom domain connection, and premium support, are included in this yearly charge.
Install Elementor Page Builder Plugin
As like as other WordPress plugins. Installing Elementor is quick and easy. There are two options to install this plugin on your WordPress websites.
- Install elementor from your WordPress Dashboard
- Install elementor website builder via elementor.com
Install elementor from your WordPress Dashboard To install the free version, from your WordPress dashboard, navigate to Plugins > Add New. In the search field, type in Elementor. When the plugin appears, click on Install Now Button.
When the installation process is completed, click on Activate Button. The plugin will add an Elementor option to your WordPress dashboard sidebar. Now you are ready to start using Elementor
The other way, you can download the Elementor plugin directly from https://wordpress.org/plugins/elementor/. Then, go to your WordPress dashboard and navigate to Plugins > Add New > Upload Plugin. You can then click on Choose File, and select the Elementor .zip file you just downloaded.
Install elementor website builder via elementor.com There are two ways to install and connect Elementor to WordPress via elementor.com you can go with the free version or purchase an Elementor Pro license, you’ll need to go to the official website, and select Get Started.
The next step is to register an Elementor account by following the on-screen directions. Enter details about the type of website you expect to create.
Next, pick the plan you wish to use. You must input your site’s URL since Elementor requires a live WordPress website. Then Elementor will check to make sure your site is running on the WordPress platform.
If your WordPress website is live, the following action is to click Install Elementor. In the event that you are now signed into your site, you will be instantly redirected to the Elementor plugin page.
When the process is completed, click on Install Now Button> Activate Button. Elementor will then add the page builder plugin to your site.
Or, if you already own an Elementor Pro license, visit the official website and log in with the credentials you were given in your email of confirmation. Then go to your Elementor account, and select Subscriptions from the left-hand menu. You can then click on Download Zip.
The next step is to go to your WordPress dashboard and navigate to Plugins > Add New. Then click the upload button to upload the Elementor Pro .zip file you just downloaded.
When the installation and activation process is completed, WordPress should provoke you to enter your license key. Or, you can navigate to Elementor > License > Connect & Activate to complete the process.
Some Important Tasks Before You Get Started
With Elementor, you can create unique websites without even any professional design or development abilities. Before creating a comprehensive website, it’s helpful to become familiar with the foundations. With that in mind, here is a brief introduction to the Elementor process.
Step 1. The Way to Use Elementor Website Builder
Let’s start to design a new page or post using Elementor website builder, navigate to Pages/Posts > Add New. You can start the Elementor website builder editor by clicking on Edit with Elementor.
The Elementor sidebar is located on the left side of the screen. Here you will find all the elements, such as titles, images, videos, inner sections, and icons, that you may apply to your designs.
A section for Global Widgets is also present in the Elementor sidebar. You might wish to save a widget as a Global Widget if you want to use it in numerous designs. As a result, you can always access your own element. Additionally, it offers a central area where you can modify your widget only once and apply changes across the board. The modifications will subsequently be replicated throughout your whole website by Elementor.
Step 2. Use of Sections, Columns, and Widgets
Sections, Columns, and Widgets are the three primary building pieces that are accessible in the Elementor editor. Let’s look at how to include Elementor’s pre-made widgets into your designs now that we’ve discussed them briefly.
In most cases, you’ll begin by adding a Section by selecting the Plus symbol on the main canvas. You will then be prompted by Elementor to choose your structure. One or more Columns make up the various structure possibilities. You’ll probably put your widget inside of these Columns. These are crucial to producing layouts that are more ordered.
Add a Section With Elementor Editor
Once you've made a choice, Elementor will include your selected type Section in your layout. Give this Section a click, and then catch the dotted blue handle that appears to transfer it to a new spot.
Just Control-click on this dotted blue grid to modify a Section. By doing so, a dialogue box will open, from which you may make quick adjustments like copying or removing the currently selected Section.
If you want to make more complex edits, Control-click the blue grid and choose Edit Section to make more involved changes. Now, all of the further adjustments you may make to this Section will be seen in the updated Elementor sidebar.
Edit a Section With Elementor Editor
You may also include widgets in this Section. Pick the widget you wish to utilize in the Elementor sidebar and drag it there.
Elementor will highlight all of the various Sections and Columns where you may drop this item as you are moving the widget. Release your mouse when you’re ready. This widget will now be added by Elementor to the Section you selected.
Step 3. Edit and Setup Your Site Global Settings
To change your site-global settings, using Elementor. The Global colors and Global font may both be modified in this way. Additionally, you may change the borders and shadows that WordPress applies to components like the photos on your website.
By making these site-global changes, you can ensure a consistent appearance and feel throughout your whole WordPress website. In addition, this procedure is quicker and more straightforward than making these modifications page by page. In the Elementor sidebar, select the hamburger menu to see the available site settings.
Site Setting Changes Using Elementor
Changing Site Setting details Using Elementor
You can also explore all the options and make any necessary changes. When you have done all the changes and are ready to publish your new site settings, click on the Update button at the very bottom left corner of the Elementor sidebar.
Step 4. Check Out the History For Revision
Finally, you can access Elementor’s built-in Revision History section by clicking on the History symbol at the bottom of the panel. You can track your modifications by switching back and forth between each step under the Actions tab. You may go through your revisions and go back to any earlier version under the Revisions tab.
Create a Page or Post Using Elementor
Now I can assume that you’re enough comfortable with the fundamental Elementor approach, let’s look at how you can apply this knowledge to create some new pages or some posts. First, we’ll go through how to use the free Elementor plugin to create a typical WordPress page. The development of a pages using Elementor Pro will then be discussed.
Create a Page with Elementor Free
Because of how simple it is to use, Elementor is superior to its rivals. You may see for yourself by creating your own page on the site without any coding knowledge.
Go to Pages > Add New > Edit using Elementor to start by creating a new page. Next, click the Plus symbol to add a Section to your design. You need to select a column style from there, so your header will come first.
After that, you can add a heading, text area, or images from the elementor sidebar.
You may customize each widget to your personal liking when you drag it into position. To finish, simply click the green “Publish” button. In Elementor, you’ve created your first page. You may preview and publish your page when you’ve done designing it. Start by going to the panel on the Elementor editor’s left side. Click the eye symbol to view your page in a preview. The green Publish button must be clicked to publish.
Create a Page with Elementor Pro
The pro edition of Elementor provides cutting-edge capabilities to develop your WordPress website. More widgets, a theme builder, a pop-up builder, and custom field functionality become available to you.
To assist you in designing your WordPress website, Elementor pro offers you a wealth of pre-designed Pages, Blocks, and themes. Blocks are sections containing pre-built widgets, such as footers, headers, and FAQs, whereas Pages are complete content layouts.
You have complete permission from Elementor to utilize any of the templates for your company. A field is available for searching for certain templates by tag, template name, or page type. Additionally, each template is mobile-responsive. With just one click, you can add them to any page.
To create a new page with Elementor pro, navigate to the section marked “Drag widget here” at the bottom of the page inside the Elementor editor. Click on that white folder open (inside the orange color circle) called add template
After the library has been loaded, click the magnifying glass icon or on the picture of any pre-made pages to view the page in preview mode. or simply hover over one, then click the green insert button to insert that page into your page. In this way, you can insert or edit your desired template on your page.
Not only that, but you can also use some advanced features like a pop-up form, kit library, and theme builder in Elementor Pro
How to Create a Pop-up Form in Elementor
A pop-up form is really helpful, when want to collect email addresses from leads. With its pop-up builder, Elementor makes developing these forms simpler. To make your own pop-up form, please follow these steps carefully.