Elementor: Hướng dẫn quản lý Popup (tạo, bật/tắt, điều kiện hiển thị)
Bạn sẽ nắm được gì sau bài này
- Tạo popup đúng quy trình (thiết kế → publish → cài hiển thị)
- Hiểu rõ 3 phần cốt lõi: Conditions (hiển thị ở đâu), Triggers (khi nào bật), Advanced Rules (ai thấy & tần suất)
- Quản lý nhiều popup không bị “đè nhau” và không làm khó chịu người dùng
- Có checklist trước khi publish + cách xử lý lỗi popup không hiện/hiện quá nhiều
Yêu cầu
Bạn cần Elementor Pro (Popup Builder). Nếu chỉ có Elementor bản miễn phí, bạn sẽ không có menu Popups.
Mục tiêu
Popup “đúng nơi - đúng lúc”: tăng chuyển đổi nhưng không làm phiền.
Thời gian
15–30 phút để tạo 1 popup chuẩn (tuỳ bạn đã có nội dung/ảnh/form chưa).
TL;DR (làm nhanh theo thứ tự)
- Vào Bảng tin WordPress → Templates (Mẫu) → Popups → Add New (Thêm mới)
- Thiết kế popup: khung, nội dung, nút đóng, responsive
- Publish (Xuất bản) → cấu hình: Conditions → Triggers → Advanced Rules
- Test ở tab ẩn danh (đã xoá cache), test mobile/desktop
- Nếu có nhiều popup: đặt tên rõ + tránh chồng Conditions/Triggers
1) Popup trong Elementor là gì và bạn quản lý ở đâu?
Popup là “cửa sổ nổi” hiển thị đè lên nội dung trang, thường dùng để:
- Thu lead (form đăng ký)
- Thông báo ưu đãi/khuyến mãi
- CTA nhanh (gọi điện, chat, đặt lịch)
- Thông báo hệ thống (bảo trì, cập nhật)
Bạn quản lý popup tại: Bảng tin WordPress → Templates (Mẫu) → Popups.
Lưu ý quan trọng về trải nghiệm người dùng
Đừng để popup “vừa vào đã bật” trên mọi trang. Đa số case hiệu quả nhất là mở theo click hoặc hiển thị sau khi người dùng đã đọc/có ý định rời trang.
2) Tạo popup mới (đúng quy trình)
- 1
Bước 1: Tạo popup
Vào Templates (Mẫu) → Popups → Add New (Thêm mới) → đặt tên (gợi ý đặt tên ở mục 6).
- 2
Bước 2: Chọn mẫu (tuỳ chọn)
Chọn template có sẵn để làm nhanh hoặc tạo từ đầu.
- 3
Bước 3: Thiết kế khung popup
- Set max width hợp lý (thường 520–720px)
- Thêm padding (24–32px)
- Border radius + shadow để popup “premium”
- 4
Bước 4: Thiết kế nội dung
Tuỳ mục tiêu: Heading + mô tả ngắn + form/button. Nội dung nên gọn, 1 mục tiêu/1 popup.
- 5
Bước 5: Cấu hình nút đóng và overlay
Bật Close Button (nút X) và cho phép đóng khi click ra ngoài (overlay) để không gây khó chịu.
- 6
Bước 6: Publish (Xuất bản) và cài hiển thị
Khi bấm Publish, Elementor sẽ hỏi 3 phần: Conditions → Triggers → Advanced Rules (mục 3).
Trước (hay gặp)
- Popup bật ngay khi tải trang, không liên quan ngữ cảnh
- Nội dung dài, nhiều mục tiêu (vừa đăng ký vừa sale vừa thông báo)
- Không có nút đóng rõ ràng trên mobile
- Không giới hạn tần suất → gây khó chịu
Sau (khuyến nghị)
- Popup đúng ngữ cảnh (đúng trang/đúng nhóm trang)
- Một popup = một mục tiêu, CTA rõ
- Có nút đóng + overlay click-to-close, responsive tốt
- Có Advanced Rules để giới hạn tần suất
3) Cài đặt hiển thị: Conditions, Triggers, Advanced Rules (phần quan trọng nhất)
Conditions: popup sẽ hiển thị ở đâu?
- Entire Site: toàn website (chỉ dùng cho popup hệ thống, rất cân nhắc)
- Singular → Pages: chỉ một số trang cụ thể (khuyến nghị cho hầu hết case)
- Singular → Posts / In Category: chỉ nhóm bài viết/nhóm danh mục
- Archive / Search / 404: trang danh sách/không tìm thấy
Nguyên tắc chọn Conditions
Chọn hẹp nhất có thể. Popup hiệu quả thường là popup “đúng bối cảnh”, không phải “đè lên mọi trang”.
4) Mở popup theo click (cách dùng hiệu quả nhất)
Bạn nên để popup mở bằng click từ một nút/CTA, ví dụ “Nhận tư vấn”, “Nhận mã giảm giá”.
- 1
Bước 1: Tạo nút CTA trên trang
Trong Elementor page, thêm widget Button (hoặc text/link).
- 2
Bước 2: Gán action mở popup
Ở phần link/action của nút, chọn action kiểu Popup → Open Popup và chọn đúng popup cần mở.
- 3
Bước 3: Test hành vi trên mobile/desktop
Click CTA → popup mở, bấm X/overlay → đóng, không vỡ layout.
Nên làm
Những điểm nên ưu tiên để UI gọn và dễ bảo trì.
- Dùng On Click cho popup lead/sale chính
- CTA rõ ràng: 'Nhận tư vấn', 'Đăng ký', 'Xem ưu đãi'
- Popup có nút đóng rõ ràng và nội dung ngắn
Không nên
Tránh các cách fix nhanh gây khó bảo trì hoặc lỗi responsive.
- Auto bật popup lead ngay khi vào trang (trừ case bắt buộc)
- Để popup không có cách đóng rõ trên mobile
- Nhét quá nhiều trường form làm người dùng ngại điền
5) Quản lý nhiều popup: đặt tên, bật/tắt, tránh xung đột
5.1 Quy ước đặt tên popup (rất đáng làm)
Gợi ý naming giúp bạn quản trị dễ
- [Mục tiêu] - [Vị trí] - [Trigger]
- Ví dụ: LEAD - Trang dịch vụ - Click
- Ví dụ: SALE - Toàn site - Exit intent
5.2 Tránh popup “đè nhau”
Nguyên tắc chống xung đột
- 01
1 trang chỉ nên có 1 popup auto (nếu có)
Nếu đã có popup On Page Load/On Scroll, đừng để thêm popup auto thứ hai trên cùng nhóm trang.
- 02
Conditions rõ ràng, không chồng chéo
Popup A chỉ cho nhóm trang A, popup B chỉ cho nhóm trang B.
- 03
Dùng Advanced Rules để giãn tần suất
Giới hạn sessions/page views để người dùng không bị bắn popup liên tục khi chuyển trang.
6) Checklist trước khi publish popup (copy dùng lại)
Checklist trước khi Publish
- Conditions đúng trang (không “văng” sang trang không liên quan)
- Trigger hợp lý (ưu tiên On Click hoặc On Scroll 30–60%)
- Advanced Rules có giới hạn tần suất
- Nút đóng (X) rõ ràng, click overlay đóng được
- Mobile không tràn, không che toàn bộ nội dung (trừ trường hợp bắt buộc)
- Test tab ẩn danh + sau khi xoá cache (nếu site có cache/CDN)
FAQ (câu hỏi thường gặp)
Câu hỏi thường gặp
Popup không hiện dù tôi đã Publish?
Thường do:
- Conditions chưa đúng trang
- Advanced Rules đang chặn (đã đạt “Show up to X times”, hoặc đã bị giới hạn sessions/page views)
- Bạn đang đăng nhập và có rule ẩn với logged-in users
- Cache/CDN: thử tab ẩn danh và xoá cache plugin/CDN
Popup hiện quá nhiều lần, gây khó chịu?
Hãy:
- Giảm/loại On Page Load
- Thêm Advanced Rules: giới hạn số lần hiển thị và theo sessions/page views
- Tránh nhiều popup auto trên cùng nhóm trang
Popup bị xấu hoặc che hết màn hình trên mobile?
Giảm max width/padding, tăng khoảng thở, và test 360–390px.
Nếu popup form dài: cân nhắc chỉ hiện desktop hoặc thay bằng CTA mở form ở trang riêng.
Bài liên quan
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: Hướng dẫn kéo thả để tạo 1 trang hoàn chỉnh (từ A→Z)
Tự dựng một trang hoàn chỉnh bằng các widget cơ bản, kèm checklist tránh vỡ layout.
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ài viết này có hữu ích không?
Bài viết liên quan
Elementor: Chỉnh giao diện mobile đẹp nhanh (không vỡ layout)
<Callout type="note" title="Bạn sẽ làm được gì trong 15 phút"> - Chỉnh layout mobile không vỡ, không tràn chữ - Tối ưu font/spacing theo chuẩn dễ đọc...
Elementor cơ bản: Hướng dẫn quản lý & chỉnh sửa trang (cho người mới)
<Callout type="note" title="Bạn sẽ nắm được gì sau bài này"> - Biết **Elementor đang quản lý theo cấu trúc nào** (Page → Sections/Containers → Widget...
Elementor: Hướng dẫn kéo thả để tạo 1 trang hoàn chỉnh (từ A→Z)
<Callout type="note" title="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 w...
Mã giảm giá WooCommerce: Tạo, quản lý & tối ưu Coupon hiệu quả
<TLDR title="TL;DR (làm nhanh theo thứ tự)"> - Vào **Tiếp thị → Mã giảm giá → Thêm mã giảm giá** để tạo mã mới - Chọn loại giảm giá: % sản phẩm, cố đ...