Elementor: Hướng dẫn kéo thả để tạo 1 trang hoàn chỉnh (từ A→Z)

Bạn sẽ làm được gì sau bài này

Hiểu cấu trúc: Page → Section/Container → Widgets
Biết kéo-thả và cấu hình các widget hay dùng: Heading, Text Editor, Image, Button, Icon Box, Spacer, Divider (bonus: Icon List)
Tự dựng một trang mẫu hoàn chỉnh (có đủ section cơ bản)
Có checklist để không “vỡ layout”, đặc biệt khi chỉnh responsive

TL;DR (làm nhanh theo thứ tự)

Tạo trang mới → Sửa bằng Elementor
Dựng layout bằng Container/Columns trước, nội dung sau
Làm lần lượt: Hero → Giới thiệu → Dịch vụ → CTA
Đồng bộ spacing bằng Spacer + padding container, thêm Divider khi cần phân tách
Chuyển Responsive Mode kiểm tra Mobile/Tablet → sửa theo breakpoint
Preview → Publish → kiểm tra lại ngoài trang thật (có thể cần clear cache)

Mục tiêu

Người mới nhìn là làm được: kéo-thả, chỉnh style cơ bản, ráp thành trang hoàn chỉnh.

Thời gian

30–60 phút cho một trang mẫu (tuỳ bạn chuẩn bị nội dung/ảnh nhanh hay chậm).

Chuẩn bị

1–2 ảnh (hero + minh hoạ), text giới thiệu, danh sách 3–6 dịch vụ, 1 nút CTA + link.

1) Hiểu đúng “cấu trúc” để kéo thả không bị rối

Elementor không phải “kéo gì cũng được” — nó có cấu trúc. Hiểu đúng cấu trúc là bạn sẽ đỡ vỡ layout và dễ sửa về sau.

1
Page (Trang)
Bạn đang chỉnh một trang WordPress cụ thể (VD: Trang Giới thiệu).
2
Section/Container (Khối bố cục)
Đây là “khung” chia trang thành từng phần (Hero, Giới thiệu, Dịch vụ, CTA…).
Bạn thường chỉnh: width, padding/margin, background, gap, alignment ở đây.
3
Widgets (Nội dung)
Là các “viên gạch” như Heading, Text Editor, Image, Button… đặt bên trong container/section.

Mẹo thao tác nhanh khi trang nhiều phần

Luôn mở Navigator để xem cây cấu trúc. Bạn sẽ chọn đúng container/widget và kéo thả đúng vị trí nhanh hơn rất nhiều.

Mục tiêu phần này: bạn biết kéo đúng widget, chỉnh đúng tab (Content/Style/Advanced) và hiểu nên chỉnh ở đâu để không loạn.

2.1 Heading (Tiêu đề)

1
Kéo thả
Kéo widget Heading vào container.
2
Chỉnh Content
Nhập text, chọn HTML tag (H1/H2/H3).
Gợi ý: Mỗi trang chỉ nên có 1 H1, các section dùng H2/H3.
3
Chỉnh Style
Chỉnh typography (size, weight, line-height) và màu.

Nên làm

Những điểm nên ưu tiên để UI gọn và dễ bảo trì.

Dùng H1 cho tiêu đề chính trang, còn lại dùng H2/H3 theo section
Chỉnh typography theo hệ thống (Site Settings) nếu có
Tăng line-height để dễ đọc trên mobile

Không nên

Tránh các cách fix nhanh gây khó bảo trì hoặc lỗi responsive.

Nhét nhiều H1 trong một trang
Chỉnh font-size mỗi chỗ một kiểu không có quy chuẩn
Dùng chữ quá nhỏ trên mobile (<= 13px) gây khó đọc

2.2 Text Editor (Văn bản)

Cách dùng nhanh

Thêm widget Text Editor dưới Heading để mô tả ngắn
Chia đoạn 2–3 câu, tránh dồn 1 cục dài
Chèn link đúng chỗ (tới trang liên hệ/đăng ký)
Nếu cần bullet list, cân nhắc dùng Icon List (bên dưới) để nhìn gọn
Tip

2.3 Image (Ảnh)

Thiết lập quan trọng

Chọn ảnh rõ, đúng tỉ lệ (hero thường 16:9 hoặc 4:3)
Điền alt text mô tả ảnh
SEO
Chỉnh alignment/size trong container thay vì kéo giãn ảnh bừa
Kiểm tra ảnh có bị crop khó chịu ở mobile không
Mobile

2.4 Button (Nút CTA)

1
Kéo thả Button
Kéo widget Button vào vị trí bạn muốn đặt CTA.
2
Chỉnh text + link
Text nên là hành động (VD: “Nhận tư vấn”, “Xem bảng giá”).
Gắn link đúng (VD: /lien-he hoặc link form).
3
Chỉnh style
Chỉnh padding, border radius, màu nền, hover.

CTA trên mobile

Nút nên cao tối thiểu ~44px để dễ bấm. Nếu layout chật, cho nút full width trên mobile (theo breakpoint).

2.5 Icon Box (Icon + tiêu đề + mô tả)

Khi nào dùng Icon Box?

Liệt kê lợi ích/dịch vụ theo dạng card
Thay cho đoạn văn dài, giúp trang “dễ quét mắt”

2.6 Spacer (Khoảng cách)

Nên làm

Những điểm nên ưu tiên để UI gọn và dễ bảo trì.

Dùng Spacer để tạo nhịp đọc (16/24/32px) giữa các block
Ưu tiên chỉnh padding/gap ở container cha để đồng bộ

Không nên

Tránh các cách fix nhanh gây khó bảo trì hoặc lỗi responsive.

Nhồi quá nhiều Spacer nhỏ lẻ ở mọi nơi
Dùng margin âm để “cứu layout” khi chưa hiểu nguyên nhân

2.7 Divider (Đường kẻ phân tách)

Cách dùng đúng

Dùng Divider để phân tách section khi nền giống nhau
Chỉnh độ dày/màu nhạt để không “nặng UI”
Nếu đã đổi background giữa các section thì Divider có thể không cần
Tip

2.8 (Bonus) Icon List

Widget bonus rất hay dùng

Icon List giúp tạo bullet list đẹp, nhất quán hơn so với gõ list trong Text Editor.

3) Dựng Hero Section (phần đầu trang) theo chuẩn dễ hiểu

Hero là phần người dùng nhìn đầu tiên. Mục tiêu: có tiêu đề rõ, mô tả ngắn, CTA, và (tuỳ) ảnh minh hoạ.

Trước (hay gặp)

Chỉ có 1 đoạn text dài
Không có CTA rõ ràng
Spacing lộn xộn, font nhỏ
Ảnh crop xấu trên mobile

Sau (khuyến nghị)

Heading rõ + mô tả ngắn 2–3 câu
1 CTA chính (có thể thêm CTA phụ)
Padding/gap đồng bộ (nhịp 8/16/24)
Responsive kiểm tra Mobile/Tablet

1
Bước 1: Tạo container Hero
Add new Container/Section ở đầu trang.
Set padding trên/dưới đủ thoáng (VD: 48–80px desktop, giảm còn 32–48px mobile).
2
Bước 2: Thêm Heading + Text Editor
Heading (H1) + Text Editor (mô tả ngắn).
3
Bước 3: Thêm Button CTA
Đặt dưới mô tả. Chỉnh style cho nổi bật.
4
Bước 4: (Tuỳ chọn) Thêm Image
Nếu dùng layout 2 cột: một bên text, một bên ảnh minh hoạ.
5
Bước 5: Kiểm tra responsive
Chuyển Responsive Mode và đảm bảo mobile ưu tiên 1 cột, text dễ đọc, nút dễ bấm.

4) Tạo bố cục bằng Columns/Container (dịch vụ, lợi ích, feature)

Bạn sẽ dùng layout “nhiều cột” rất thường xuyên (VD: 3 dịch vụ). Trên mobile, nguyên tắc là xếp 1 cột để dễ đọc.

Dùng khi

3–6 dịch vụ/lợi ích (mỗi item là 1 Icon Box)
Trang nhìn “đủ nội dung” mà không dài dòng

5) Hướng dẫn tạo một trang hoàn chỉnh (ví dụ: Trang Giới thiệu)

Phần này sẽ ráp mọi thứ lại thành một trang hoàn chỉnh, đủ section cơ bản để ai cũng hiểu “quản trị kéo thả Elementor” là gì.

1
Bước 1: Tạo trang mới và mở Elementor
Bảng tin WordPress → Trang → Thêm trang mới → đặt tên “Giới thiệu” → Sửa bằng Elementor.
2
Bước 2: Section Hero
Dựng Hero theo mục (3): Heading (H1) + Text Editor + Button + (tuỳ) Image.
3
Bước 3: Section 'Chúng tôi là ai'
Tạo container mới → Heading (H2) + Text Editor (2–4 câu) + Image minh hoạ (tuỳ).
4
Bước 4: Section 'Dịch vụ nổi bật'
Tạo layout 3 cột → mỗi cột là 1 Icon Box (tiêu đề + mô tả ngắn).
5
Bước 5: Section CTA cuối trang
Heading ngắn + Button. Có thể đổi background màu nhẹ để nổi bật.
6
Bước 6: Spacing + Divider
Dùng Spacer hoặc padding/gap ở container cha để các section có nhịp đều.
Thêm Divider nếu các section nền giống nhau và cần phân tách rõ.
7
Bước 7: Responsive check + Publish
Chuyển Mobile/Tablet → sửa theo breakpoint → Preview → Publish → kiểm tra ngoài trang thật.

Checklist hoàn thiện trang (đúng chuẩn người mới nên làm)

Trang có ít nhất 3–4 section: Hero, Giới thiệu, Dịch vụ, CTA
Heading dùng đúng cấp (H1/H2/H3), không lạm dụng
CTA rõ và có link đúng
Ảnh có alt text, không quá nặng
Mobile không tràn chữ, không có horizontal scroll

6) Mẹo và lỗi thường gặp (để khỏi “vỡ layout”)

3 lỗi người mới hay dính nhất

Chỉnh spacing ở từng widget lẻ tẻ → trang nhìn lộn xộn
Sửa ở Desktop nhưng tưởng đang sửa Mobile (hoặc ngược lại)
Duplicate section để làm mobile quá nhiều → về sau sửa rất cực

Câu hỏi thường gặp

Vì sao tôi sửa mobile mà desktop cũng đổi?

Thường do bạn đang chỉnh ở setting không có icon responsive (nó áp dụng cho mọi breakpoint), hoặc bạn đang ở breakpoint Desktop.
Hãy bật Responsive Mode và chỉ chỉnh những field có icon responsive khi muốn set riêng mobile/tablet.

Có nên dùng Spacer hay chỉnh padding?

Nếu bạn muốn đồng bộ spacing toàn section: ưu tiên padding/gap ở container cha.
Spacer phù hợp khi bạn cần một khoảng cách nhỏ, rõ ràng giữa 2 widget cụ thể.

Có nên duplicate section riêng cho mobile không?

Chỉ nên khi layout mobile cần khác hoàn toàn. Còn lại ưu tiên chỉnh theo breakpoint để dễ bảo trì và tránh rối.

Thói quen tốt (giúp làm nhanh và bền)

Những điểm nên ưu tiên để UI gọn và dễ bảo trì.

Đặt tên section/container rõ ràng trong Navigator (Hero, About, Services, CTA)
Chỉnh layout trước, nội dung sau
Chốt typography + spacing đồng bộ
Luôn check mobile trước khi publish

Thói quen xấu (làm càng sửa càng rối)

Tránh các cách fix nhanh gây khó bảo trì hoặc lỗi responsive.

Sửa trực tiếp trên trang đang chạy thật mà không có backup/staging
Chỉnh mỗi widget một kiểu, không có quy chuẩn
Chồng nhiều section duplicate + hide/show lung tung
Dùng CSS như cách đầu tiên thay vì setting Elementor

7) Checklist 3 phút trước khi Publish

Checklist trước khi Publish (copy dùng lại)

Desktop/Tablet/Mobile không tràn chữ, không có horizontal scroll
CTA rõ, không bị che, dễ bấm trên mobile
Khoảng cách giữa các section đều và “gọn mắt”
Ảnh tối ưu dung lượng (ưu tiên WebP/AVIF nếu có)
Mở tab ẩn danh kiểm tra trang sau khi publish (và clear cache nếu cần)

Bài liên quan

Elementor cơ bản: Hướng dẫn quản lý & chỉnh sửa trang (cho người mới)

Nắm cấu trúc, menu quan trọng, template, global settings và checklist trước khi Publish.

Elementor: Chỉnh giao diện mobile đẹp nhanh (không vỡ layout)

Quy trình sửa responsive chuẩn + checklist kiểm tra trước khi Publish.

Bạn sẽ làm được gì sau bài này

TL;DR (làm nhanh theo thứ tự)

Mục tiêu

Thời gian

Chuẩn bị

Page (Trang)

Section/Container (Khối bố cục)

Widgets (Nội dung)

Mẹo thao tác nhanh khi trang nhiều phần

Kéo thả

Chỉnh Content

Chỉnh Style

Kéo thả Button

Chỉnh text + link

Chỉnh style

CTA trên mobile

Widget bonus rất hay dùng

Bước 1: Tạo container Hero

Bước 2: Thêm Heading + Text Editor

Bước 3: Thêm Button CTA

Bước 4: (Tuỳ chọn) Thêm Image

Bước 5: Kiểm tra responsive

Bước 1: Tạo trang mới và mở Elementor

Bước 2: Section Hero

Bước 3: Section 'Chúng tôi là ai'

Bước 4: Section 'Dịch vụ nổi bật'

Bước 5: Section CTA cuối trang

Bước 6: Spacing + Divider

Bước 7: Responsive check + Publish

3 lỗi người mới hay dính nhất

Câu hỏi thường gặp

Elementor cơ bản: Hướng dẫn quản lý & chỉnh sửa trang (cho người mới)

Elementor: Chỉnh giao diện mobile đẹp nhanh (không vỡ layout)

Bài viết này có hữu ích không?

Bài viết liên quan

Elementor cơ bản: Hướng dẫn quản lý & chỉnh sửa trang (cho người mới)

Elementor: Chỉnh giao diện mobile đẹp nhanh (không vỡ layout)

Elementor: Hướng dẫn quản lý Popup (tạo, bật/tắt, điều kiện hiển thị)

Đăng nhập vào trang quản trị WordPress