🚀 Is building a website too difficult? Let me guide you step by step—Learn about the 「Naibabiji WordPress Website Building Coaching Service」 →

Elementor Tutorials 2026 Complete Guide for Beginners to Build Websites with Elementor

A guide to using Elementor, the world's leading WordPress visual page builder plugin. Learn to design professional websites with Elementor from scratch, no programming knowledge required.

100,000+ Users Choose
Zero Foundation Easy to Get Started
Professional-Level Design Results

What is Elementor?

Learn about this powerful WordPress page builder

Elementor is the most popular visual page builder plugin on the WordPress platform, used by over 10 million websites worldwide. You can design and generate web pages through Elementor's drag-and-drop interface without needing professional programming skills. This Elementor Tutorialswill help you master this powerful tool from scratch.

There are many excellent visual web design tools (Website Builders) on WordPress, and Elementor is a standout among these page builders. It provides an intuitive drag-and-drop interface, rich design elements, and a professional template library, enabling anyone to create professional-grade websites.

Elementor Version Differences

Free Version

  • Basic Drag-and-Drop Editor
  • 30+ Basic Widgets
  • Basic Template Library
  • Responsive Design
  • Basic Style Controls
Free

Pro Version

  • 90+ Advanced Widgets
  • 300+ Professional Templates
  • Theme Builder
  • WooCommerce Support
  • Popup Builder
  • Form Builder
  • Animation Effects
  • Global Style System
$59/year

Do you need to use Elementor?

If you fit any of the following situations, Elementor is an ideal choice:

  • Want to create a professional website but don't know how to code
  • Need to quickly build website prototypes
  • Want full control over website design
  • Need to create complex page layouts
  • Want to collaborate with clients on design in real-time

With Elementor, you can create various types of websites: corporate websites, personal blogs, e-commerce websites, portfolio websites, landing pages, etc.

About Elementor Pro Cracked Version

Although there are cracked versions of Elementor available for download online, they come with the following issues: security risks, limited functionality, inability to receive updates, and lack of technical support. It is recommended to purchase the official version to obtain full features, security guarantees, and technical support.

Elementor Installation Tutorial

Detailed step-by-step installation guide

🌐

Prepare WordPress Website

The prerequisite for using Elementor is that you already have a WordPress website. If not, please refer toWordPress Installation Tutorialto first build a WordPress website.

System Requirements:WordPress 5.0+, PHP 7.4+, MySQL 5.6+, it is recommended to use a theme with good compatibility.
⬇️

Install Elementor Plugin

Go to the WordPress Admin Dashboard, select Plugins → Add New, search for "elementor", find the official plugin (Author: Elementor.com) and install and activate it.

Alternatively, you candownload from the WordPress official plugin repositoryand upload the installation package for installation.

Recommended 👉Elementor Complete Chinese Language Localized Version Download

⚙️

Complete Initial Setup

After activation, a setup wizard will appear. You can choose to skip the account creation step. It is recommended to use a theme with good compatibility such asAstra Themeor GeneratePress.

Theme Recommendation:It is not recommended for beginners to use the Hello Theme because it is a completely blank theme, requiring the design of all elements from scratch, which can be quite challenging for newcomers.

After setup is complete, you will see Elementor-related options in the left-hand menu of the WordPress Admin Dashboard, indicating a successful installation.

Elementor Usage Tutorial

Starting with Creating Your First Page

Create Your First Elementor Page

Step 1: Create a New Page

In the WordPress Admin Dashboard, select Pages → Add New, enter the page title, then click the "Edit with Elementor" button at the top of the page.

Click to view larger image

Step 2: Understand the Workspace Interface

Left-side Elements Panel

Contains all available widgets and elements, categorized into Basic, Pro, General, etc. Features with a lock icon are Pro version functions.

Central Editing Area

Real-time preview and editing of your page content, offering a WYSIWYG editing experience.

Settings Panel

Displays detailed setting options after selecting an element, including three tabs: Content, Style, and Advanced.

Top Toolbar

Contains functional buttons such as Responsive Preview, History, and Settings.

Click to view larger image

Step 3: Start Designing

Method 1: Start with a Template

Elementor itself has few built-in templates. It is recommended to use templates that come with themes like Astra, import them, and then modify them. This is the fastest website building method.

Method 2: Start from Scratch

Drag and drop elements from the left panel into the editing area to gradually build your page layout. Suitable for users with specific design requirements. (Screenshot 1 Screenshot 2 Screenshot 3

It is recommended to use Containers to organize the page structure, as they are more flexible and modern than the old Sections.

TheFree Feature Enhancementssection below includes more practical functional widgets and also contains some good free templates to choose from.

💡 Pro Tip

It is recommended for beginners to first use templates for learning and modification, as this helps in understanding Elementor's design philosophy and best practices more quickly. After becoming familiar with the basic operations, try designing from scratch.

Detailed Explanation of Advanced Features

Master these techniques to make your designs more professional

PERFORMANCE

Performance optimization

Features like optimizing DOM output and CSS merging ensure fast website loading speeds and a good user experience.

DESIGN
🎨

Global Style Settings

Unified settings for website colors, fonts, spacing, and other styles to ensure design consistency. Set once, apply site-wide.

RESPONSIVE
📱

Responsive Editing

Optimize display effects for desktop, tablet, and mobile respectively, ensuring perfect presentation on all devices. Styles for each breakpoint can be set independently.

NAVIGATION
🔗

Anchor Links

Create in-page jump effects to enhance user experience and page navigation. Simply add a CSS ID in the advanced settings.

ANIMATION
🎬

Animation Effects

Add entrance animations, hover effects, etc., to make pages more vivid and interesting. Supports fine-grained control over delay, duration, and more.

ADVANCED
🎯

Custom CSS

Provides custom CSS functionality for experienced users to achieve more precise style control.

HEADER
🏗️

Header & Footer Editing

Use the Elementor Pro Theme Builder to fully customize the header and footer design of your website, breaking free from theme limitations and achieving a unique brand image.

TEMPLATE
📄

Page Template Creation

Create reusable page templates and blocks to improve design efficiency. Supports dynamic content display, suitable for various page types such as Post pages, product pages, etc.

Free Elementor Feature Enhancement

Extend Elementor functionality via third-party plugins

Essential Addons for Elementor

One of the most popular Elementor extension plugins, offering 90+ extra widgets, including practical features like data tables, price tables, team member displays, etc. (Free Version Purchase Premium at a Discount

Data Table Price Table Team Showcase Countdown Progress Bar

Premium Addons for Elementor

A high-quality collection of extension widgets, including advanced features such as carousels, charts, maps, etc., with exquisite design and excellent performance. (Free Version Purchase Premium at a Discount

Carousel Chart Display Map Integration Video Playback Gallery

ElementsKit Elementor Addons and Templates

One of the most comprehensive Elementor extension plugins, offering 90+ widgets and 900+ pre-made templates, including advanced features like header/footer builder, mega menu, etc. Installation count exceeds 1 million+. (Free Version Purchase Premium at a Discount

Header/Footer Builder Mega Menu Widget Builder 900+ Templates WooCommerce Support

Happy Addons for Elementor

An Elementor extension plugin focused on user experience, providing 50+ exquisite widgets and rich design options, with a friendly interface and excellent performance, deeply loved by users. (Free Version Purchase Premium at a Discount

Card Design Icon List Image Comparison Timeline Animation Effects

Unlimited Elements For Elementor

A unique Elementor extension plugin offering unlimited widgets and a template library, supporting custom widget creation, allowing your design creativity to extend infinitely. (Free Version Purchase Premium at a Discount

Unlimited Widgets Custom Creation Template Library Advanced Animation Third-party Integration
⚠️ Usage Recommendation:It is not recommended to install too many extension plugins, as this may affect website loading speed and stability. It is advised to select 1-2 high-quality extensions based on actual needs to avoid functional redundancy.

Elementor Pro Advanced Features

Unlock professional-level website design capabilities

Theme Builder

Fully customize all templates such as website headers, footers, Post pages, product pages, etc., achieving true full-site design freedom.

  • Custom Header Design
  • Personalized Footer Layout
  • Post Page Template
  • Product Page Design
  • 404 Error Page
  • Search Results Page

Popup Builder

Create various types of pop-ups to enhance user engagement and conversion rates. Supports multiple trigger conditions and beautiful animation effects.

  • Email Subscription Pop-up
  • Promotional Campaign Pop-up
  • Exit Intent Pop-up
  • Age Verification Pop-up
  • Cookie Notification Pop-up
  • Video Playback Pop-up

Form Builder

Create various forms without additional Plugins, integrate email marketing services, and support conditional logic and file uploads.

  • Contact Us Form
  • Email Subscription Form
  • Survey Questionnaire Form
  • File Upload Form
  • Multi-step Form
  • Payment Form

WooCommerce Builder

Designed specifically for e-commerce websites, it allows customization of product pages, shopping carts, checkout pages, etc., to create a unique shopping experience.

  • Product Page Design
  • Product List Layout
  • Shopping Cart Page
  • Checkout Process
  • My Account Page
  • Thank You Page

Ready to upgrade to the Pro version?

Gain complete website design freedom and unlock all professional features

Purchase Elementor Pro Now - Only 69 RMB/Year

Genuine License | Installation & Activation Included | Lifetime Updates

Elementor Frequently Asked Questions

Resolving Common Questions During Use

🎬

How to Add a Slideshow Slider in Elementor?

+

There are two methods to add a slideshow:

  1. Using Shortcode:If professional slideshow plugins like Slider Revolution or Smart Slider 3 are installed, add the "Shortcode" Widget in Elementor and paste the slideshow shortcode.
  2. Using Pro Version Slider:Elementor Pro provides built-in Media Carousel and Slides Widgets, which can be dragged and dropped directly, supporting various transition effects.
🎨

How to Modify Text Size and Color in Elementor?

+

Steps to modify text style:

  1. Select the text element you want to modify (e.g., Heading, Text Editor)
  2. Click the "Style" tab in the left settings panel
  3. Set properties like font size, color, font weight, etc., in the "Typography" section
  4. You can set different styles for desktop, tablet, and mobile respectively
  5. Using Global Colors and Fonts ensures consistent website style
📝

How to Add a Contact Form in Elementor?

+

There are several methods to add a contact form:

  1. Using Pro Version Form:Elementor Pro has a built-in form builder, allowing direct creation of various forms, supporting email notifications and third-party integrations.
  2. Third-party Plugins:Install plugins like Contact Form 7, WPForms, or Ninja Forms, create a form, and add it to the page using a shortcode.
  3. Recommended Plugins:Fluent Forms (free & simple), WPForms (feature-rich), Gravity Forms (professional-grade)
🔗

How to Add Scroll Effects in an Elementor Page?

+

Creating In-page Scroll (Anchor Links):

  1. Select the target element or container you want to scroll to
  2. Enter a unique ID (e.g., section1) in the "CSS ID" field under "Advanced" settings
  3. Enter #section1 in the URL of a button or link
  4. After saving the page, click the link to smoothly jump to the corresponding position.
  5. You can adjust the scroll offset in the WordPress Customizer.
📱

How to edit the mobile display effect in Elementor?

+

Responsive editing steps:

  1. Find the responsive mode icon in the top toolbar of the Elementor editor.
  2. Click to switch to tablet (768px) or mobile (360px) view.
  3. Adjust the display effect of elements in the corresponding view.
  4. You can set font size, spacing, show/hide, etc., for different devices.
  5. Use the "Show only on device" feature to display different content for different devices.
🎯

How to modify the website header and footer in Elementor?

+

Methods to modify header and footer:

  1. Using Pro version:Elementor Pro's Theme Builder allows direct editing of Header and Footer, providing complete design freedom.
  2. Free solution:Install the "Header Footer Elementor" or "Elementor Header & Footer Builder" plugin.
  3. Theme support:Choose themes that support Elementor, such as Astra, GeneratePress, OceanWP, etc.
  4. Custom solution:Use the theme's custom features combined with Elementor to design specific areas.

What to do if an Elementor website loads slowly?

+

Methods to optimize Elementor website speed:

  1. Enable caching:Use caching plugins like WP Rocket, W3 Total Cache, etc.
  2. Image optimization:Use WebP format and enable lazy loading.
  3. Reduce plugins:Keep only necessary Elementor extension plugins.
  4. Choose good hosting:Use SSD storage and CDN acceleration services.
  5. Elementor settings:Enable optimization options in Elementor > Settings

More Elementor tutorial resources

Continue in-depth learning of Elementor

🛠️

Recommended Plugins

  • Essential Addons for Elementor
  • Ultimate Addons for Elementor
  • Elements Kit
  • JetElements
  • PowerPack for Elementor
🎨

Design Resources

  • Elementor Official Template Library
  • Envato Elements
  • Template Monster
  • Freepik Design Materials
  • Unsplash Free Images
🎓

Learning Platforms

  • Elementor Academy
  • YouTube Official Channel
  • Naibabiji Blog
  • Elementor Community Forum
  • Facebook User Groups

Need professional Elementor website building services?

If you need professional WordPress website building services, or encounter problems while using Elementor, feel free to contact us. We provide one-stop services from website planning to launch and operation.

If this tutorial was helpful to you, feel free to share it with more friends in need. Any questions can also be discussed in the comments below.

4.1/5 - (17 votes)

💬Discussion and Exchange

If you have any questions or experience sharing about Elementor, feel free to leave a comment below for discussion.

<

„Elementor Tutorial: Learn How to Build a Website with Elementor in One Article“ has 78 comments

  1. Yun Piaowusays:

    When designing the archive template, the condition was set to author archive. But after publishing, the archive page still uses the default style of the original Theme, and the self-designed archive template did not take effect. I don't know the reason. When the condition is switched to date, the template works. It's really strange. Hope Naiba can explain.

    • Leesays:

      I tested it, and there is no problem after setting it up. Maybe you set something incorrectly. Query settings filter by author, all dates, sorted by date, descending order. After setting, multi-user only displays the article archive of the user you set.

  2. davinsays:

    After installing the Essential Addons Plugin, the Elementor panel on the left turned gray and cannot be dragged. Then, after disabling the Essential Addons Plugin, it returned to normal. What is the reason for this?

    • Leesays:

      This kind of problem is usually caused by Plugin compatibility and requires specific analysis to determine the cause.

  3. Immediatelysays:

    Can you share the Chinese version?

  4. BritishRosessays:

    Elementor is a page editor. I don't quite understand the relationship between Elementor and a Theme:
    I want to build a B2B foreign trade website, mainly to receive inquiries.
    1) Is the free version of Elementor alone sufficient? Since it allows drag-and-drop editing, why still use a Theme?
    2) Can Elementor Pro replace a Theme?
    3) If using Flatsome, do I still need to install Elementor?
    4) For a B2B website, is WooCommerce necessary?
    5) For a B2B website, what combination is good? Elementor + Astra?
    I really haven't grasped the concepts clearly. Please, Naiba, answer and clarify. Thank you.

    • Leesays:

      1. Yes, it can.
      2. Yes, but it's not recommended for beginners.
      3. No, Flatsome comes with its own builder.
      4. It depends; you can use it or not.
      5. What suits you best is the most suitable.
      Elementor is like a renovation team, and a Theme is like a house with different layouts. If you want to arrange the room layout yourself, then install Elementor's official Hello Theme and design the layout and style of each room yourself.

      • BRITISHROSESsays:

        Thank you very much. Your reply was so quick. Thanks a lot.
        1) For a B2C website, using Flatsome + WooCommerce, is there any problem? Do these two overlap?
        2) I just browsed another website, which mentioned using Elementor Pro + Astra free version (said to be the lightest). For a B2B website, how much difference does this combination have compared to using only Elementor Pro in terms of website building difficulty, aesthetics, and functionality?

        • Leesays:

          For B2C, no matter what Theme you use, WooCommerce must be installed.
          Website building difficulty, aesthetics, and functionality cannot be unified.

          • BRITISHROSESsays:

            „Website building difficulty, aesthetics, and functionality cannot be unified“ ??
            Sorry, I don't understand...

          • Leesays:

            It means there isn't an option that is low difficulty, aesthetically pleasing, and feature-rich. Powerful features definitely come with high difficulty. Good aesthetics also require design skills, so it's not simple either.

  5. BRITISHROSESsays:

    Thank you very much. One last question: for a B2B website, if I want to do multi-product package inquiries, like a quote cart, is the combination of Elementor Pro + WooCommerce + YITH WooCommerce Request a Quote okay? Is WooCommerce a must? Since it's only B2B and no actual transaction is needed, if Elementor Pro can 'add to cart', can I not use WooCommerce? Sorry if my question sounds silly, but I'm genuinely confused. Please advise, thank you.

  6. Barbosasays:

    I have a question. After installing Elementor, it fails to load, and even safe mode doesn't work. What could be the reason?

    • Leesays:

      This situation is usually due to network or compatibility issues. Where is your website server located? You can also try activating only Elementor to see if it works.

      • BARBOSAsays:

        Let me try switching networks. If I want to add text on an image, how should I do it? Or, if I want to place a question on an image, how should I set it up?

  7. Cheng Caihongsays:

    Hello Naiba, when I was building my site, whether I click on the homepage, About Us, Contact Us, or any other page, they all open as the homepage. I don't know where the problem is. Then, following an online tutorial, I changed the reading settings, and now the homepage has become uneditable. Also, it often freezes and I can't access the website, showing a 504 error. Now I'm confused.

    • Leesays:

      This kind of issue can't be identified just from your description. It's likely caused by something wrong with the server or website settings.

      • Cheng Caihongsays:

        The 504 error it shows will automatically resolve after a few hours, and then I can access the homepage again.

        • Leesays:

          A 504 error indicates a Gateway Timeout, meaning the server acting as a gateway or proxy did not receive a timely response from the upstream server.
          A 504 error is usually caused by improper server configuration or abnormal resource usage leading to server crashes; there can be many reasons.

  8. Sui Yuanfengsays:

    When using Elementor to design a website, the homepage calls a post list. How can I make the post title and post date display horizontally? I can't find the setting in Elementor. Please advise.

    • Leesays:

      This depends on whether the Elementor add-ons you installed or the elements that come with your Theme support horizontal layout. If they don't, then you can't set it up that way. Elementor itself visualizes some code content, but if that code isn't there, you can't visualize the desired effect.

  9. sgsays:

    May I ask how to remove the 'download app' on the page?

    • Leesays:

      This is likely something that comes with your website Theme's demo. Without seeing the actual page, I don't know how to handle it.

  10. Haosays:

    Hello Naiba, when I was downloading the Elementor Plugin, I encountered an HTTP 500 Internal Server Error. I also encountered an error when registering an account on the Elementor official website. How can I resolve this? I am building the site locally using the phpStudy integrated environment.

    • Leesays:

      For local environments, the network may be unstable; it is recommended to use an online environment for testing.

  11. Xiao Wangsays:

    Hello, I am preparing to join a company to write web content. The company already has its own B2B website. Can the Elementor Plugin be used?

  12. dhssays:

    Why does the Elementor account registration always fail?

  13. dhssays:

    Hello, it always prompts 'Something went wrong, please try again.' I will try a few more times here. It might also be related to difficulties accessing some Google-related services.

  14. Li Qiangsays:

    Hello, after importing the Theme template, I am editing the webpage with Elementor. The original webpage had the template's logo in the top right corner. However, when I open it for editing with Elementor, Elementor's menu bar covers the logo area, making it impossible to edit or replace the logo image. How can this issue be resolved? Thank you.

    • Leesays:

      The logo is usually set in the Theme settings or in a separate header editor; it is not modified when editing a specific Page.

  15. sharelysays:

    Naiba, hello, I'm new to Elementor and not sure what's happening.
    When I select a title or image area that needs editing, and then choose a style on the left, the style menu does not display. I've tried deleting and reinstalling, but it still gets stuck when selecting a style.

    However, I can add information. Every time I add information, it prompts for an update. Do I need to update every time?

    • Leesays:

      Your issue is quite complex; I haven't encountered it before. It likely cannot be resolved through verbal description alone.

  16. Emilysays:

    Hello, I would like to ask about the „Shortcode“ issue:
    I downloaded and installed the YITH Plugin in the WP Admin Dashboard, and inserted the shortcode via Elementor editing: [yith_ywraq_button_quote]
    However, the page did not generate a button; it only displayed the shortcode I entered: [yith_ywraq_button_quote]
    How can I troubleshoot and fix this issue? Thank you!

  17. Spinachsays:

    Is there any introduction about GenerateBlocks and GeneratePress?

    • Leesays:

      No, after all, they all require purchasing. Currently, the free version of Elementor is sufficient for many websites. Those effects from GenerateBlocks can basically also be achieved using Elementor.

  18. says:

    Hello, what's the difference between the cracked version on the website and the genuine version where one Elementor account can support multiple websites?

    • Leesays:

      The cracked version can be uploaded and used on any website, but you can only use its Pro features, not its online template assets. The genuine version binds one license to one website, allowing you to use both the features and the online template library. The template library provides you with ready-made templates that you can directly click to import and use on your website.

  19. says:

    If I purchase the genuine version now and don't renew after it expires, will the Pro version elements and templates used during website building become unusable?

    • Leesays:

      If you don't renew, you won't be able to edit or upgrade, but what's already built won't be affected and will remain usable.

  20. says:

    Naiba, hello, after finishing the frontend page with Elementor, how do I fetch data from the database? For example, how to implement dynamic data for a news list and detail pages?

Post Reply

Your email address will not be published. Required fields are*marked

🔒 Security Verification
Find kiwifruit
🍓
Strawberry
🍎
Apple
🍊
Orange
🥝
Kiwifruit

×
二维码

Scan to Follow