Objective: Deeply understand the basic widgets and learn to control the structure of your pages with Elementor in WordPress.

📋 LESSON 3.1: WIDGETS, THE BUILDING BLOCKS

A widget in Elementor is a functional block that performs a specific task. If your website were a house, widgets would be the bricks, windows, doors, and furniture.

🏗️ THE CONSTRUCTION HIERARCHY

To understand how everything works, it is crucial to know this structure:

 1. 📄 PAGE (your complete canvas)
   ↓
2. 🏗️ SECTION (main horizontal areas)
   ↓
3. 📊 COLUMNS (divisions within each section)
   ↓
4. 🧱 WIDGETS (specific content within each column)

Visual example:

[🏢 SECTION 1: Hero Header]
├── [📊 COLUMN 1 (60%)]
│   └── 🧱 Heading Widget "Welcome"
│   └── 🧱 Text Widget "Description"
│   └── 🧱 Button Widget "Read more"
│
└── [📊 COLUMN 2 (40%)]
    └── 🧱 Image Widget (main photo)

🎯 LESSON 3.2: THE ESSENTIAL BASIC WIDGETS

Let’s explore the 9 widgets you will use in 90% of your pages.

1. 🏷️ HEADING

What is it for? For titles and subtitles of any level (H1, H2, H3…)

Essential settings:

• 📝 Title: The text that will be displayed.

• 🏷️ HTML Tag: H1 (main), H2 (sections), H3 (subsections).

• 🔗 Link: If you want it to be clickable.

• 🎨 Style: Color, typography, alignment, shadows.

💡 Quick practice:

1. Add a Heading to your page.

2. Set its text: “Professional Services”.

3. Change it to H2 Tag.

4. In Style, align it to the center and give it a blue color.

2. 🖼️ IMAGE

What is it for? To display photographs, illustrations, logos…

Essential settings:

• 🖼️ Choose Image: From your computer or the library.

• 📏 Size: Thumbnail, Medium, Large, Full.

• 🔗 Link: Where it goes when clicked.

• 📝 Alt Text: Important for SEO and accessibility.

💡 Pro tip:
Always add descriptive Alt Text. For an office image: “Modern office with team working” instead of just “office.jpg”.

3. 📝 TEXT EDITOR

What is it for? For paragraphs, lists, long texts…

Difference from Heading:

• Heading: Short titles (1 line).

• Text Editor: Long paragraphs (multiple lines).

Formatting controls:

✏️ Bold | 𝒞 Italic | 🔗 Link | 📋 Lists | 🔄 Alignment

💡 Quick practice:

1. Add a Text Editor.

2. Write a paragraph of 3-4 lines.

3. Bold an important word.

4. Add a link to “#” on another word.

4. ▶️ VIDEO

What is it for? To embed YouTube, Vimeo, or self-hosted videos.

Essential settings:

• 🔗 Link: Video URL (YouTube/Vimeo).

• 🖼️ Cover Image: What is seen before playing.

• ⚙️ Playback: Autoplay, controls, loop.

⚠️ Important: Self-hosted videos (uploaded directly) can slow down your site. Better to use YouTube or Vimeo.

5. 🔘 BUTTON

What is it for? For calls to action (CTA).

Parts of an effective button:

[🎨 ATTRACTIVE COLOR] [✏️ CLEAR TEXT] [🔗 RELEVANT LINK]

Essential settings:

• ✏️ Text: “Download PDF”, “Request a quote”, “View catalog”.

• 🔗 Link: Where the button goes.

• 🎨 Style: Colors (normal and hover), borders, shadows.

💡 Button psychology:

• First-person text: “I want my quote” vs “Request quote”.

• Urgency: “Offer ends in 24h”.

• Benefit: “Download free guide”.

6. ➖ DIVIDER

What is it for? To create dividing lines between sections.

Line types:

• Solid: ───────

• Double: ═══════

• Dotted: ┈┈┈┈┈┈

• Decorative: ~~~ ~~~~ ~~~

Settings:

• 📏 Width: 100% (full width) or custom.

• 🎨 Style: Line type, weight, color.

• ✨ Effects: Shadows, animations.

7. ⬜ SPACER

What is it for? To create empty space (custom margins).

Use cases:

• Separate a title from an image.

• Create breathing room between sections.

• Adjust designs for mobile.

💡 Tip: Better to use Spacer than large margins on individual widgets.

8. 🗺️ GOOGLE MAPS

What is it for? To display geographic locations.

Essential settings:

• 📍 Address: Your physical address.

• 🔍 Zoom: Zoom level (10-15 for street).

• 🎨 Style: Map colors.

⚡ Optimization: In recent versions, you can enable lazy load so the map doesn’t slow down the initial page.

9. ✨ ICON

What is it for? For decorative or informative icons.

Available icon sources:

• Font Awesome: 1,500+ free icons.

• Your own library: Custom SVGs.

💡 Practice:

1. Add an Icon widget.

2. Search for “phone”.

3. Add it before your phone number.

📱 LESSON 3.3: DEVICE-SPECIFIC SETTINGS

How it works:

1. Click 📱 Mobile on the top bar.

2. Select any element.

3. The changes you make only apply to mobile.

Common examples:

Tip: if you apply changes to tablets, those changes will only apply from tablets downwards (i.e., tablets and mobile), and if you apply to mobiles, the changes will only apply to mobiles. So, if something looks wrong on tablets and mobile, adjusting it on tablets might make it look good on mobile without having to make modifications on the mobile view. Let’s say changes inherit from higher views: PC > Tablet (inherits from PC) > Mobile (inherits from tablet).

🚫 HIDE ELEMENTS ON CERTAIN DEVICES

When to use it:

• 🖼️ Decorative images non-essential on mobile.

• 📊 Complex widgets that don’t work well on mobile.

• ✨ Purely aesthetic elements.

How to do it:

1. Select the element.

2. Go to 🚀 Advanced.

3. Look for “Responsive”.

4. Disable the device where you don’t want it to appear.

⚠️ Caution: Do not hide important content just because it “doesn’t fit”.

💼 LESSON 3.4: PRACTICAL PROJECT – “SERVICES” PAGE

Let’s create a complete page using everything learned.

📋 FINAL OBJECTIVE:

Create a services page with:

• ✅ Hero header (large header that spans side to side, often used as a cover) with title and description.

• ✅ 3 services in a responsive grid.

• ✅ Testimonials section.

• ✅ Final call to action.

🏗️ STEP 1: BASE STRUCTURE

1. New page > “Our Services”.

2. Open with Elementor.

3. Section 1: 1 column (for the hero header, large header that spans side to side, often used as a cover).

🎨 STEP 2: HERO HEADER

In the 1-column section:

1. 🧱 Heading: “Professional Solutions for Your Business”

   • Tag: H1.

   • Alignment: Center.

   • Size: 52px (desktop) / 36px (mobile).

2. 🧱 Text Editor: (below the title)

   • Text: “We offer specialized services designed to boost your growth and optimize your business operations.”

   • Alignment: Center.

3. 🧱 Button: “Discover Services”.

   • Link: “#services” (without quotes).

   • Color: Corporate blue.

💡 Tip: In the section’s Style, add a soft gradient background.

📊 STEP 3: SERVICES SECTION

1. New section: 3 columns (33% | 33% | 33%).

2. Section title: (above the columns).

   • 🧱 Heading: “Our Main Services”.

   • Tag: H2.

   • Alignment: Center.

Column 1 – Service A:

1. 🧱 Icon: ✨ (choose one related to design).

2. 🧱 Heading: “Web Design”.

   • Tag: H3.

   • Alignment: Center.

3. 🧱 Text Editor: “We create modern, fast, and conversion-optimized websites.”

   • Alignment: Center.

4. 🧱 Button: “More info”.

   • Size: Small.

   • Alignment: Center.

Column 2 – Service B:

1. Duplicate column 1 (click on column > duplicate).

2. Change icon, title, and description.

3. Ensure everything is centered.

Column 3 – Service C:

1. Repeat the process.

📱 STEP 4: OPTIMIZE FOR MOBILE

1. Click 📱 Mobile.

2. Review each section:

   • Are the texts legible?

   • Are the buttons easy to tap?

   • Do the columns stack correctly?

3. Adjust as needed:

   • Reduce font sizes.

   • Increase button padding.

   • Verify there are no overlapping elements.

💾 STEP 5: SAVE AND TEST

1. 👁️ Preview on desktop.

2. 👁️ Preview on mobile (use the browser’s device selector).

3. 🎯 Publish when satisfied.

🚨 COMMON ERRORS AND SOLUTIONS

1️⃣ “My columns are not stacking on mobile”

Cause: You haven’t configured responsive properly.
Solution:

1. On 📱 Mobile view.

2. Select each column.

3. Go to 📋 Layout > Width > set to 100%.

4. Or use the “Stack on mobile” function if your version has it.

2️⃣ “Widgets are overflowing the column”

Cause: Very large margins or paddings.
Solution:

1. Select the widget.

2. Go to 🚀 Advanced.

3. Check Margins and Padding.

4. Reduce very high values (more than 100px is usually excessive).

3️⃣ “I can’t align vertically”

Cause: You are trying to align the widget, not the column.
Solution:

1. Click on the COLUMN (border).

2. Go to 📋 Layout.

3. Look for “Vertical align”.

4. Choose: Top, Center, Bottom.

4️⃣ “The design looks different when published”

Cause: Browser cache or plugins.
Solution:

1. Clear cache (Ctrl+F5).

2. Deactivate cache plugins temporarily.

3. Regenerate CSS in Elementor > Tools.

💡 PROFESSIONAL TIPS FOR MODULE 3

🎯 PLAN BEFORE BUILDING

1. Define hierarchy: What is H1, H2, H3…

2. Choose colors: 1 primary, 1 secondary, 1 accent.

3. Select fonts: 1 for titles, 1 for text.

⚡ OPTIMIZE FOR SPEED

1. Compress images before uploading them.

2. Limit animations (they slow down the page).

3. Check on mobile with simulated 3G connection.

🔧 MAINTAIN CONSISTENCY

1. Same margins on all similar sections.

2. Same style for all buttons of the same type.

3. Same padding on all service cards.

4. Same colors for all links.

📱 TEST ON REAL DEVICES

1. Your mobile (the one you use most).

2. A family member’s tablet.

3. Computer with a large screen.

4. Different browsers: Vivaldi, Opera, Firefox.

✅ MODULE 3 SKILLS SUMMARY

Now you know how to:

1. ✅ Use the 9 basic widgets masterfully.

2. ✅ Control sections and columns at a professional level.

3. ✅ Create complex pages with a logical structure.

4. ✅ Solve common structure errors.

5. ✅ Apply professional optimization tips.

🏆 FINAL CHALLENGE FOR MODULE 3

Create a “Team” page with these requirements:

📋 TECHNICAL REQUIREMENTS:

• 1 hero section (large header that spans side to side) with title, description, and background.

• 4 profiles in a 2×2 grid (2 columns, 2 rows).

• Each profile: photo, name (H3), position, brief bio.

• Secondary section with 3 icons + statistics.

• Final button “Join our team”.

• Perfectly optimized for mobile.

🎯 EVALUATION CRITERIA:

• Consistency: Same styles for similar elements.

• Hierarchy: H1, H2, H3 titles used correctly.

• Responsive: Works perfectly on mobile and tablet.

• Spacing: Consistent margins and paddings.

• Performance: Optimized images, no excess of effects.

🎉 CONGRATULATIONS! You have mastered the essence of building with Elementor.
In Module 4 you will learn to create professional headers and footers that will remain consistent throughout your site. Ready for the next level with Module 4? 🚀