Estimated duration: 2 hours

Objective: Learn and practice the interface of the Elementor visual editor.

📋 LESSON 2.1: THE INTERFACE YOU WILL ENCOUNTER

Create a new page with any name you like and publish it.

Once published, edit it with Elementor:

• Either from “Pages – All Pages – Edit with Elementor”.
• Or from the public part, on the page you want to edit and in the top bar click “Edit with Elementor“.

When you enter the Elementor editor for the first time, you will see this layout:

🔝 TOP BLACK BAR (Your main control panel)

[☰] [➕] [⚙️] [🕒] | [🖥️] [💻] [📱] | [📋] [🆕] [🔍] [📐] [👁️] [🎯]

Explanation of each element:

Left →
• ☰ Menu – Shows/hides the widgets panel.
• ➕ Add Element – Quick access to widgets.
• ⚙️ Page Settings – General configuration.
• 🕒 History – Version control.

Center →
• 🖥️ Desktop – View for computers.
• 💻 Tablet – View for tablets.
• 📱 Mobile – View for mobile phones.

Right →
• 📋 Checklist – Optimization tools.
• 🆕 What’s New – Elementor updates.
• 🔍 Finder – Search for widgets and settings.
• 📐 Structure – View element hierarchy. It’s a list with all columns, widgets, etc.
• 👁️ Preview – View as visitor.
• 🎯 Publish – Publish/update page.

⬅️ LEFT PANEL (Your toolbox)

Here you will find ALL widgets organized by categories:

🔍 Search widget...
───────────────
🏗️ BASIC ELEMENTS
• Heading
• Image
• Text Editor
• Video
• Button
• Divider
• Spacer
• Google Maps
• Icon
───────────────
🚀 PRO ELEMENTS
(If you have the Pro version)
───────────────
📁 MY ELEMENTS
(Your saved templates)

🎨 CENTRAL AREA (Your blank canvas)

This is the space where you will build your page. Initially you will see:

╔══════════════════════════════════════════╗
║                                          ║
║        🎯 WORK AREA                       ║
║                                          ║
║   [  ➕  ] ← Click here to start          ║
║                                          ║
║     Your design will appear in this zone  ║
║                                          ║
╚══════════════════════════════════════════╝

➡️ RIGHT PANEL

Only the “Structure” panel will float if you select it in the top bar, towards the left. It’s useful to always have it active to schematically locate which widget you are on and to reorder Elementor by dragging and dropping.

🎯 LESSON 2.2: HOW TO START BUILDING

STEP 1: CREATE YOUR FIRST SECTION

1. 🖱️ Click on the large ➕ button in the central area.
2. 🏗️ Select the “2 Columns” structure (50% | 50%).
3. ✅ Done! You now have your first section with two columns.

What you will see:

┌───────────────────────────────────────┐
│  SECTION (with light gray border)     │
│                                       │
│  ┌─────────────┐ ┌─────────────┐      │
│  │   COLUMN    │ │   COLUMN    │      │
│  │      1      │ │      2      │      │
│  │             │ │             │      │
│  │     [+]     │ │     [+]     │      │
│  │             │ │             │      │
│  └─────────────┘ └─────────────┘      │
└───────────────────────────────────────┘

STEP 2: ADD YOUR FIRST WIDGET

Let’s add a Heading in the left column:

1. 🧰 Open the left panel (click ☰ if closed).
2. 🔍 Search for the “Heading” widget in “Basic Elements”.
3. 🖱️ Click on it and hold it down.
4. ➡️ Drag it to column 1.
5. 🖐️ Release the mouse button.

✨ Congratulations! You’ve just placed your first widget.

⚙️ LESSON 2.3: HOW TO EDIT ELEMENTS CORRECTLY

COMMON BEGINNER MISTAKE:

❌ DO NOT double-click on the text to edit it.
❌ DO NOT look for formatting buttons like in Word.

CORRECT METHOD:

1. 🖱️ Click ONCE on the heading you added.
2. 👁️ Observe what happens:

AROUND the heading an icon appears:

[✏️] ← (to edit)

With the right button click on the pencil you will find options like:

[📋]      ← (duplicate)
[🗑️]      ← (delete)

In the LEFT PANEL, with the widget selected, you will now see:

┌────────────────────────────┐
│ 🎯 HEADING                  │
│                            │
│ 📋 CONTENT   🎨 STYLE       │ ← Main tabs
│    🚀 ADVANCED              │
│                            │
│ ➤ Title: "This is the..."  │ ← Your text here
│                            │
│ ➤ HTML Tag: H2             │ ← Heading type
│                            │
│ ➤ Link:                    │ ← To make it clickable
└────────────────────────────┘

TO EDIT THE TEXT:

1. 👉 Go to the left panel, “Content” tab.
2. 🖱️ Click on the “Title” field.
3. 🗑️ Delete the default text.
4. ⌨️ Type: “Welcome to My Website”.
5. 👀 Look! The change is instantaneous in the central area.

🎨 LESSON 2.4: THE 3 CONFIGURATION TABS

When you select ANY widget, in the left panel you will see these 3 tabs:

1. 📋 CONTENT (What it says)

Here you control the element’s content:

• ✏️ Texts – What is read.
• 🖼️ Images – What is seen.
• 🔗 Links – Where it goes.
• ⚙️ Options – Basic behavior.

Practical exercise:

1. 🖱️ Select your heading.
2. 👉 Go to the “Content” tab.
3. 🔽 Look for “HTML Tag”.
4. 🖱️ Change from “H2” to “H1”

2. 🎨 STYLE (How it looks)

Here you control the visual appearance:

• 🎨 Colors – Color palette.
• 🔤 Typography – Fonts and sizes.
• 📐 Alignment – Content position.
• ✨ Effects – Shadows, borders, etc.

Practical exercise:

1. 👉 Click on the “Style” tab.
2. 🎨 Look for “Text Color”.
3. 🖱️ Click on the color box.
4. 🎯 Choose a color you like.
5. 🔤 Try changing the size to 48px.

3. 🚀 ADVANCED (Technical control)

For more specific adjustments:

• 📏 Margins – External space.
• 🛡️ Padding – Internal space.
• 🎭 Animations – Entrance effects.
• 🛠️ Custom CSS – For experts.

Practical exercise:

1. 👉 Click on the “Advanced” tab.
2. 📏 Look for “Margins”.
3. ✏️ Type in “Top”: 20.
4. ✏️ Type in “Bottom”: 20.
5. 👁️ Observe how the heading gains space above and below.

🏗️ LESSON 2.5: COMPLETE YOUR FIRST SECTION

Let’s finish building our first complete section:

IN COLUMN 1 (We already have the heading):

1. 🧰 Look for the “Text Editor” widget.
2. 🖱️ Drag it BELOW the heading.
3. ✏️ Edit the text to say:
   “This is my website created with Elementor. I am learning to design web pages visually and professionally.”
4. 🎨 Go to Style > Alignment > Justify.

IN COLUMN 2:

1. 🧰 Look for the “Image” widget.
2. 🖱️ Drag it to column 2.
3. ⚙️ Configure:
   • Click “Choose Image”.
   • Choose an image from your computer or the library.
   • Click “Insert”.
4. 🎨 Optional: Go to Style > Border > Radius: 10px.

Below the image:

1. 🧰 Look for the “Button” widget.
2. 🖱️ Drag it below the image.
3. ✏️ Configure:
   • Text: “View more information”.
   • Link: “#” (without quotes).
   • Alignment: Center.

📱 LESSON 2.6: VIEWING ON DIFFERENT DEVICES

THE MAGIC OF ELEMENTOR:

You can view and adjust your design for mobile, tablet, and desktop separately.

HOW IT WORKS:

In the top bar, in the center, click on:

• 📱 MOBILE – To view on phones.
• 💻 TABLET – To view on tablets.
• 🖥️ DESKTOP – To view on computers.

PRACTICAL EXERCISE:

Let’s optimize our heading for mobile:

1. 🖱️ Click on 📱 MOBILE.
2. 🖱️ Select your heading “Welcome to My Website”.
3. 👉 Go to the “Style” tab.
4. 🔤 Look for “Size” under Typography.
5. ✏️ Change from 48px to 32px.
6. 👁️ Observe how it only changes in the mobile view.

✨ IMPORTANT:
Changes you make in 📱 Mobile only affect mobile devices.
Changes you make in 💻 Tablet only affect tablets.
Changes you make in 🖥️ Desktop only affect desktop.

💾 LESSON 2.7: SAVING AND PUBLISHING YOUR WORK

KEY DIFFERENCE:

• 👁️ PREVIEW = See changes without publishing.
• 🎯 PUBLISH = Make changes visible to everyone.

STEP BY STEP TO PUBLISH:

1. 🔝 Look at the top right corner.
2. 🖱️ Click on the 🎯 PUBLISH button.
3. ✅ Message: “Page updated” (success).

TO VIEW AS A VISITOR:

1. 🖱️ Click on 👁️ PREVIEW.
   (next to the Publish button)
2. 🖥️ A new browser tab opens.
3. 👀 You can see your page exactly as your visitors will see it.

IMPORTANT TIP:

Use 👁️ PREVIEW frequently while working, and “only” use 🎯 PUBLISH when you are satisfied with the result.

🛠️ LESSON 2.8: USEFUL TOOLS IN THE TOP BAR

📐 STRUCTURE – Your navigation map

1. 🖱️ Click on the dark top bar, on the right, on 📐 STRUCTURE.
2. 🗺️ A panel appears with all your elements organized.
3. 🖱️ You can click on any element to select it.
4. 🎯 Useful when you have overlapping or hard-to-select elements and to drag and drop changing the location of contents schematically.

🕒 HISTORY – Your safety net for errors

1. 🖱️ Click on 🕒 HISTORY.
2. 📜 You will see a list of all recent changes.
3. 🖱️ Click on any previous version.
4. 🔄 That version will be restored automatically.
5. ⏰ Elementor saves up to 50 recent changes.

🔍 FINDER – Find what you need

1. 🖱️ Click on 🔍 FINDER.
2. ⌨️ Type the name of any widget.
3. ⚡ Find it instantly.
4. 🎯 It also searches for settings and configurations.

🏆 FINAL PRACTICAL EXERCISE

OBJECTIVE: Create a complete “Services” section

STEP 1: Add a new section

1. Scroll to the bottom of your page.
2. 🖱️ Click on “➕ Add New Section”.
3. 🏗️ Choose the “3 Columns” structure (33% | 33% | 33%).

STEP 2: Column 1 – Service 1

1. 🧰 Drag the “Icon” widget to the column.
2. ⚙️ Choose an icon you like (e.g., ⭐).
3. 🧰 Drag a “Heading” below it.
4. ✏️ Type: “Web Design”.
5. 🧰 Drag a “Text Editor” below it.
6. ✏️ Type: “Creation of modern and responsive websites”.

STEP 3: Column 2 – Service 2

1. 📋 Select the entire column 1.
2. 🖱️ Right-click on the pencil icon and choose 📋 (duplicate).
3. ➡️ Drag the duplicated column to column 2.
4. ✏️ Change the texts to your liking.

STEP 4: Column 3 – Service 3

Repeat the process to complete the third column.

STEP 5: Section title

1. 🖱️ Click on the ➕ ABOVE the 3 columns.
2. 🧰 Drag a “Heading” there.
3. ✏️ Type: “Our Services”.
4. 🎨 Style: Center, size 42px, prominent color.

STEP 6: Optimize for mobile

1. 🖱️ Click on 📱 MOBILE.
2. 🔍 Check that everything is legible.
3. ⚙️ Adjust sizes if necessary.
4. 📱 Verify that the 3 columns stack vertically on mobile.

STEP 7: Publish

1. 🖱️ Click on 🎯 PUBLISH.
2. 👁️ Click on 👁️ PREVIEW.
3. ✅ Verify that everything is correct.

🚨 COMMON ERRORS AND SOLUTIONS

“I can’t select an element”

SOLUTION:

• Use 📐 STRUCTURE to navigate.
• Click on empty areas near the element.
• Make sure you are not in 📱 MOBILE mode if you want to edit the desktop version.

“Changes are not applying”

SOLUTION:

• Verify that you have clicked 🎯 PUBLISH, not just 👁️ PREVIEW.
• Clear your browser cache.
• Check that you don’t have conflicts with other plugins.

“I don’t see the left panel”

SOLUTION:

• 🖱️ Click on ☰ MENU (top left corner).
• Or click on ➕ ADD ELEMENT.
• Or press the ESC key on your keyboard.

💡 PROFESSIONAL TIPS

1. Save versions – Use 🕒 HISTORY before major changes.
2. Mobile – Always check on 📱 MOBILE during design.
3. Name elements – In 🚀 ADVANCED > CSS, put descriptive names (if you know css).
4. Use shortcuts – Ctrl+S saves, Ctrl+Z undoes.
5. Experiment fearlessly – You can always use 🕒 HISTORY to go back.

✅ SUMMARY OF WHAT YOU HAVE LEARNED

In this module you have mastered:

1. ✅ The complete Elementor interface.
2. ✅ How to add sections and columns.
3. ✅ How to drag and drop widgets.
4. ✅ How to edit content correctly.
5. ✅ The 3 configuration tabs (Content, Style, Advanced).
6. ✅ How to work with responsive views.
7. ✅ How to save and publish your work.
8. ✅ Useful tools like Structure and History.

🎉 EXCELLENT WORK!
Now you have the foundations to build a website with Elementor. In the next module, we will delve into specific widgets and advanced design techniques.