Hướng dẫn sử dụng popup Elementor chi tiết dễ hiểu

Popup Elementor là công cụ rất hay giúp gia tăng chuyển đổi cho website, thu thập thông tin, tạo các chương trình khuyến mãi….Thông thường bạn sẽ phải mất khoảng 39$/năm để mua các plugin ngoài tuy nhiên Elementor Pro hỗ trợ công cụ này hoàn toàn miễn phí, bạn cũng có thể sử dụng thêm một vài addons khác để đa dạng hóa tính năng trên popup.

CÀI ĐẶT ELEMENTOR PRO VÀ TẠO POPUP ELEMENTOR

Popup là tính năng chỉ có trên phiên bản Elementor Pro nên yêu cầu bạn phải mua bản quyền, hiện nay chi phí bản quyền khi mua chung cũng rất rẻ chỉ khoảng 15$/năm, khi đã có bản quyền Elementor Pro bạn cài đặt lần lượt 2 phiên bản và kích hoạt nhé, hãy mua bản quyền chính hãng để có thể sử dụng đầy đủ các bộ template popup.

Để tạo popup bạn chọn Template > Popups, tiếp theo chọn add new và điền tên popup để tạo.

cách tạo popup elementor nhanh

Chọn template popup bất kỳ sau đó chọn insert.

chọn chèn popup trên elementor pro

Chọn biểu tượng ở góc trái màn hình để chỉnh sửa layout, font chữ, màu sắc…phần này bạn có thể thoải mái sáng tạo theo sở thích.

chỉnh sửa layout font chữ popup elementor pro

Cuối cùng chọn Publish để xuất bản popup, tới phần này plugin sẽ yêu cầu bạn chọn các điều kiện hiển thị, chọn Entire site nếu muốn xuất hiện toàn trang web, chọn Singular hoặc Woocommerce nếu muốn set điều kiện hiển thị riêng biệt cho sản phẩm hoặc bài viết.

chọn điều kiện hiển thị popup elementor

Phần Triggers (điều kiện để popup hiển thị), cụ thể sẽ có các tùy chọn như sau:

  • On Page Load: hiển thị sau khi tải trang
  • On Scroll: hiển thị sau khi cuộn chuột
  • On Scroll To Element: hiển thị sau khi cuộn chuột đến một phần tử
  • On Click: hiển thị sau khi click chuột
  • After Inactivity: hiển thị sau khi không hoạt động
  • On Page Exit Intent: hiển thị khi có ý định thoát trang
chọn triggers cho popup elementor

Phần Advanced Rules (điều kiện nâng cao), cụ thể có các tùy chọn như sau:

  • Show after X page views: hiển thị sau khi xem số trang nhất định
  • Show after X sessions: hiển thị khi truy cập số lần nhất định
  • Show up to X times: hiển thị sau khoảng thời gian nhất định
  • When arriving from specific URL: hiển thị sau khi đến từ một URL nhất định
  • Show when arriving from: hiển thị sau khi đến từ một nơi nhất định
  • Hide for logged in users: ẩn cho người dùng đăng nhập
  • Show on devices: hiển thị trên thiết bị cụ thể
  • Show on browsers: hiển thị trên trình duyệt cụ thể

Phần này bạn có thể để trống không cần thiết lập gì thêm, cuối cùng chọn Save & close để lưu popup, nhớ xóa cache trên plugin cache nếu có.

hướng dẫn thiết lập advanced rules popup elementor

TẠO POPUP BẰNG JETPOPUP

Elementor hỗ trợ tạo popup tuy nhiên các mẫu popup có tùy chỉnh khá đơn giản và thiết kết hơi xấu, trường hợp bạn muốn tùy chỉnh popup nâng cao hơn có thể tham khảo qua JetPopup, đây là plugin trả phí nhưng cũng là plugin tạo popup cho Elementor tốt nhất hiện nay.

Khi cài đặt và kích hoạt JetPopup xong bạn chọn Create new popup để tạo popup mới nhé.

tạo popup nâng cao bằng jetpopup

Chọn layout JetPopup phù hợp.

chọn layout jetpopup phù hợp

Đến phần này bạn có thể thỏa thích kéo thả theo nhu cầu, chọn biểu tượng ở góc trái màn hình để tùy chỉnh kích thước, background, độ cong viền…

tùy chỉnh layout kích thước trên jetpopup

Truy cập tab Settings để thiết lập các hiệu ứng cho popup.

thiết lập các hiệu ứng cho jetpopup

Bước cuối cùng bạn thiết lập các điều kiện hiển thị cho popup, đầu tiên bọn chọn điều kiện hiển thị ở phần Open event, các điều kiện bao gồm:

  • On page load(s): khi tải trang xong
  • Inactivity time after (s): kích hoạt sau một khoảng thời gian không hoạt động
  • Page Scrolled(%): khi cuộn chuột
  • Try exit: khi chuẩn bị thoát trang
  • On date: vào ngày giờ cụ thể
  • On time: vào khoảng thời gian cụ thể
  • Custom Slector Click: khi click vào class cụ thể nào đó

Tùy chọn Disable Page Scrolling giúp ngăn chặn việc cuộn trang của người dùng, Show once chỉ hiển thị popup duy nhất 1 lần.

tùy chọn điều kiện kích hoạt jetpopup

Tùy chỉnh nơi hiển thị popup, nếu bạn muốn hiển thị cho toàn bộ trang thì hãy chọn Entire site, nếu muốn tùy chỉnh cho từng bài viết hoặc danh mục cụ thể hãy chọn Singular hoặc Archive.

tùy chỉnh nơi hiển thị popup jetpopup

Khi thiết lập tất cả mọi thứ xong, bạn truy cập trang bất kỳ kiểm tra xem popup có hoạt động không, nhớ xóa cache trên toàn bộ trang web và kiểm tra kỹ điều kiện hiển thị của popup.

popup hoan chinh cua jetpopup

Nhớ sử dụng thêm bộ template popup của nhà sản xuất nhé, chúc bạn thành công.

template popup trên jetpopup
Default image
Van Khai Cris

Chào bạn mình là Van Khai Cris một chàng trai 9x đến từ vùng đất Tây Nguyên đầy nắng và gió, mình là người cực kỳ đam mê công nghệ, Digital Marketing và WordPress, hy vọng có thể chia sẻ những kiến thức và kinh nghiệm của bản thân, để giúp bạn kiếm tiền online dễ dàng hơn.

guest
0 Bình luận
Đánh giá
Xem toàn bộ bình luận