The concept of \”building a website without knowing programming or code\” has been in the past few years It is popular in WordPress.
Elementor Page Builder expands this concept through a simple drag and drop option to provide you with real -time preview. Now, you can use Elements to develop your personal or company website and give it an elegant appearance without spending money on professionals.
In this article, we will show you how to gradually start using Elements and ensure its best practice.
Elementor: The best WordPress page builder on the design of the dream website
Elementor page builder is the gospel of non -technical personnel.
It contains more than 400 pre -designed templates and blocks, allowing you to perform endless design combinations to obtain a high -end and advanced functional website. It makes the entire process of building a website super simple.
Elementor allows you to build anything you can imagine.
You will get a 100% visual interface to immediately witness all the changes you made in the design website. In addition, Elementor offers more than 30 amazing small components, making your website completely free.
In addition, you can subscribe to the Elementor Pro at a tolerable price to extend the function of the constructor to infinite. Using Elementor’s unlimited components, you can design all types of websites.
Let us explore how to start using Elementor effectively.
How to install Elementor
Assuming you already have a WordPress website. If not, you can use WordPress to build your website in 10 minutes. You can choose a host compatible with Elements to run your website smoothly.
Now, let’s see how to install Elements. And there are two ways
. Let’s see the first one.
Step 1
: Installation and activation
First, log in to your WordPress instrument board. Go to the plug -in part, then click to add a new one.
Add new plug -in
Step 2
: Then, search \”Elementor\” and select \” 123] Install immediately
.
Search and install Elementor Page Builder
Step 3: Now, continue and click \” Activate
\”Elements on your site.
Activate your Elements
Great! You have successfully installed the page builder. Now, let’s see the second way.
or, you can manually Elements and use the
upload plug -in
option to upload files.
Upload plug -in
Click the selection file, you will redirect to the desktop folder. Select the file.
Upload the file, click to install it immediately.
After installing the plug -in, click the \”activation plug -in\” option to activate Elementor.
Therefore After getting subscriptions from Elementor.com, install Elementor Pro in the same way. Note
: You must first activate the ELEMENTOR free version to make the plug -in work normally.
Now, you can get the built -in WordPres immediatelyS themes to create a beautiful website. You can choose the theme library that is suitable for your business from a variety of compatible theme libraries. Can you use Elementor with any theme?
Yes, almost. This is a list for you. Give a check and then-
According to your brand voice, choose the theme that is most suitable for Elements.
Elementor entry
Okay, use Elementor to start designing your website from scratch, just transfer to wordpress dashboard \u0026 gt; pays \u0026 gt; add new.
Then, enter the page title and select the Elementor Canvas option from the right template drop -down menu.
Finally, click the \”Elementor Edit\” button and start using the most powerful pages to build device.
However, if you want to use Elementor editing the exciting page, please transfer to all pages \u0026 gt; hang on the page.
Then there will be a button \”Elementor edit\”. Now, click the button and start editing your page.
Quick overview of the Elements editor
After loading this page builder, you will get an interface, you can be in it The content of the assembly page.
Before further introduction, let you introduce the basic settings and elements of this page constructor to make your site development path smoothly.
This is the interface that you can use the drag and drop element design page and view the real -time preview of the site.
At the top left, you will find some Burger icons that are set default and global.
In the upper right corner, you will find a dial button to return to the main panel , a search box will appear to quickly find the small components listed and the required small parts [ 123] You will find all useful modules in the left panel at the bottom, you will find some usefulThe icon is used for page settings, fast navigation, historical records, response mode and previews.
Also here, you will get a post button to display your page or save the draft/template for future use.
In addition, you can disappear the module panel through the arrow symbol appearing on the right side of the panel.
In this way, you will get a complete preview of the page.
Default and global page settings
By default, the construct of this page will adjust the color and font of the theme in the default settings, and allows you to design the corresponding design.
However, you can set the default style and global settings by clicking the burger logo in the upper left corner.
It allows you The module sets the default color in different color plates used on the page when you start to drag them on the page. In addition, you can set the font series and size of the titles, text, and stress. In addition, you can select a default color panel from the color selector, including six or eight color slots you can use in the future. When you choose a color, the color selector will appear at the bottom with a color groove. You can choose the colors of these slots from this. In the global settings, you can set some general fonts, the width of the page content area, and various spacing items for the page. In addition, you can switch to the dashboard settings here.
After the page is completed, you can click Exit to Dashboard to return WordPress dashboard
Pre -designed Elements template library
Okay, you only need to click a few times a few times, you only need to click a few a few times a few times, you only need to click a few a few times a few times. You can add pre -designed templates or blocks from the template library. Just click the \”Add Template\” button, it will take you into the rich Elementor template library.
在这里，您将Find the pre -designed blocks, pages and templates that can be easily inserted into your site. Elements Template Library
In the block, you will find that a large number of options can be selected for different purposes according to categories. you maySelect the heart -shaped button to add it to your favorite clip part.
To add the block to your site, just hang the mouse on it, and then click the \”Insert\” button. It will be ed and inserted immediately in your design. Similarly, you can insert the entire page design from the ready -made page in a few seconds. You will get a variety of page templates from here.
In addition, this WordPress Page Builder eliminates the trouble of repeating the same element. You can design blocks or complete templates and save it for further use.
The block or template you saved will appear in my template part, and you can insert it into your design when needed.
Use Elementor to build a website change change using Elementor It’s easier than ever.
Global component elements
If you want to reuse your design part on different pages of the website, you can save it as Global Widget, and then simply use it from the Global Section Essence It can choose to join the form, author profile, social attention icon, social sharing icon, or any content you must insert on the website multiple times.
global components
Therefore, you don’t need to make the same design again and again. This is annoying. Just design it once and use it when needed.
Elementor simple code
In this page builder, you can use a short code to directly add small components.
In order to insert a brief code on your page by default, please navigate wp-admin \u0026 gt; templates \u0026 gt; Saved Templates.
Here, you can see all saved templates with simple code. Now, from the short code, you can copy the short code and paste it to your classic editor. You can see changes from the preview.
Otherwise, you can transfer to the Elementor panel and use a short code component and paste the savedThe code of the template.
You will see the preview immediately.
Okay, now you have mastered all the basic knowledge of all tabs, elements and functions of this giant page construct. The powerful Elementor plugin
Elementor already has a lot of great content layout, which can provide professional and order for your website People are amazing appearance and advanced function. However, you can expand its custom function and use high -end Elements plug -in to add some excellent features to your website.
Because you can obtain useful plug -in from the extensive plug -in library of WordPress according to your needs.
View 12 best Elementor plug -in lists to easily customize your WordPress website.
Where can I click the settings and styles of editing Elements components
Okay, now you have mastered some knowledge to start your first Elementor website.
As you know, each webpage is just a general structure, including a series of parts, one of which includes columns, which will include text, images or video elements. In Elements, you can customize your part according to your imagination. You can add a separate background color, gradient, image or video to each block of the site. First, click to add a new part, you can choose the block you need. In addition, you can modify the layout by changing the size and width of the column.
Now add the element to the column and edit from the left panel or as shown in the figure above. In addition, you can drag the small parts from the left module panel and modify it according to your site layout.
In addition, you can add pre -designed templates or blocks, as mentioned above.
After selecting a small component, you will get three options on the left editor to modify the content and style of the small components.
In the advanced tab, you can edit small components with extraordinary and advanced functions. You can use other installed plug -in to modify the content of your website from this. In addition, you can add a custom CSS code fragment to the Elementor site from this panel.
Summary about how to use Elements
Congratulations! Now you have mastered all the basic knowledge of Elements and can start your first site. Whether you are a novice or a developer, this excellent page builder has rich functions. You can design your website according to your requirements.
Using this page to build device, you will get all the freedom of your website according to your brand sound.
It sounds amazing! correct?
In addition, you can use a powerful happy plug -in to enhance your Elements website. The most amazing thing is that you can add custom animations to your website without having to use HAPPY Effects for any encoding.
It will better enhance your page construction experience through more than 27 completely customized small components.
What are you waiting for? Grasp today’s opportunity!
Check Happyaddons
Step 3
Pre -designed Elements template library 
Check Happyaddons