Popup trong Elementor là gì? #
Popup là cửa sổ xuất hiện nổi trên màn hình để hiển thị nội dung như: form đăng ký, thông báo, xem video, banner khuyến mãi. Elementor Pro cho phép bạn tạo và quản lý popup bằng trình kéo–thả giống như chỉnh trang bình thường.
LƯU Ý QUAN TRỌNG: Nếu cấu hình sai, popup có thể xuất hiện liên tục hoặc gây chậm website.
Cách truy cập trình quản lý Popup #
Vào Dashboard:
Templates → Popups
Tại đây bạn có thể:
- Xem danh sách popup
- Thêm mới
- Chỉnh sửa
- Xuất/nhập popup
Tạo Popup mới #
- Vào Templates → Popups → Add New
- Đặt tên popup (ví dụ: “Popup Đăng ký”)
- Chọn mẫu có sẵn → Insert (hoặc tạo layout trống)
- Popup mở ra trong Elementor editor
LƯU Ý: Đặt tên popup rõ ràng để dễ quản lý, đặc biệt khi có nhiều popup.
Chỉnh giao diện Popup bằng Elementor #
Bạn chỉnh popup hoàn toàn giống như một trang Elementor bình thường:
- Thêm text, heading, button
- Thêm form (đăng ký, liên hệ, nhận tin)
- Thêm hình, icon, video
Các phần quan trọng cần chỉnh #
- Width / Height: chiều rộng popup
- Overlay: lớp mờ phía sau popup
- Close Button: vị trí nút đóng
- Entrance Animation: hiệu ứng hiện popup
Cài đặt nâng cao của Popup #
Trong mục Popup Settings của Elementor (góc trái dưới):
Layout #
- Width (thường 400–600px cho popup form)
- Position (trung tâm hoặc góc)
- Overlay → màu nền mờ
Style #
- Màu nền popup
- Bo góc
- Bóng đổ
Advanced #
- Prevent Closure (có cho đóng popup hay không)
- Disable Page Scrolling
Không bật Prevent Closure trừ khi thực sự cần. Điều này ngăn người dùng đóng popup → gây khó chịu.
Cài đặt điều kiện hiển thị (Display Conditions) #
Khi nhấn Publish, Elementor yêu cầu bạn thiết lập:
1. Conditions – điều kiện hiển thị #
Popup sẽ xuất hiện ở đâu?
- Entire Site – toàn website
- Singular – 1 trang cụ thể
- Archive – danh mục
- Include / Exclude – bao gồm hoặc loại trừ trang
Lưu ý: Không đặt quá nhiều popup cùng điều kiện → dễ trùng nhau.
2. Triggers – điều kiện kích hoạt popup #
- On Page Load: bật ngay khi mở trang
- On Scroll: khi kéo trang
- On Scroll to Element: khi tới 1 section
- On Click: khi bấm vào nút/link
- Exit Intent: khi sắp rời trang (desktop thôi)
KHÔNG dùng On Page Load nếu không cần. Popup mở liên tục sẽ gây khó chịu và tăng bounce rate.
3. Advanced Rules – giới hạn hiển thị #
Dùng để popup không hiển thị quá nhiều:
- Show after X page views
- Show after X sessions
- Hide for logged in users
- Show on specific devices (mobile/desktop)
Nên bật giới hạn hiển thị để tránh người dùng bị làm phiền liên tục.
Cách tạo popup mở bằng nút bấm #
1. Lấy ID của Popup trong Templates → Popups.
2. Trong Elementor → chọn Button → Link:
Popup: Open Popup
Hoặc nhập:
javascript: elementorProFrontend.modules.popup.showPopup( { id: POPUP_ID } )
Ví dụ:
javascript: elementorProFrontend.modules.popup.showPopup( { id: 123 } )
Xoá hoặc tắt Popup #
- Vào Templates → Popups
- Deactivate (bỏ Publish)
- Hoặc Delete
KHÔNG xoá popup đang gán với nút bấm.
Lỗi thường gặp #
1. Popup hiện liên tục #
Do dùng On Page Load mà không giới hạn.
2. Popup không hiển thị #
- Do điều kiện không đúng
- Do xung đột overlay
- Do có nhiều popup đè nhau
3. Popup chồng popup (lỗi nghiêm trọng) #
Xảy ra khi:
- Nhiều popup cùng trigger On Page Load
- Nhiều popup On Scroll 50%
4. Không đóng được popup #
Do bật Prevent Closing hoặc xoá nút close.
5. Popup không hiện trên mobile #
Do bật Exclude Device = Mobile.
Best Practices #
- ✔ Chỉ bật popup khi thực sự cần
- ✔ Dùng On Click thay vì On Page Load
- ✔ Không dùng quá nhiều popup trong 1 trang
- ✔ Dùng giới hạn hiển thị (Advanced Rules)
- ✔ Không xoá popup gắn với CTA
Checklist cực quan trọng #
- ✔ Popup có nút đóng
- ✔ Không trùng điều kiện với popup khác
- ✔ Có giới hạn hiển thị
- ✔ Test trên desktop + mobile
- ✔ Tránh chèn form nặng bên trong popup
Bài 7 – Elementor Popup kết thúc.
