Giới thiệu về giao diện Elementor #
Khi bạn mở một trang bằng Elementor, màn hình được chia thành 2 phần:
- Khu vực bên trái: là Panel chứa các widget và cài đặt
- Khu vực bên phải: là giao diện trực tiếp của trang bạn đang chỉnh
Hiểu rõ bố cục này giúp bạn chỉnh sửa nhanh và tránh chỉnh nhầm.
Khu vực Panel bên trái #
Panel bên trái chia thành 3 tab chính:
1. Tab Widgets #
Chứa tất cả các phần tử (widget) mà Elementor cung cấp, ví dụ:
- Heading
- Text Editor
- Image
- Button
- Video
- Icon List
- Google Maps
Kéo widget từ panel vào trang để sử dụng.
2. Tab Layout (Content – Style – Advanced) #
Khi bạn chọn bất kỳ Section / Column / Widget nào, Panel sẽ hiển thị 3 tab:
- Content: chỉnh nội dung văn bản, hình ảnh, icon…
- Style: chỉnh màu sắc, font, kích thước…
- Advanced: chỉnh margin, padding, hiệu ứng, responsive
Đây là nơi người dùng chỉnh sai nhiều nhất (thường do margin/padding).
3. Tab Navigator & Settings #
Ở góc dưới của Panel:
- Navigator: cây cấu trúc của trang (Section → Column → Widget)
- Page Settings: cài đặt trang (title, style, layout)
- Responsive Mode: chuyển máy tính / tablet / mobile
- History: undo → redo → revision
Nên mở Navigator để dễ tìm phần tử trong trang lớn.
Khu vực hiển thị trang (bên phải) #
Là nơi bạn xem trực tiếp giao diện đang chỉnh sửa. Elementor cho phép thao tác trực tiếp bằng kéo–thả.
Trang được chia theo cấu trúc:
- Sections → khối lớn
- Columns → chia layout trong Section
- Widgets → phần tử nội dung
Section (khối lớn nhất) #
Section là phần bao ngoài của trang. Mỗi trang có nhiều Section, mỗi Section chứa 1 hoặc nhiều Column.
Khi chọn Section, bạn có thể:
- Đổi background
- Đổi độ rộng (boxed / full width)
- Thay đổi padding trên/dưới
- Thêm overlay màu
Không xoá Section quan trọng để tránh vỡ layout.
Column (cột bên trong Section) #
Column dùng để chia nội dung thành nhiều phần. Mỗi Column chứa nhiều widget.
Các tác vụ với Column #
- Thêm cột
- Chia tỉ lệ cột (50/50, 30/70…)
- Đổi background riêng cho cột
- Chỉnh padding/margin riêng
Lưu ý: Sai padding ở Column là lý do chính khiến trang lệch trên mobile.
Widget (phần tử nội dung) #
Mỗi widget là một thành phần nội dung, ví dụ: Tiêu đề, văn bản, hình, nút bấm, icon…
Các chỉnh sửa chính trong Widget #
- Content: nội dung chữ / hình
- Style: màu, font, căn chỉnh
- Advanced: khoảng cách, chuyển động, responsive, CSS ID
Tip: Luôn chỉnh style thông qua Global để trang đồng bộ.
Navigator – Công cụ “cứu mạng” của Elementor #
Navigator là bảng điều hướng dạng cây giúp bạn:
- Xem toàn bộ cấu trúc trang
- Nhảy nhanh đến đoạn cần chỉnh
- Đặt tên từng Section / Widget để dễ quản lý
Shortcut mở nhanh: Ctrl + I (hoặc Cmd + I).
Responsive Mode #
Elementor cho phép chỉnh riêng giao diện mobile, tablet và desktop.
- Cỡ chữ
- Ẩn/hiện phần tử theo thiết bị
- Margin / Padding riêng
Luôn kiểm tra mobile sau khi chỉnh trang.
Elementor Settings trong từng trang #
Khi nhấn vào biểu tượng bánh răng (Page Settings), bạn có thể chỉnh:
- Tiêu đề trang
- Ảnh đại diện (featured image)
- Màu nền toàn trang
- Layout: Full Width, Canvas, Default Template
Nếu lỡ chọn sai Template → layout của trang có thể biến mất header/footer.
Các lỗi thường gặp khi thao tác #
- Xoá nhầm Section → mất nguyên block
- Margin/padding quá lớn → trang bị lệch
- Chỉnh desktop nhưng quên chỉnh mobile
- Dùng quá nhiều widget nặng → trang chậm
Best Practices khi thao tác giao diện Elementor #
- ✔ Luôn bật Navigator
- ✔ Đặt tên Section quan trọng
- ✔ Chỉnh theo thứ tự: Section → Column → Widget
- ✔ Ít dùng Custom CSS nếu không cần
- ✔ Kiểm tra mobile trước khi Publish
Bài 2 – Giao diện Elementor kết thúc.
