Chuyển tới nội dung

Cách Tạo Popup Với Elementor Pro

Cách Tạo Popup Với Elementor Pro

Bây giờ Nam sẽ hướng dẫn các bạn cách tạo popup với Elementor Pro các bạn nhé!

Lưu ý rằng để có thể tạo popup thì bắt buộc bạn phải dùng Elementor bản Pro nhé!

Cách Tạo Popup Với Elementor Pro

Đầu tiên các bạn vào Template -> Popups.

Cách Tạo Popup Với Elementor Pro

Rồi bạn click vào Thêm Mới Popup.

Cách Tạo Popup Với Elementor Pro

Rồi bạn đặt tên cho popup vào phần Đặt tên mẫu. Đặt xong rồi thì bạn click vào Tạo Mẫu thiết kế.

Cách Tạo Popup Với Elementor Pro

Bây giờ chúng ta có thể thao tác thiết kế như 1 page bình thường với Elementor các bạn nhé! Giờ Nam sẽ thiết kế theo cách của Nam còn các bạn tự thiết kế theo ý thích nhé!

Cách Tạo Popup Với Elementor Pro

Bước tiếp theo là chúng ta click vào icon bánh răng Cài đặt bên góc trái để tùy chỉnh tiếp cho popup bạn nhé!

Cách Tạo Popup Với Elementor Pro

Đầu tiên là Width để tùy chỉnh độ rộng của popup.

Cách Tạo Popup Với Elementor Pro

Tiếp đến là Position để căn chỉnh vị trí popup trên dưới, trái phải tùy ý.

Cách Tạo Popup Với Elementor Pro

Tiếp theo là mục tùy chỉnh tắt mở Overlay, thì overlay chính là lớp đen mờ mờ bên ngoài mà các bạn đang thấy, bạn có thể tắt nó đi cũng được.

Close Button là dấu X để thoát popup mà bạn đang thấy, bạn cũng có thể tắt nó đi luôn.

Cách Tạo Popup Với Elementor Pro

EntranceExit Animation là animation khi popup xuất hiện và tắt đi. Bạn hãy chơi đùa với các loại animation này, nếu thích thì bạn có thể chọn 1 kiểu để dùng luôn.

Cách Tạo Popup Với Elementor Pro

Thêm 1 vài tùy chỉnh mà bạn có thể tắt mở ở tab Nâng cao như:

Show Close Button After (sec): Hiện popup sau bao nhiêu giây.

Automatically Close After (sec): Tự tắt popup sau bao nhiêu giây.

Prevent Closing on Overlay: Ngăn chặn tắt popup khi click vào overlay.

Prevent Closing on ESC key: Ngăn chặn tắt popup khi bấm phím ESC.

Disable Page Scrolling: Khi popup đang hiện thì không thể cuộn trang.

Avoid Multiple Popups: Ngăn chặn nhiều popup cùng hiện lên.

Untitled design 2023 02 15T085051.864

Xong rồi thì bạn click vào Xuất bản.

Cách Tạo Popup Với Elementor Pro

Tiếp là bạn sẽ setup điều kiện, trigger để hiện popup… tùy vào ý bạn. Xong hết rồi thì chúng ta click vào Save And Close.

Cách Tạo Popup Với Elementor Pro

Chúc các bạn sẽ ứng dụng thành công hướng dẫn này và hãy thường xuyên ghé thăm blog của Nam để tham khảo các hướng dẫn về Elementor bạn nhé!

Chia Sẻ Bài Viết
Follow Nam Trên LinkedIn
Follow on LinkedIn

BÀI VIẾT KHÁC

Tham Khảo Các Dịch Vụ Của Web Designer Lê Thành Nam

Thiết Kế WebsiteTrọn Gói
Thiết Kế Website
Trọn Gói
Nâng Tầm Thương Hiệu, Tối Ưu Hiệu Suất
SEO Website Tổng Thể
SEO
Website Tổng Thể
Tăng Thứ Hạng, Thu Hút Khách Hàng
Nâng Cấp Website
Nâng Cấp
Website
Đổi Mới Hiệu Suất, Nâng Cao Trải Nghiệm
Quản Trị Website
Quản Trị
Website
Đảm Bảo Hoạt Động, Tối Ưu Hiệu Suất