Elementor là page builder phổ biến nhất WordPress với 5+ triệu active install. Cho phép build landing/sales page bằng drag-drop mà không động một dòng code. Bài này tổng hợp các khái niệm cơ bản.
3 cấp độ cấu trúc
- Section — khối lớn nhất, full width hoặc boxed
- Column — chia section thành 1-6 cột
- Widget — element thực tế: text, image, button, form, ...
Mọi page = nhiều section → mỗi section có column → mỗi column chứa widget.
10 widget dùng nhiều nhất
- Heading — H1/H2/H3 với typography control
- Text Editor — paragraph, list, link
- Image — kèm caption, link, hover effect
- Button — CTA, có hover state
- Icon Box — feature list, 3-4 cột
- Image Box — service/product preview
- Spacer / Divider — khoảng trắng, đường kẻ
- Form — chỉ có ở Pro, replace Contact Form 7
- Posts — list bài viết, filter theo category
- Toggle / Tabs — FAQ, content nhiều phần
Responsive controls
Mỗi setting (font size, padding, margin) đều có 3 tab: Desktop / Tablet / Mobile. Edit ở tablet/mobile chỉ ảnh hưởng device đó. Đây là điểm mạnh nhất Elementor — không phải viết media query.
Tip: thiết kế theo thứ tự desktop → tablet → mobile. Sau khi xong desktop, switch sang tablet view, fix gì hỏng, rồi sang mobile.
Global colors & fonts
Vào Site Settings → Global Colors / Fonts, đặt 4-5 colors + 3 fonts cho cả site. Sau đó mọi widget chọn từ palette này — đổi 1 chỗ, cả site update theo. Tránh hardcode color trong từng widget.
Free vs Pro
Free đủ cho landing page cơ bản. Pro cần thiết khi: form widget, theme builder (header/footer/single template), popup builder, WooCommerce widgets, custom CSS per widget. Đa số dự án mình build cho khách dùng Pro. Có gói lifetime tại /tai-nguyen.