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

1) Elementor là gì và bạn sẽ thao tác ở đâu?

Elementor là công cụ kéo-thả để chỉnh trang trong WordPress. Bạn sẽ làm việc chủ yếu ở 3 nơi:

2) Cấu trúc cơ bản: bạn đang chỉnh cái gì?

Tuỳ site của bạn dùng “Section/Column” cũ hay “Container (Flexbox)” mới, nhưng logic tương tự:

1. 1

   Page (Trang)

   Là “khung” lớn nhất — bạn đang chỉnh một trang WordPress cụ thể.
2. 2

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

   Là phần chia layout (hero, giới thiệu, dịch vụ, CTA…).
   Đây là nơi bạn chỉnh padding/margin, background, width.
3. 3

   Widgets (Nội dung)

   Text, Heading, Image, Button, Icon List…
   Đây là nơi chỉnh text, màu, typography, icon, link.

3) Quy trình chỉnh sửa chuẩn (người mới làm cũng không vỡ)

1. 1

   Bước 1: Duplicate trang (nếu bạn sợ rủi ro)

   Nếu site đang chạy thật: duplicate page hoặc dùng staging để sửa an toàn.
2. 2

   Bước 2: Chỉnh bố cục trước, nội dung sau

   Chốt layout: thứ tự block, khoảng cách, cột (1 cột trên mobile).
   Sau đó mới thay text/ảnh.
3. 3

   Bước 3: Chỉnh style theo thứ tự: typography → màu → nút

   Typography đồng bộ (font size, line-height), sau đó màu, cuối cùng CTA/button.
4. 4

   Bước 4: Responsive check (Mobile/Tablet)

   Chuyển sang responsive mode và test nhanh 360px/390px.
5. 5

   Bước 5: Publish + kiểm tra trang thật

   Mở trang ở tab ẩn danh, kiểm tra lại cache nếu cần.

4) Những mục bạn sẽ dùng thường xuyên nhất trong Elementor

5) Template & tái sử dụng (giúp làm nhanh gấp 2–3 lần)

Thay vì làm lại từ đầu, hãy biến các phần dùng lại thành template:

1. 1

   Lưu Section Template

   Chọn container/section → Save as Template → đặt tên rõ ràng (VD: Home - CTA - Blue).
2. 2

   Chèn lại template vào trang khác

   Add Template → My Templates → chọn template.
3. 3

   Quy ước đặt tên template

   Gợi ý: [Page] - [Section] - [Variant]
   VD: Home - Hero - V1, About - Team - Light

6) Global Settings (đồng bộ toàn site)

Nếu site bạn bị “mỗi chỗ một kiểu font/màu”, thường là do chưa set global.

7) Checklist 3 phút trước khi Publish (tránh lỗi ngớ ngẩn)

8) Khi nào cần Custom CSS?

/* Ví dụ: ép button full width trên mobile */
@media (max-width: 767px) {
  .cta-button {
    width: 100%;
    justify-content: center;
  }
}

FAQ (câu hỏi thường gặp)

Bài liên quan