How to Create a WordPress Website Using Elementor The Ultimate Guide
Beautifully-designed websites can give an impressive first impression. Yet, building an outstanding website can be a challenge - especially if you're not equipped with any previous experience with design or development.
This is where the WordPress Elementor website builder comes into. By opting for this modern easy-to-use plugin, you can create a stunning website without writing even a single piece of code.
This post will cover everything you should know about this hugely popular WordPress page creator. Then, we'll show you how to use Elementor's most essential jobs, including making layouts, pages or even customized templates. Let's get started!
An introduction to WordPress Elementor
Even if you're a seasoned pro, there are plenty of reasons to use Elementor. Just because you have coding expertise doesn't mean that you need to always create everything by hand.
Elementor has plenty of features that will help you create winning websites in a shorter amount of time. This includes over 90 ready-made widgets and professionally-designed web templates.
Elementor Free vs Elementor Pro
Elementor can be described as "freemium" software. You are able to download the basic Elementor plugin for free or purchase an Elementor Professional license.
If you want more advanced capabilities, you can buy Elementor Pro. It unlocks additional tools, as well as Elementor's theme builder.
With the Theme Builder, you can modify nearly every site element, including the footer and header. Additionally, you can create your own archives and posts page layouts.
If you're developing your own online store, Elementor Pro also includes the WooCommerce Builder. You can use this to customize your site's WooCommerce pages, such as the product page, product archive page, as well as the checkout page. Also, you'll be able to access widgets explicitly designed to boost conversion rates, including custom Add To cart, Upsells, and Products Related.
The Elementor Pro licenses include access to over 60 pro website kits. They include templates as well as popups, pages, and other components to help you build the perfect site. If you buy an Expert license or higher, you'll also get access to 20 professional website kits.
Additionally, every Pro subscription comes with premium service. Typically, you'll receive answers from Elementor's specialist support team within the same day. But, if you choose to sign up to purchase Elementor Pro Studio or higher it will be upgraded to VIP support. It allows you to engage in live chats with Elementor's VIP support team. Also, you'll get priority response on your tickets, which typically arrive within 30 minutes.
If you're an agency manager, developer, or designer, you may be interested in the Experts Network page. There, you can showcase your work and catch the eye of potential customers.
If you're interested in advertising via the Experts Network, you also may be interested in the Expert, Studio, or agency licenses. The licenses allow the user to establish an account on the popular marketplace.
Elementor Pro plans range from $49-$999 per year. They also offer the option of a 30 day money-back warranty that allows you to test it before you buy.
How to Install Elementor
To download the version for free, navigate to the Plugins tab and click Add New. Within the search box you can type the word Elementor. When the plugin appears, click on Install Now.
When prompted, click on Activate. The plugin will then add it as an elementor option on the WordPress sidebar.
You're now ready to start by using Elementor! To begin, hit the Elementor option on the left menu bar.
You can also download the Elementor plugin directly through the WordPress repository. Then, log into your WordPress dashboard, then go to Plugins > Make New and Upload the plugin. Click on Select File to select the Elementor .zip file you have downloaded.
How Do I Connect Elementor Pro to WordPress
There are two options for connecting Elementor Pro to WordPress. If you haven't already purchased one of the Elementor Pro licence, visit the official website and click Start Here.
You can then follow the instructions on screen to set up an Elementor account. If you are asked, type in some information about the kind of website you'd like to create.
Next, choose which plan to purchase. Since Elementor needs the existence of a WordPress site, you'll have to register your domain. Elementor will perform an examination to confirm that your site is using WordPress. WordPress platform.
If you've got an active WordPress website then the next step is clicking on Install Elementor. It will redirect you automatically to the Elementor plugin page if you're currently logged into your WordPress site.
If you are prompted to do so, click Install Now > Activate. Elementor will then add the page builder plugin on your site.
Or, if you've bought an Elementor Pro subscription go to the official website , and log in using the details you received in your confirmation email.
Within the account section of your Elementor account, select subscriptionsfrom the left-hand menu. Then, click the Download ZIP option.
Then, sign in to the WordPress dashboard and navigate to Plugins > Add New. After that, transfer the Elementor Pro .zip file you just downloaded.
After installing and activating Elementor Pro, WordPress should ask you to enter the license number. Alternately, go through Elementor > License , Connect and activate.
WordPress should check your license for you automatically if you're currently logged into the Elementor account. If you're not, enter the Elementor username and password each time you are the prompt appears to enable your license.
Using Elementor: 4 Essential Tasks to Learn
With Elementor You can create unique websites without special design or development skills. It is important to familiarize yourself with the fundamentals before building a complete website. This is a brief introduction to the Elementor workflow with that in your mind.
1. The Elementor Page Builder is launched.
For creating a brand new post or page using the Elementor page creator, go to Pages/Posts > New. Then, you can open Elementor's editor by clicking on Edit with Elementor editor by pressing Edit in Elementor.
Alternatively, you may possess an existing website which could use improvement. You simply need to navigate to the webpage that you want to edit and then open it for editing in this case. Then, click the Edit using Elementor option.
To the left of the screen is the Elementor sidebar. It's where you'll locate every element you can incorporate into your layouts, like the headings and buttons.
The Elementor sidebar also contains a Global Widgets section. If you plan to reuse the same widget in several designs, you may decide to save the widget as a global one. This makes your custom element easily accessible at any time. Also, it gives you an easy location from which it is possible to modify your widget once to change it across the entire website. Elementor is then able to replicate the changes to your entire website.
Right to the left is the live preview of the canvas, where you can create your layout. Elementor automatically updates to show your modifications in real-time as you make your edits.
2. Add Sections, Columns, and Widgets
The Elementor editor gives you access to three main building blocks: Sections, Columns, and Widgets. We've covered Elementor's already-designed widgets, now let's explore ways to add widgets to your designs.
In most cases, you'll begin by creating a Section using the + icon in the primary canvas. Elementor will then ask for you to select your structure.
Structure options include at least one Column. In the end, you'll put your widget inside these Columns. They're essential in creating more organized layouts.
After making your decision, Elementor will add this Section to the layout you have created. For you to transfer this Section to a different location simply click it and then grab the dotted blue handle which appears.
To edit a Section, you can simply control-click the blue handle with a dotted line. This will launch the context menu where you are able to make minor modifications such as copying or deleting the section you've selected.
If you'd like to make some more complicated changes, click on the blue handle, and select edit section. The Elementor sidebar will be updated to show all the extra changes you are able to apply to this Section.
Additionally, you can integrate widgets into this section. On the Elementor sidebar, search for the widget that you would like to apply and drag it over the main canvas.
While you're dragging this widget Elementor highlights all the different columns and sections where you can drop this item. When you're ready, simply remove your mouse. Elementsor is now able to add this widget to the Section you have selected.
3. Modify Your Site's Settings
When you alter the settings at the web-based level, you'll be able to create a uniform look and feel throughout your WordPress website. This is significantly faster and simpler than making the changes on a page-by -page basis. To view the available site setting, select the hamburger menu located in the Elementor sidebar.
Now you can examine your options and then modify any changes that you need to make. Once you're prepared to publish your new site settings Click on the Update button that is located at the bottom on the Elementor sidebar.
Want to know how we increased our visitors by 1000%?
Join over 20,000 others to get our weekly newsletter with insider WordPress tips!
4. Make sure you review your revision history
As you edit your designs, Elementor is quietly recording the modifications you've made. You are able to easily undo your changes, which could save your life if you find out that you've made an mistake.
To access Elementor's logs Click on the History icon located at on the right sidebar. The Actions tab will record every single change you make in Elementor. This can be anything from creating a new Section to editing existing text:
Every time you press save, Elementor records the current version of your page as a fresh revision. It is possible to view all these snapshots in the Revisions tab. If you'd like to restore to a prior save, simply find it on the Revisions list , and then click it.
How To Build a Page within Elementor (2 Techniques)
Now that you're familiar with the fundamental Elementor workflow let's see how you can apply this expertise to the design of several new web pages. In the beginning, we'll look at creating an ordinary WordPress webpage using the no-cost Elementor plugin. We'll then look at ways you can build a high-converting website for your products using WooCommerce as well as Elementor Pro.
1. How to Make a Standard WordPress Page
For the first step, you must create a new page by navigating to Pages > Edit > Add New. Then, edit the page using Elementor. Then, you can add an additional Section to your page by clicking on the + icon. We're going to start with our headline, therefore it's best to choose the single column layout.
On the Elementor sidebar, look for in the sidebar of Elementor, you will find Heading widget. Now, drag and drop the widget in your newly created Section. After that, you can type your heading text into the Elementor sidebar and use various settings to create a stylish title.
Click on The (+) icon to create an additional Section. It's going to include an image, and add additional text. So now we'll opt for a multi-Column layout.
Next, drag the Text Editor widget from the Elementor sidebar and drop it into this new Section. Then, you can add or alter the style of your text by using the settings of the sidebar.
When you're happy with the text, you can find your Image widget. Again, drag and drop to include this widget into your Section.
In the sidebar, select the thumbnail preview. You can now utilize WordPress Media Library WordPress Media Library to upload images or upload the previously uploaded image.
To view your design in action, click on the eye icon located at the lower right on your Elementor sidebar. This displays a preview of the page's layout in a new tab.
Once you're pleased with the layout Click on the publish button. Note that if your page is already live the button will prompt for you to make changes instead.
2. How Do I Create an WooCommerce Product Page
To design a custom WooCommerce page for your product, click Templates on the WordPress dashboard. Then, click on the Add New button. The next screen will open the first drop-down menu and select the Single Product.
Give your new template an appropriate name, then select the Create Template. This will launch the Elementor library that includes all of the single product designs.
To take a closer look at a template simply hover over it, then click on the magnifying glass icon when it appears. If you're looking to add the same design to your shop then click the Insert.
The templates of Elementor offer a variety of pre-designed components. To edit any element, simply hit the element. The Elementor sidebar will be updated to show all the elements' settings.
Elementor Pro provides a range of WooCommerce widgets you can apply to your designs. To see what's available go through your WooCommerce or Product sections in the Elementor sidebar.
These sections include widgets with high-end built-in features for example, WooCommerce Breadcrumbs, Cart, and Checkout. In order to add these widgets into your designs, just add them to the Elementor canvas and let them go. Then, place the widget in the Section in which you wish to display the information.
If you're satisfied with your design, click on Publish. You can then select Add Condition and specify the areas in which you'd like to apply the template. In this case, for example, you can use this design for the specific product category, or apply it to your entire store.
How to Install and Locate pre-made templates for Elementor
The cost-free Elementor plugin has more than 100 fully-page templates and more than 300 blocks. In the event that you purchase Elementor Pro, you'll get access to some more options.
Select the Add Template icon to apply a template to your current layout. This icon should be in each Section block and appears as a white folder. It will open an Elementor Library.
Here, you'll find all the Block and Page template templates you can incorporate into your website. The ability to preview any template is by hovering over it and clicking the magnifying glass symbol.
If you come across an appropriate template to apply, simply click the Insert button. If you haven't previously linked to the Elementor template library, the popup will ask you to complete the process.
Once you have connected, Elementor will insert your chosen template. You can now customize it. For example, you can add more widgets or delete any text placeholders.
How To Build Templates with Elementor
Elementor comes with a wide selection of ready-made templates. But, there are times when you prefer a certain style of design in mind. In that scenario it is possible to create your own templates.
Creating your designs can ensure consistency across your entire site. Templates can also be used to speed up development and design when you're an WordPress agency. As an example, you could create a collection of templates with all of the features and settings that you normally employ on client websites. You can then make these templates the starting point for all new projects.
For a start, click on the Templates in The WordPress dashboard. Next, select "Add New".
When the pop-up appears start the first drop-down menu. Select the kind of template you want to create. The options include the following: Page, Section or Landing Page.
After that, give this template an appropriate name and hit the Create Template button. It will open the default Elementor page builder. Now you can design your template in exactly the way you'd make a standard web page. Add Sections, Columns and widgets till you're happy with your layout.
To save this layout for use as a template hit the arrow which is displayed next to the Update/Publish button. Then, you can choose to to save the template as a Template.
This design will now be added to The Elementor library. You can access it using the library's menu by clicking the My Templates tab.
You can also access your custom templates by navigating to Templates > Saved Templates in the WordPress dashboard. Then, you can access any design you have created and make the necessary adjustments.
Tips and Tricks for Getting Beginning with Elementor
The Elementor program can assist you to quickly design and build a WordPress website right out of box. However, some time-saving tricks will further increase your efficiency.
In some cases, you might create an area that you would like to use on the same page. Instead of re-creating the Section by hand, you could make a copy. Just click on the Section in question, and then Control-click the dotted handle that appears.
Then select Duplicate. This creates a duplicate Section immediately below the first.
Sometimes, you might need to use the same Section on multiple pages, or even on different websites. It is possible to save any Section in a Block template. It adds your style in the Elementor library so that it's always at hand.
In order to turn an Block into a reusable template by Control-clicking on the dotted symbol. Choose the Save as Template.
It is possible to edit any widget by selecting it in your canvas, and then using the controls in the Elementor sidebar. The process of switching between widgets can become awkward when you're using multiple widgets. This is especially true of overlapping widgets or when you've incorporated a number of elements within a small area.
Elementor's Navigator provides a list overview of all your page's widgets, organized into their corresponding Sections and Columns. You can easily navigate between your widgets by choosing the widgets in this "tree screen." The Elementor sidebar is then updated to display all of the options for the currently-selected widget.
Keyboard shortcuts are an excellent time-saver. Elementor includes a range of built-in hotkeys. Press Cmd/Ctrl + ? on your keyboard to display the keyboard shortcuts.
This launches a window containing the hotkeys available. The key to accelerating your web design and development by becoming acquainted with some or the entire set of shortcuts.
Summary
The process of creating a WordPress website isn't easy even if you're an experienced web designer or developer. Fortunately, the Elementor page builder is able to take the stress and hassle out of creating your website.
Regardless of whether you opt either the premium or free plugin, you are able to use Elementor to create and design every kind of post or web page that you want. It also includes various templates already designed. You can also create your templates and reuse them on multiple pages or on different sites.
Are you having any concerns concerning the use of this plugin? WordPress Elementor plugin? Please let us know by commenting below!
Cut down on time, expenses and increase site performance:
- Instant help from WordPress Hosting experts 24/7.
- Cloudflare Enterprise integration.
- Reaching a global audience with 29 data centers across the globe.
- Optimization using the built-in Application to monitor performance.