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

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

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

100,000+ User Choice
Zero Foundation Easy to Get Started
Professional-Level Design Effects

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. ThisElementor Tutorialswill help you master this powerful tool from scratch.

There are many excellent visual web design tools (Website Builders) on WordPress, and Elementor is the leader among these page builders. It provides an intuitive drag-and-drop interface, rich design elements, and a professional template library, allowing anyone to create professional-level 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 a website prototype
  • Hope to have 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 Elementor cracked versions available for download online, they have the following issues: security risks, limited functionality, inability to receive updates, lack of technical support. It is recommended to purchase the genuine version to obtain full features, security assurance, and technical support.

Elementor Installation Tutorial

Detailed installation step-by-step guide

🌐

Prepare a WordPress Website

The prerequisite for using Elementor is that you already have a WordPress website. If not, please refer toWordPress Installation Tutorialto first set up 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 to install.

Recommended 👉Elementor Complete Chinese Language Pack 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 themes with good compatibility such asAstra Themeor GeneratePress.

Theme Recommendation:It is not recommended for beginners to use the Hello Theme, as it is a completely blank theme that requires designing 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

Start by 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 Element 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 for the selected element, including Content, Style, and Advanced tabs.

Top Toolbar

Contains functional buttons for responsive preview, history, settings, etc.

Click to view larger image

Step 3: Start Designing

Method 1: Start from a Template

Elementor itself comes with limited templates. It is recommended to use templates included with themes like Astra, import them, and then make modifications. This is the fastest method for building a website.

Method 2: Start from Scratch

Drag elements from the left side to the editing area, gradually building 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.

The followingFree Feature Enhancementssection includes more practical functional widgets and also offers some good free templates to choose from.

💡 Pro Tip

It is recommended for beginners to start by using templates for learning and modification, as this helps in quickly understanding Elementor's design philosophy and best practices. 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

Optimize DOM output, CSS merging, and other functions to ensure fast website loading and excellent 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 separately to ensure 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 lively and interesting. Supports fine control over delay, duration, and more.

ADVANCED
🎯

Custom CSS

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

HEADER
🏗️

Header & Footer Editing

Fully customize your website's header and footer design using the Elementor Pro Theme Builder, breaking free from theme limitations to achieve a unique brand identity.

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 through 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, pricing tables, team member displays, etc. (Free Version Purchase Premium Version at a Discount

Data Table Pricing Table Team Showcase Countdown Progress Bar

Premium Addons for Elementor

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

Carousel Chart Display Map Integration Video Player 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 a header & footer builder, mega menus, etc. Installation count exceeds 1 million+. (Free Version Purchase Premium Version 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, offering 50+ exquisite widgets and rich design options, with a user-friendly interface and excellent performance, highly favored by users. (Free Version Purchase Premium Version at a Discount

Card Design Icon List Image Comparison Timeline Animation Effects

Unlimited Elements For Elementor

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

Unlimited Widgets Custom Creation Template Library Advanced Animations Third-Party Integrations
⚠️ Usage Recommendations: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 the website header, footer, 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 exquisite 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, support conditional logic and file uploads.

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

WooCommerce Builder

Designed 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

Buy Elementor Pro Now - Only 69 yuan/year

Genuine License | Installation & Activation Included | Lifetime Updates

Elementor Frequently Asked Questions

Resolve common questions encountered 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 that can be dragged and dropped directly, supporting multiple 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 font size, color, font weight, and other properties 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 the Pro version form:Elementor Pro has a built-in form builder, allowing you to directly create various forms, supporting email notifications and third-party integrations.
  2. Third-party plugins:Install plugins like Contact Form 7, WPForms, Ninja Forms, etc., and add the form to the page using a shortcode after creation.
  3. Recommended plugins:Fluent Forms (free and simple), WPForms (feature-rich), Gravity Forms (professional-grade)
🔗

How to add scroll effects in an Elementor page?

+

Creating in-page jumps (anchor links):

  1. Select the target element or container you want to jump to
  2. Enter a unique ID (e.g., section1) in the "CSS ID" field under "Advanced" settings
  3. Enter #section1 in the URL of the button or link
  4. After saving the page, clicking the link will 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 the header and footer:

  1. Using the 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 a Theme that supports 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
  2. Image Optimization:Use WebP format, enable lazy loading
  3. Reduce Plugins:Only keep necessary Elementor add-on 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 Assets
  • Unsplash Free Images
🎓

Learning Platforms

  • Elementor Academy
  • Official YouTube 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 issues 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 about Elementor or experiences to share, feel free to discuss them in the comments below.

<

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

  1. A somewhat well-known gentlemansays:

    Hello Naiba, after I added a page template in the backend and modified it, when I go to view my page, it's missing elements and the background color is also incorrect. The backend is indeed fine. Seeking your advice.

  2. Liu Honglusays:

    It would be best to create a video tutorial that step-by-step explains each component. I've watched many tutorials, none were useful, all are in English, and they all say the same thing. None address the issues I encounter.

  3. says:

    After I downloaded this editor from the plugin store and went to use it to create a new page, the tool couldn't be dragged at all. The tutorial above also says to directly hold and drag the title into it, but mine won't drag out. Is there a way to solve this?

    • Leesays:

      This kind of issue is most likely caused by an operational error on your part. It's impossible to diagnose the problem without watching you operate it in person.

      • says:

        Thank you! Actually, when I tried using this plugin again on the third day, it worked normally. On the first day after installation, it just wouldn't work no matter what. I tried uninstalling and reinstalling it many times.

  4. axfdsays:

    Well written, hehe.

  5. says:

    Hello, I don't need Elementor's mobile display mode. How can I set it so that when entering the webpage from a mobile device, it still displays the PC mode?

  6. Kaspa's Technical Blogsays:

    What are the differences between the free and paid versions of Elementor?

  7. laisays:

    Hello, how can I achieve in Elementor a layout where a group of small images is on the left, and clicking on a small image displays a large image on the right?

    • Leesays:

      Among the existing Elementor extensions I've encountered, I haven't seen the specific effect you mentioned. Usually, clicking a small image displays the large image full-screen.

  8. 恒昊says:

    I have a question. After I finished decorating with Elementor, I found that my code is full of Elementor fields.
    How should I resolve this?

  9. says:

    Does a website built with Elementor have specific server requirements? Can a Tencent Cloud instance in China with 2 cores and 4GB RAM run it?

  10. Nathansays:

    Can the Elementor Pro version purchased be used on Bluehost's hosting?

    • Leesays:

      Yes, this is a WordPress Plugin, and it has nothing to do with which server you use.

      • Nathansays:

        If it cannot be used, can I get a refund?

        • Leesays:

          Buy it from the official Elementor website; there is a refund period, and you can apply for a refund.

          • Nathansays:

            If I buy it from you and it cannot be used, can I also get a refund on the official website?

          • Leesays:

            If you buy it from me, you definitely cannot get a refund on the official website. However, I said this has nothing to do with the hosting. You can install it first and then pay.

  11. says:

    Hello Naiba, I am using Starter Templates to build my site. When I first used Elementor to edit the homepage, I found many containers and elements in its structure. Without modifying the page, I later changed some settings unknowingly, causing all the content on the page to end up in a single container's text editor when editing the same page with Elementor. Is it because the starter template is incompatible?

  12. Ksays:

    How long does it take to get the PRO version set up after purchase?

Post Reply

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

🔒 Security Verification
Find "Smiling Eyes"
😄
Smile
😃
Laugh
😀
Happy
😊
Smiling Face with Smiling Eyes

×
二维码

Scan QR Code to Follow

AI Website Building Assistant

🤖
Hello! I am the Naibabiji AI Assistant. How can I help you?
Quick Consultation: