Elementor Tutorials

- A guide to using elementor, the world's leading visual page builder plugin for WordPress

WordPress has a lot of excellent visual web design tools (Website Builder), and Elementor is the best of these page builders, this article will introduce how to use Elementor to design websites step by step.

What is Elementor?

Elementor is a visual page builder plugin for the WordPress platform that allows you to design and generate pages with Elementor drag-and-drop without having professional programming skills, such as what you see in thisElementor TutorialsIt was designed and produced by Elementor.

Elementor Version Differences

Elementor is divided into a free version and a premium version. The premium version, also known as the paid version, starts at $49/website/year, and the Pro (premium) version has more widgets, web templates, design materials, and support for generating WooCommerce pages for a more fully customizable website appearance and functionality. (Specific differences)

If you do not have high requirements for website design, the free version of elementor is enough, and the free version of elementor is currently used by Daddy's website building notes+.Ultimate Addons For Elementor Designed by.

Do you need to use Elementor?

elementor is just one of many page builders. If you haven't used other page builders, then starting directly with elementor is a good choice. If you have your own ideas for website design, but can't write code, elementor is the tool you need.

Is Elementor Pro Crack reliable?

Available onlineElementor Crack Download, it is possible to use it while making sure that the cracked resources are clean. However, elementor pro activation is in online activation mode, and the cracked version of elementor can only use elementor widgets and not online materials, so it is really necessary and recommended to buy the genuine version.Elementor Pro genuine purchase address.(If the official selling price is too expensive for you, you can alsoElementor Pro genuine purchase address.(Only $99/year/site, genuine guarantee.)

Elementor Installation Tutorial

The prerequisite for using Elementor is that you already have a WordPress site, if not already, see between the milkmanWordPress installation tutorialThe first thing you need to do is to build a WordPress website.

Go to the WordPress backend, select Plugins, Install, then search for elementor, find this icon in the screenshot, install and activate it. (orDownload the installation package from here(After uploading to the website for installation.)

Install Elementor Tutorial

After installation, click the Activate button and the following image will appear.

elementor guide

You are prompted to create an Elementor account. If you create a free version, there is no point in creating it, just skip it.

If you want to purchase the premium version, you canGo to the daddy here to buy.

elementor Usage Wizard

Let you use their hello theme, this theme is a completely blank theme, anything you have to go through elementor to design, not recommended for newcomers to use, their own no design skills to make out the site will be very ugly. Recommended useastraThis simple theme.

elementor uploads the logo

Let you upload your website logo, or later if you're not ready.

elementor Tutorial

Skip directly.

elementor default interface

After successful activation, you will see the corresponding menu entry for Elementor inside the menu on the left side of your website's backend.

elementor settings

Tip: If you have purchased elementor Pro, then you also need to manually upload the installation package of pro to the plug-in interface to install and then activate it to use the features of Pro.

Elementor Tutorial

Once Elementor is installed, let's take a look at how to use Elementor for web interface design.WordPress default theme for ordinary users, want to adjust the beauty is a relatively difficult thing, so we recommend here to installAstra This free and compact theme.

Create the first elementor page

1. In the WordPress backend, select New, Page.

Create a new elementor page

2. Click the Edit with Elementor button at the top, and the interface that appears is the working interface of Elementor.

Editing with elementor

3, Elementor workspace introduction, the leftmost in the opened page, is the Elementor gadget, with a lock is the Pro version of the function, need to pay to buy. On the right is the visual editing area of your website page.

elementor work area

Designing pages with Elementor tutorial

The next milkshake teaches you how to use Elementor to design the page. Of course, the design is based on the premise that you know what you want the page to look like, you can draw a sketch first, and then slowly design it with elementor.

There are two ways to design a page using Elementor: 1、Design completely by yourself; 2、Import the designed template to modify.

The most basic use of elementor is as follows.

elementor design page method

①. On the left side of these elements, what you need to use, just press and hold to drag directly to the right side of the visual editing area.

②. This plus sign can add a new paragraph, which you can understand as a new piece of content area, separate from the previous piece of content.

③, here is add template, after clicking it you will find it is divided into: module, web page, my template.

elementor template library

Inside these template libraries, those with the Pro logo mean that they can only be used by Elementor Pro. Let's import a random page here as a demo.

Click Insert, then you need to use elementor account to connect, no elementor accountClick here to registerOne.

elementor import templates

Once successfully imported, it looks like the image above.

Where we need to modify something, we click on that area, and then the corresponding element settings window will appear on the left.

elementor setup interface

If you come across a part you don't want, just right-click to delete it.

Right click to delete elementor element

If you need to add new content, click the plus sign, then select the paragraph, and then drag in the content you want to add, such as images, text, titles, videos, and other content.

It is relatively easier to design using pages from the existing template library, which is easy for novices to learn and study. When everything is ready, click the Publish/Update button to complete the design of this one page.

Free Elementor Feature Enhancement Tutorial

The price of Elementor Pro you think is too expensive to buy (Looking for daddy can buy 99 yuan yo), Milkman teaches you a few tricks to get elementor feature enhancements for free.

After entering the WordPress backend plugin installation interface and searching for elementor, you will find a lot of plugins with elementor in the title, as follows.

elementor related plugins

For example, after we install Essential Addons and Premium Addons, when we use elementor editor to design a page, the element area on the left side will have many more functions that are not available in itself.

elementor feature enhancements

Some features on elementor Pro can also be achieved by installing third-party Addons, but it is not recommended to install too many extension addons, because different addons will contain different js and css and other files, which can easily cause the site to open slower.

Elementor Pro Advanced Features Tutorial

Although the free version of elementor can be extended through third-party plug-ins, there is still no substitute for some advanced features, so here Milkman will teach you how to use some of elementor pro's advanced features.

With elementor pro you can completely plan the various configurations of your website from scratch, such as theme colors, text, typography, and button styles, as follows.

elementor pro advanced features

After setting up the global styles, you can go back to the theme builder and piece together a desired site design yourself.

elementor theme builder

As you can see, you can design your own website's header, footer, Single Post, Single page, etc. pages if you installWooCommerce eCommerce plugins, then the e-commerce page can also be designed by yourself.

For example, we select a Header, click Create, and then a template library will pop up, in which all the pre-made header templates you can directly import and use, or you can manually design your own if you are not satisfied.

elementor head design

Once the design is ready, click Publish and the option to choose which pages to display it on will appear, as shown below.

elementor display location

You can set the entire site (entier site) to display, or just some pages to display this header layout, and other pages similarly, which provides a lot of room for customization of your site.

elementor template library

The online template library of elementor pro contains a lot of pre-made templates, including templates for the whole website, or for a certain part of the function, which can be directly imported and used by using pro, or you can modify them by yourself after importing. For newbies, this is undoubtedly a very powerful feature.

Buy genuine elementor pro for super cheap

Frequently Asked Questions about using Elementor

If you have a professional slideshow plugin installed, such as Slider Revolution, then just select the shortcode when editing the page directly and paste in the shortcode for the slideshow.

elementor short code

If you don't have any Slider plugin installed, then it can also be created using elementor pro's Slider element.

elementor Slider element

elementor above the text color and size can be set individually. First, find the text element you need to modify, such as the text editor, and then select the style tab, you can see where to set the text color and size.

elementor text color and size modification

Foreign trade website constructionHow to use elementor to create a contact form for a website where the inquiry form is a necessary requirement and function?

First of all, you need to install a contact form plug-in, directly in the background plug-in library search contact will come out a lot of free contact plug-in, after installation, create a query form, and then copy the short code to Elementor inside to add the short code element can be.

The technical term for the jump effect on a page is called an anchor point, and there is a bit of html basics involved here, such as thiselementor TutorialsThe catalog function can be jumped when you click on it. The milkman here uses theArticle Directory Plugin.

However, we can also create anchor points manually using elementor. Click on the element or segment you want to jump to, then enter a unique id value inside the advanced.

elementor add ID to jump.
Then, on the button or connection you need to jump to, typeURL of current article #idOn it (id is the one you set yourself, on the screenshot for jump1)

There is no way to modify the content of the head and bottom of the website by default using elementor, we need to install a separate plugin atElementor - Header, Footer & Blocks TemplateInstall and activate the plugin, then you can see it in the content section of the theme menu.

elementor adds headers and bottoms

At the bottom of elementor's left toolbar, click the computer icon and switch to mobile to edit the display of the web page on mobile.

elementor Mobile

More elementor tutorials

If there is no answer to your elementor use questions tutorial, you can leave a message at the end of this article, I will properly update the relevant operating instructions to this article.

50 thoughts on “Elementor教程,一文学会用Elementor建网站”

  1. When designing the archive template, the condition is that the author is archived. But after publishing, the archive page is still the style that comes with the original theme, and the archive template designed by myself, does not take effect. I don't know what is the reason. The template takes effect when the condition is switched to date. It's really strange. I hope the milkman will explain it.

    1. I tested it and there is no problem after setting it. It may be that you have set something wrong. After setting it up, multiple users only show the article archives for the user they set up.

  2. After installing the Essential Addons plugin, the elementor panel on the left side becomes grayed out and cannot be dragged and dropped. Then close the Essential Addons plugin and it is normal, what is the reason for this?

    1. Such problems are usually caused by plugin compatibility and have to be analyzed specifically to arrive at a result.

  3. Elementor is a page editor, I don't understand the relationship between Elementor and Theme.
    I want to build a to B foreign trade station, mainly to receive inquiries.
    1) Is it okay to use Elementor free version alone? Since you can drag and drop editing, why do you need to use the theme?
    2) Can I use Elementor Pro instead of theme?
    3) If you use flatsome, do you need to install Elementor?
    4) Do I need to use woocommerce for a to B website?
    5) What is a good combination for a to B website, Elementor + Astra?
    I really didn't get the concept, please answer the questions and solve the confusion, thanks a lot.

    1. 1、Can
      2, can, do not recommend newcomers to do so
      3、No need, flatsome comes with builder
      4、Depends on the situation, available or not
      5, the most suitable for their own.
      elementor is similar to a decoration team, with themes similar to different house types. If you want to arrange your own room layout, then install elementor's official hello theme and design the layout and style of each room yourself, etc.

      1. Thank you so much, you replied so quickly, thank you thank you.
        1) If it's a to C site, is there a problem with flatsome+woocommer? Is there any overlap between the two?
        2) I just browsed to another website and it mentioned using Elementor Pro + Astra Free Edition (said to be the lightest), how much difference is there in the 3 aspects of building difficulty, aesthetics, and functionality than just using Elementor Pro, for to B websites?

        1. 2cNo matter what theme you use, woocommerce must be installed.
          The difficulty of building a website, aesthetics, and functionality cannot be unified.

          1. "Difficulty in building a website, aesthetics, and functionality cannot be unified"?
            Sorry, didn't get it.

          2. It is you want low difficulty, beautiful, powerful no. Powerful function is certainly difficult. Beautiful also need to have design skills, so it is not simple.

  4. Thanks a lot. One last question, to B website, if I want to do multi-product package inquiry, make a quote cart kind, elementor Pro + Woocommerce + yith woocommerce request a quote, can this combination be? Just to B, do not need the actual transaction, elementor Pro can add to cart, then, is it possible not to use Woocommerce? Forgive me for asking, but I'm really confused, so please enlighten me.

  5. Please ask a question, after installing elementor, the phenomenon can not be loaded, using safe mode also can not, what is the reason?

    1. This situation is generally a network and compatibility problem, where your web server is, and then you can try to activate only elementor to see if it works.

      1. I'll try a different network. If I want to enter text on the image, how should I do it, or if I want to put the question on the image, how should I set it up?

  6. Hello Dad, I built the site regardless of the home page or about us or contact us and other pages to open the home page, I do not know where the problem, and then I followed the online tutorials to read the settings changed after the home page became uneditable, and it is easy to jam no way to enter the site, showing 504 errors, now I am confused

    1. This problem can not be seen from your description of the problem, it is estimated that the server or website settings where the wrong cause.

      1. The 504 error it shows will automatically change for the better after a few hours and you will be able to access the home page again

        1. The 504 error represents a Gateway timeout, which means that the server is acting as a gateway or proxy, but does not receive requests from the upstream server in a timely manner.
          504 is usually a server crash caused by improperly configured servers or improperly occupied website resources for many reasons.

  7. Using elementor to design a website, the home page calls the article list, how to do the article title and article date in the horizontal row, in elementor can not find the place to set, please advise

    1. This depends on whether the elementor add-on you installed or the theme comes with the elementor supports landscape, if not you can't set it up that way. elementor itself visualizes the content of some code, but if there is no code, the effect you want to visualize is not there.

    1. You say this should be your website theme demo comes with, do not see the actual page, do not know how to deal with the.

  8. Hi Milkman, I'm getting HTTP 500 internal server error when downloading Elementor plugin, and I also get error when registering an account on Elementor official website. I am building the site locally, phpstudy integrated environment

  9. Hello, I am going to do web content writing for a company, and now the company has its own website B2B, can Elementor plugin be used?

  10. Hello, it always prompts that something is wrong, please try again. I'll try a few more times here to see, it may also have something to do with accessing some Google related services that creates obstacles.

  11. Hi, I imported the theme template and then edited the page with Elementor. The original page has the template's logo on the top right, and when I click on it to edit it with Elementor, the menu bar of Elementor covers the logo part, so I can't edit the pickup logo image. What do I need to do to solve this situation? Thank you!

  12. Hello Milkman, I'm new to ELEMENTOR and I don't know what's going on.
    Select the title or image to be edited, and then select the style on the left, it does not show the style of the menu, tried to remove and install, or the same to select the style on the card.

    But you can add information, and every time you add information, you are prompted to update, is it every time?

  13. Hello, I would like to ask you about the "shortcode".
    Downloaded and installed the plugin YITH plugin in the wp backend, and inserted the short code through elementor editor: [yith_ywraq_button_quote]
    But the page doesn't generate the button, it just shows the shortcode itself that I entered: [yith_ywraq_button_quote]
    How do I troubleshoot and fix this problem? Thank you!

    1. No, after all, it costs money to buy. The current situation Elementor free version is enough for many sites. generateblock those effects actually use ele basically can also get out.

    1. 破解版,传上去随便哪个网站都可以用,但是只能用他的pro功能,不能用他在线的模板素材。正版的是一个网站绑定一个授权,可以用功能和在线模板库。模板库就是给你做了一些现成的模板,你可以直接点击导入到你网站上使用。

  14. 现在购买了正版,到期后不续费了,那之前建站时用的那些Pro版本的元素和模板,是不是就用不了了?

  15. 奶爸,你好,用elementor做完前端页面后,如何调取数据库数据呢,比如要实现新闻列表和详情页动态数据,怎么实现呢?

Leave a Reply

Your email address will not be published.

Scroll to Top