Best Guide WordPress Elementor Tutorial for Beginners 2021

Best Guide WordPress Elementor Tutorial for Beginners 2022

1. What is Elementor | WordPress Elementor Tutorial For Beginners

Elementor is a WordPress editor, basically, all the websites you see on the market can be made with Elementor. It is a tool that can edit web pages directly by dragging. With this plug-in, you basically say goodbye to building a website with code. It can also be said that novices can build a website immediately.

2. Why use Elementor

First, let’s talk about Elementor’s company.

Elementor’s company is from Israel. This company received $15 million in Series A financing in February 2020, which shows that the market attaches great importance to this plug-in.

According to Elementor’s official website, there are already 5 million+ websites using this plug-in, and this number is still increasing, which shows its terrifying expansion speed.

I have used Elementor myself for a few years, and outline its advantages:

  • It’s easy to get started. Basically, after the installation of the WordPress background, there is nothing left to drag and drop. It is a front-end editing page. Compared with traditional background editing and publishing, the front-end preview saves half of the workload. You only need to open a web page each time. You can complete the editing of the website, which is completely what you see.
  • There are many templates. If you don’t know how to design a website, it’s okay. The official website has developed a lot of templates for direct use. You only need to click in the background to import the ready-made templates, and then you can log in and modify, and the release is complete. , Is your website.
  • Efficient and time-saving, saving a lot of time, and also saving a lot of manpower investment, using Elementor, you can save the cost of hiring designers and site programmers.
  • Zero code really achieved zero code. Elementor can be used to edit anywhere on the website, including traditional WordPress header/footer/post/category can be customized, this function is really awesome, and I like it and choose Elementor as the most main cause.
  • There are a large number of users. At present, the official website shows that there are 5 million+ websites in use, and there are a lot of FB free groups to join, which has formed a super huge community.
  • The ecology is powerful. Elementor supports expansion. At present, the number of Elementor extension plug-ins is also very large. In other words, even if you don’t use the paid version of Elementor, you can build the website by purchasing third-party plug-ins or free third-party Elementor plug-ins.

3. Is Elementor free

Elementor can be used for free, but many functions are limited, most of the functions need to purchase Elementor Pro to operate.

Only after purchasing Elementor Pro, can the header/footer/post/category of the website be customized.

At present, the paid version of Elementor is $49 a year, which is a bit more expensive than other one-time paid commercial themes, but overall the price is moderate, and of course, it is a bit more cost-effective compared to Shopify.

4. How to use Elementor

4.1. Install the free version of Elementor

Using Elementor, you can search and install Elementor plug-ins directly in the plug-ins in the wp background.

Install the free version of Elementor

4.2. Install the paid version of Elementor

This is a free Elementor. If you have purchased Elementor pro, you can download the pro-plug-in directly on the official website, upload and install it manually.

Install the paid version of Elementor

Log in to the background of Elementor’s official website and click to download.

Then click on the plug-in, upload the plug-in, upload the downloaded Pro plug-in, and then click “install now”

Install the paid version of Elementor

After Elementor is successfully installed, it needs to be activated. As long as you have successfully installed it, you will see the word activation on the top of the wp background, click “connect & active”.

Install the paid version of Elementor-1

The following interface appears and indicates that it is being activated, but you need to log in to the background of Elementor’s official website in advance, and then click the green “Activate” button.

best elementor tutorials

After clicking activate, it will automatically jump to the background of wp, see the green “Active” and it means that the activation is successful.

best elementor tutorials

4.3. Preset Elementor

After installing the Elementor plug-in, we need to preset Elementor, click “Elementor”-“Settings” in the sidebar of the wp backend, and then check the “Disable default colours” and “Disable default fonts” to avoid Elementor self The font and colour of the band affect our next web design operations.

elementor wordpress tutorial

4.4. How to use Elementor to edit pages

We create a new wp page, click Elementor in the background of the page:

In this way, we use Elementor to open the front page. The interface here is divided into two parts, the left is the element area of ​​Elementor, and the right is the web page display effect area.

How to use Elementor to edit pages

Usually, our first operation is to click the “red + sign” in the web page display area on the right, this can add columns. There are a total of 10 types of columns to choose from.

Click on the “folder” icon in the web page display area on the right, and the template library pops up. Here we can import the official template library of Elementor, or import the template library we saved. How to save the template library, we are in the back The tutorial will mention it.

wordpress elementor tutorial

We create two new columns and then drag an element from the left to the right. After the “blue line” appears, we can let go, so that the element will appear in the webpage display effect area on the right.

Save the edited page and go to the front desk to view

4.5. Save the edited page and go to the front desk to view

After editing our page, we can click the “update” button in the lower-left corner, then click the “three horizontal lines” icon in the upper left corner, click “view page” and jump to the front desk of the page, click “exit to the instrument” “Board” will jump to the background of wp.

Save the edited page and go to the front desk to view

When we want to enter Elementor editing next time, we can directly click “Edit with Elementor” at the top of the front page.

How to use Elementor to build a website one-to-one

5. How to use Elementor to build a website one-to-one

If you don’t understand design and don’t have the inspiration to design a good-looking website, then applying a template is the easiest.

In addition to applying the template, if you can imitate the good-looking elements of other people’s designs, it will be even more fragrant.

How to use Elementor to imitate other people’s websites one by one? Next, I will give you an analysis of how to do it!

5.1. structure

First of all, let’s look at the design structure of this Hero image. It is a two-column layout on the left and right, and then there is a background image:

How to use Elementor to build a website one-to-one

So when we start, we should add two columns.

There are two buttons under the layout on the left, that is to say, there are two columns in the layout on the left, how should this affect be done?

We can use the “Inner section” in the Elementor element to complete, and the “Inner section” can create the effect of the column:

Elementor structure

5.2. Word

Look at the text layout on the left. There is just a main heading and a button. Under normal circumstances, we use the “title” element for the eye-catching title and the “text editor” element for the description below the title.

You can make the fonts are large and small, thick and thin, white and yellow. These settings are edited in the “style” section of the element:

As long as you can view the font style of other people’s websites, find their font model, font size, font thickness (weight, inaccurate official translation), line height, etc., and you can set them to be the same, and the copy is successful!

5.3. Blank

Observe again between the font and the font, between the font and the picture, between the foreground and the background, there is a lot of white space, here is the white space, the white space can make people look more comfortable, if there is no white space If all the elements are squeezed together, your web page is like the design of the last century, more like an old newspaper layout, no one will be interested.

If you are new to Web Design I recommend having a look at this post “Top 5 Latest in Web Design Trends 2021

Top 5 Latest in Web Design Trends 2022

How to make blank?

Fortunately, our Elementor gives plenty of white space settings, regardless of whether it is a column or an element, you can set the white space:

In the “advanced settings” of each element, we can see two blank settings, “outer margin” and “inner margin”. In the above figure, a bottom margin is added, and there is an extra 48px below the text. Leave blank.

What is the difference between “outer distance” and “inner distance”? Please see the picture below:

Margin and padding in the wordpress elementor tutorial

Outer distance=margin, inner distance=padding, outer distance is the distance between two elements that do not contain each other, inner distance is the distance between two contained elements, that is to say, the outer distance is the distance between you and your neighbour’s house, The inner distance is the distance from your home wall, the difference is that one is outside the wall and the other is inside the wall.

And this wall has a proper term in web design called border, which is the border. After we add a border to the element, this element will have an overall box:

The border can have 4 options to set:

  • Frame type. After selection, the frame can be realized or dashed.
  • width
  • colour
  • The radius of the frame. After setting, the 4 corners of the frame become arcs.

5.4. Colour scheme

With good colour matching, a website will have more texture. There should be no more than three colours for a website, but black and white are counted separately because black and white are the basic colours and do not affect the look and feel of the website.

Both the font and background of the website can be set with colours. The colour is composed of a “#” and 6 hexadecimal digits.

Our common mathematical base is decimal, which is 0-9. In the world of colours, 0-9 is not enough, so ABCDEF is added. A total of 16 digits are called hexadecimal. The smallest hexadecimal number is 000000, which means black. , The maximum number is FFFFFF, which means white.

5.5. picture

There are two types of website pictures, one is the foreground picture, which is a normal picture, and the other is the background colour under the text. The foreground picture is easy to understand. Just drag a picture element into it. Let’s focus on it. Say the background image.

The background image is generally only set in the entire large paragraph. Click the six points of Elementor to enter the editing of the paragraph, and then click “Style” to see the background image. Upload a large 1920*1080 image and it will be completely filled. The background comes.

However, there is another problem. After uploading the picture, if the picture is too bright, it will block the text and picture in the foreground. At this time, we still have to set the “Background Overlay”

The “Background Overlay” is just below the “Background”. You can add a semi-transparent background colour to the background image. In the demonstration case, a gradient background colour is set, so there are two colour settings.

5.6. summary

The essence of imitating the website construction to achieve one-to-one is structure, text, white space, colour matching and pictures. After all these five points are achieved, you can also copy a website completely.

To know more about the Design techniques have a look at this post “Top 6 Practical Tips for Web Design Beginners in 2021

Top 6 Practical Tips for Web Design Beginners in 2021

6. What are the themes that go with Elementor?

The theme here means the theme of WordPress. Every WP website needs a theme to run normally. There are tens of millions of WP themes, and not all themes can be matched with Elementor and run normally. Then I recommend a few styles. A wp theme that can be perfectly adapted to Elementor.

6.1. Astra

This theme is developed by Brainstorm in India. Although they do not have their own web editor, they have developed extension plug-ins around Beaver builder (another web editor) and Elementor. They did not purchase the paid version of Elementor in time and used it. The expansion plug-in developed by oneself can also complete the design of the webpage.

The current free version of Astra can be installed directly in the WP background. Because of its excellent profile design and almost no redundant code, many new sites like to use it. In addition, Astra’s paid plug-in Astra Pro costs 59 US dollars a year, and its expanded functions are also powerful…

And Astra also provides dozens of free templates for users to use.

6.2. Generatepress

The GP theme is very similar to Astra in terms of design framework. The team comes from the United States and is a bit simpler than Astra. Simple means that most of the team members are geeks and especially like streamlining, so the source code of GP is very lightweight, and there are many SEOer’s. Blogs like to use GP to build.

However, compared with Astra, GP has a lot fewer templates and does not have too many extension plug-ins. It is a pure theme. If you like simplicity, choose GP.

Although there are not many GP templates, it is enough to use with Elementor.

6.3. Hello Elementor

Elementor’s own theme is its pro-son, and of course, the pro-son knows Elementor best.

But the shortcomings are obvious. If you are used to other themes before, you will dislike this theme a bit, because it can only be used with Elementor, and it is too simple to adapt to the successful installation.

But in general, it is still Elementor’s own son, and it is still necessary to add a recommendation list.

6.4. Betheme/Jupiter

I put these two themes together because they are obviously different from the Astra/GP mentioned above.

The Astra/GP theme can be called the Agency theme, which means it is used by people who need a large site, especially by site builders, because Astra is paid annually, with multiple codes for one site, and can support the activation and use of multiple sites.

But the Betheme/Jupiter theme comes from Themeforest. They pay for one time, one code per station.

Muffin group, Betheme’s parent company, is a design company from Poland. It is the theme with the best sense of design that I have ever seen. These Eastern European countries attach great importance to computer talents, and almost all people need to learn the software. You can also see many Polish people on the dribble. work.

Although Betheme comes with its own Muffin editor, it is also very compatible with Elementor, and it has also made the unique elements in its own Muffin editor into Elementor elements, which means that using Betheme can also use special Elementor elements.

The same is true for Jupiter. They are both the top-selling themes of the Themeforest platform. However, because the Elementor ecology is too strong, they also began to embrace Elementor, and once again feel the power of Elementor.

7. What are the Elementor third-party extension plug-ins

A great tool must support expansion. The vision of such a software company is long-term because you can gather the world’s top talents to help you construct an ecological chain.

Elementor supports its own custom elements. They officially provide documentation, and then third-party individuals or companies can develop new plug-ins on Elementor.

This chapter will give you an inventory of which Elementor extension plug-ins are available.

7.1. UAE

ultimateelementor is referred to as UAE, which is the Elementor extension plug-in developed by Brainstorm, which is the parent company of the Astra theme. This plug-in expands many practical functions that Elementor Pro does not have, such as timeline, Before/After sliders, etc.

However, UAE is currently a paid version, but it can be purchased together with the Astra Pro package, and it is also renewed annually.

UAE wordpress elementor tutorial

7.2. Crocoblock

The Elementor extension plug-in developed by a company from Ukraine also supports Gutenberg, the official WordPress editor. The user’s physical examination is very good, and the personal sense is even higher than the official design of Elementor.

Crocoblock not only provides paid extensions but has also developed many free plug-ins. For example, JetSticky For Elementor plug-in is free. You can set any element in Elementor and fix it at the top of the page.

wordpress elementor tutorial UAE

7.3. Essential Addons Elementor

EAE is also a free and paid plug-in. There are many templates and high-cost performance. In other words, it is cheaper than Crocoblock and is a good alternative to Elementor.

Essential Elementor addons wordpress elementor tutorial

7.4. Envato Elements

The product of Themeforest’s parent company is an annual subscription, 198 US dollars a year, currently, there are more than 1000+ templates for the entire Elementor site, which is super suitable for novices, and a powerful template library.

Envato Elements elementor tutorial for beginners

8. Elementor FAQ

8.1. How to set Elementor into Chinese/or any other language?

Elementor’s Chinese or any other local language settings follow the WordPress background settings. As long as the WordPress background language is adjusted to Chinese, Elementor will display Chinese or any other language. However, the Elementor Chinese/Spanish/German package translation is not very accurate. You can purchase a translation package and upload it on a certain treasure. If you think the translation is not Accurate, you can modify it yourself with poedit software.

8.2. How to buy Elementor?

Elementor only supports purchases on the official website, click to visit the official website: elementor.com, and you can directly visit the official website. There are currently five packages, 49 USD/1 station, 99 USD/3 stations, 199 USD/25 stations, 499 USD/100 stations, 999 USD/1000 stations.
Elementor has increased its price once compared to the previous one, but those who bought it early still get the original price benefits.

8.3. What other plugins are similar to Elementor?

Beaver builder is a front-end editing plug-in similar to Elementor, and there is also an oxygen builder, as is Divi builder. Gutenberg, which comes with WordPress, is a back-end editor, similar to Elementor’s drag-and-drop.

8.4. Can Elementor be used on any theme?

In theory, Elementor can be used on any theme of WordPress, but it is not 100% compatible. It is recommended to use the theme officially recommended by Elementor.

8.5. How Elementor changes the switching theme?

Elementor can switch themes directly in WordPress in the background. If this theme also supports Elementor, almost no content on the page will change. This is also the power of Elementor, which can completely change the incompatibility between the various themes of WordPress.

8.6. Do Elementor and Avada conflict?

Avada can use Elementor to edit, but it is not recommended, because Avada has its own editor, and then use Elementor for editing, will cause code bloat, and after Avada version 7.0, it has also developed its own front-end editor, which has similar functions to Elementor.

8.7. How to edit Elementor in full screen?

Elementor cannot be edited in full screen because it will always appear in the sidebar, but after you finish editing, you can click the left arrow on the sidebar to collapse the sidebar, so that you can preview the full-screen effect in time.

8.8. How to import icons into Elementor?

Elementor supports third-party icon import, but first, your icon must be in SVG format, then import fontello.com, after downloading a compressed package, directly click Elementor settings in the WP background, find the icon, and upload the previously downloaded icon compressed package.

8.9. Reasons for Elementor’s slow speed?

Because Elementor is a foreign plug-in, and activation needs to go through the Elementor server, all domestic access will be delayed. In addition, the failure of Google fonts to load normally will cause Elementor to slow down.
In addition, you can check whether there are other similar editor plug-ins installed, which will also cause slowness.

If you have learned something from our detailed guide of WordPress Elementor Tutorial for Beginners 2021, please like and share our content.

Leave A Comment