Estimated duration: 90 minutes

By the end of this lesson, you will have Elementor installed and activated on your WordPress with a basic screen layout designed.

Lesson 1.1: Step-by-step Elementor installation

With a clean WordPress installation, only with the plugins “Classic Editor”, “Widget Editor” and the “Betheme” theme, we will proceed to install the Elementor page builder.

Step 1: Access your WordPress dashboard

1. Open your web browser (Chrome, Firefox, etc.).
2. Type your WordPress site address followed by /wp-admin
   • Example: https://yoursite.com/wp-admin
3. Enter your username and password.
4. Click “Log In”.

Step 2: Navigate to the plugins area

Once inside the WordPress dashboard:

1. In the left menu, look for the “Plugins” option.
2. Hover over “Plugins”.
3. In the submenu that appears, click on “Add New”.

Visual explanation:

├── Dashboard
├── Posts
├── Media
├── Pages
├── Comments
├── **APPEARANCE**
├── **Plugins** ← Click here!
│   ├── Installed Plugins
│   └── **Add New** ← Then here!
└── Tools

Step 3: Search for Elementor

On the “Add Plugins” screen:

1. Look at the top right of the screen.
2. You will see a search box that says “Search plugins”.
3. Type exactly: “Elementor”.
4. Press Enter or click the magnifying glass.

Step 4: Identify the correct plugin

You will see several results. You need to find the official one:

Beware of these:

• “Elementor Pro” – This is the paid version
• “Elementor Addons” – These are extensions
• “Elementor Hello” – This is a theme, not the plugin

Step 5: Install Elementor

Once you have identified the correct plugin:

1. Click the “Install Now” button that is under the name “Elementor”.
2. Wait a few seconds while WordPress downloads and installs the plugin.
3. You will see that the button changes to say “Activate”.

Step 6: Activate Elementor

1. Click the “Activate” button.
2. You will see a message at the top that says: “Plugin activated.”
3. Notice that in the left menu now appears “Elementor” as a new option.

Verify correct installation

To make sure everything is fine:

1. Go to any existing page
   • Left menu → “Pages” → “All Pages”
   • Choose any page and click “Edit”
2. You should see a new blue button that says “Edit with Elementor”

If you see this button, congratulations! Elementor is installed correctly.

Lesson 1.2: Installing a compatible theme

Objective: Install a lightweight theme that works perfectly with Elementor.

⚠️ Attention: if you have Betheme, always use this one. Read the following only as documentation/learning ⚠️

Why do we need a compatible theme?

• Some themes have their own design system.
• This can generate conflicts with Elementor.
• Lightweight themes allow Elementor to have total control.

Step 1: Go to the themes area

1. In the left menu, look for “Appearance”.
2. Hover over “Appearance”.
3. Click on “Themes”.

Step 2: Add new theme

1. At the top of the screen, you will see a button “Add New”.
2. Click on it.

Step 3: Search for “Hello Elementor” (or install paid Betheme)

1. In the search box (top right), type: “Hello Elementor”.
2. Press Enter.

Step 4: Install the theme

1. You will find the theme “Hello Elementor” created by Elementor.com.
2. Hover over the theme’s image.
3. A button “Install” will appear.
4. Click “Install”.
5. Wait for the installation to complete.
6. The button will change to “Activate”.
7. Click “Activate”.

What is Hello Elementor?

• It is an ultra-lightweight theme (less than 6KB).
• It does not include its own styles.
• It allows Elementor to control all design.
• It is 100% free.
• Maintained by the Elementor team.

Step 5: Verify activation

After activating Hello Elementor:

1. Open your website in a new tab.
2. Notice that the design is very basic, almost blank.
3. This is normal – it means the theme is ready for Elementor to take control.

Lesson 1.3: Basic Elementor configuration

Objective: Configure the essential Elementor options for a good start.

Access general settings

1. Visit your Home screen as if you were any user.
2. At the top menu you will see “Edit with Elementor”, click on it.
3. The content editor screen will load.
4. In the top bar, on the left side, you will see the logo, click on it and select “Site Settings“.
5. You will see options like “Global Colors, Global Fonts, typography, buttons, margins, form fields, etc.” These are values you can modify and they will apply to the entire website.
6. Make the changes you want and click the button at the very bottom “Save Changes“.

Lesson 1.4: Create a test page

Objective: Create your first page with Elementor to verify that everything works.

Step 1: Create new page

1. In the left menu, click on “Pages”.
2. Click on “Add New”.

Step 2: Name the page

1. In the “Add title” field, type: “My first page with Elementor”.
2. Do not write anything in the classic WordPress editor.

Step 3: Open with Elementor

1. Look for the blue button that says “Edit with Elementor”.
2. It is located just above the text editor.
3. Click on it.

Step 4: First contact with the editor

Congratulations! You are inside the Elementor editor.

What you should see:

1. Left panel: List of widgets (icons).
2. Central area: Empty space with a “+” button.
3. Right panel: Empty for now.

Step 5: Test a simple widget

1. In the left panel, look for “Heading”.
2. Drag it (click + hold + move) to the central area.
3. Release the mouse.

Step 6: Configure the heading

1. Click on the widget you just added.
2. In the left panel, go to the “Content” tab.
3. In the “Title” field, type: “Hello World! My first page with Elementor”

Step 7: Save and view

1. Click the “Publish” button (bottom left or top right depending on the version).
2. Click on “View Page” (eye icon).
3. You will see your live page!

PRACTICAL EXERCISE FOR MODULE 1

Objective: Verify that you have learned everything correctly.

Task 1: Clean installation

1. Uninstall Elementor if you already had it.
2. Reinstall it from scratch following the steps.

Task 2: Complete configuration

Configure Elementor with these exact values:

• Primary color: #4CAF50 (green).
• Primary font: ‘Open Sans’
• Space between widgets: 15

Task 3: Test page

Create a page called “Module 1 Practice” that contains:

1. A main heading.
2. A paragraph of text.
3. An image (you can use any).
4. A button.

Final verification:

Your page should look like this in the editor:

[HEADING: "Practice completed"]
[TEXT: "I have learned to install and configure Elementor"]
[IMAGE: Any image]
[BUTTON: "Read more"]

FREQUENTLY ASKED QUESTIONS

Q: Do I need Elementor Pro to start?

A: NO. Elementor Free is more than enough to learn and create professional sites.

Q: Can I change the theme afterwards?

A: YES, but some themes may not be compatible. Hello Elementor is the safest option for beginners. For professionals, themes like BeTheme can be used (recommended).

Q: Does Elementor slow down my site?

A: It is a heavy page builder, so it is recommended not to install many plugins on a WordPress website with this builder.

ADDITIONAL RESOURCES

1. Official documentation: https://docs.elementor.com/
2. Support forum: https://wordpress.org/support/plugin/elementor/

NEXT MODULE: “First contact with the editor” – You will learn to navigate the interface, use basic widgets, and create your first section.