Biểu mẫu bật lên có thể là công cụ tiếp thị cần thiết, cho phép bạn nắm bắt địa chỉ email, thúc đẩy bán hàng, v.v. Tuy nhiên, việc tạo các cửa sổ bật lên hấp dẫn và tùy chỉnh trong WordPress không phải lúc nào cũng đơn giản.
May mắn thay, plugin trình tạo trang Elementor giúp bạn dễ dàng tạo và tùy chỉnh các cửa sổ bật lên trên trang web của mình. Bạn có thể điều chỉnh chúng để phù hợp với thiết kế trang web của mình và thêm trình kích hoạt dựa trên hành vi hoặc nguồn gốc của người dùng.
Hướng dẫn này sẽ cung cấp tổng quan về các loại cửa sổ bật lên Elementor khác nhau và lý do bạn có thể muốn sử dụng chúng. Sau đó, chúng tôi sẽ giải thích cách tạo các cửa sổ bật lên này bằng cả công cụ Pro Elementor và miễn phí. Bắt đầu nào!
Tổng quan về cửa sổ bật lên phần tử
Elementor là một trong những plugin tạo trang phổ biến nhất cho các trang web WordPress. Nó cho phép bạn kéo và thả các phần tử vào vị trí để thiết kế các trang đẹp và thân thiện với người dùng:

Hơn nữa, Elementor cho phép bạn tạo nhiều cửa sổ bật lên. Đây là những biểu mẫu tùy chỉnh xuất hiện trên trang web của bạn sau một thời gian định trước hoặc sau khi người dùng hoàn thành một hành động cụ thể.
Cửa sổ bật lên có thể là công cụ cần thiết vì nhiều lý do khác nhau. Bạn có thể sử dụng chúng để thu thập khách hàng tiềm năng và mở rộng danh sách tiếp thị qua email của mình. Các cửa sổ bật lên Elementor tích hợp với phần mềm tiếp thị qua email, gửi địa chỉ khách hàng trực tiếp đến nền tảng mà bạn lựa chọn.
Bạn thậm chí có thể sử dụng chúng để quảng cáo bán hàng, giảm giá và các sự kiện liên quan đến cửa hàng thương mại điện tử của bạn. Do đó, cửa sổ bật lên có thể không thể thiếu trong chiến lược tiếp thị tổng thể của bạn.
Hơn nữa, cửa sổ bật lên có thể giúp bạn kết nối với khách hàng của mình. Bạn có thể nhúng các cuộc khảo sát để hỏi phản hồi của người tiêu dùng và cải thiện sản phẩm và dịch vụ của mình.
Tuy nhiên, cửa sổ bật lên có thể có giá rẻ và dễ xâm phạm nếu bạn không thiết kế chúng tốt và chọn đúng trình kích hoạt cho đối tượng của mình. Do đó, bạn cần đảm bảo rằng bạn sử dụng chúng một cách hiệu quả. Đây là nơi Elementor đến.
Các loại cửa sổ bật lên phần tử
Elementor đi kèm với hơn 100 mẫu cửa sổ bật lên mà bạn có thể tùy chỉnh theo nhu cầu của mình. Những thiết kế này bao gồm:
- Các biểu mẫu nắm bắt khách hàng tiềm năng
- Cửa sổ bật lên đăng ký email
- Cửa sổ bật lên khuyến mại
- Đăng nhập và biểu mẫu chào mừng
- Cửa sổ bật lên nội dung bị hạn chế
- Các hình thức bán thêm và bán kèm
Các mẫu cửa sổ bật lên này được tích hợp sẵn trong bộ công cụ Elementor, bao gồm các tính năng thiết kế khác nhau cho các loại trang web khác nhau:

Hơn nữa, bạn có thể chọn từ các vị trí bật lên và thiết kế trực quan khác nhau, bao gồm:
- Phương thức
- Trượt vào
- Toàn màn hình
- Thanh trên cùng hoặc dưới cùng
Cuối cùng, bạn có thể sử dụng trình chỉnh sửa Elementor để nhanh chóng tùy chỉnh bất kỳ mẫu cửa sổ bật lên nào để phù hợp với nhu cầu của mình. Bây giờ chúng tôi sẽ giải thích cách bạn có thể làm điều đó với phần mềm miễn phí và Elementor Pro.
Cách tạo cửa sổ bật lên bằng Elementor (Miễn phí)
Trước đây, plugin Essential Addons for Elementor có tính năng Modal Popup cho phép người dùng tạo một biểu mẫu bật lên miễn phí. Sử dụng nó là một trong những cách phổ biến nhất để thanh toán cho Elementor Pro. Bạn có thể tìm thấy nhiều video hướng dẫn từ một vài năm trước để chỉ cho bạn cách sử dụng phương pháp này.
Tuy nhiên, tính năng Modal Popup miễn phí đã chuyển đổi thành một phần tử Lightbox và Modal cao cấp. Nó không còn miễn phí để sử dụng. Do đó, bạn sẽ cần phải nâng cấp lên Elementor Pro hoặc trả tiền cho một trong các plugin Elementor cao cấp mà chúng tôi đề cập ở phần sau của bài đăng này.
Cách tạo cửa sổ bật lên với Elementor Pro (trong 5 bước đơn giản)
Elementor Pro đi kèm với tính năng Cửa sổ bật lên được tích hợp sẵn mà chúng tôi sẽ sử dụng trong hướng dẫn này. Trước tiên, bạn cần mua và kích hoạt Elementor Pro. Sau đó, bạn có thể truy cập trang tổng quan WordPress của mình để bắt đầu tạo cửa sổ bật lên.
Bước 1: Tạo cửa sổ bật lên của bạn
Bắt đầu bằng cách điều hướng đến Phần tử> Mẫu> Cửa sổ bật lên trong bảng điều khiển WordPress của bạn. Sau đó, nhấp vào THÊM POPUP MỚI để tạo một POPUP mới:

Sau đó, bạn sẽ được nhắc đặt tên cho mẫu của mình. Khi bạn đã quyết định một tên, hãy chọn TẠO MẪU :

Thao tác này sẽ khởi chạy trình tạo trang Elementor. Bây giờ bạn có thể chọn từ các thiết kế mẫu cửa sổ bật lên hiện có hoặc xây dựng mẫu của riêng bạn từ đầu. Trong ví dụ của chúng tôi, chúng tôi đã chọn một trong các mẫu hiện có để chỉnh sửa:

Bây giờ bạn có thể thử với các cài đặt thiết kế để tùy chỉnh cửa sổ bật lên của mình. Ví dụ: bạn có thể thay đổi bố cục, căn chỉnh, hình nền và màu sắc của nó.
Bước 2: Chọn điều kiện hiển thị của bạn
Khi bạn hài lòng với thiết kế của mình, hãy nhấp vào mũi tên hướng lên bên cạnh XUẤT BẢN . Sau đó, chọn Điều kiện hiển thị từ menu xuất hiện:

Tiếp theo, nhấn THÊM ĐIỀU KIỆN để chọn nơi cửa sổ bật lên Elementor sẽ hiển thị trên trang web của bạn. Sau đó, bạn có thể chọn một vị trí từ các tùy chọn sau: Toàn bộ Trang web , Lưu trữ , Số ít hoặc WooCommerce :

Khi bạn hài lòng với lựa chọn của mình, hãy nhấn TIẾP THEO . Bạn sẽ được đưa đến Trình kích hoạt cho biểu mẫu bật lên của mình.
Bước 3: Thiết lập trình kích hoạt cửa sổ bật lên của bạn
Trên trang Trình kích hoạt , bạn có thể quyết định người dùng cần làm gì để xem cửa sổ bật lên Elementor của bạn. Theo mặc định, mỗi tùy chọn bị tắt và bạn có thể bật tùy chọn này bằng cách nhấp vào thanh trượt. Sau đó, bạn sẽ cần chỉ định các giá trị cho trình kích hoạt của mình.
Ví dụ: nếu bạn chọn Tải trang , bạn sẽ cần chọn trong vòng bao nhiêu giây cửa sổ bật lên của bạn sẽ hiển thị:

Với On Scroll , bạn có thể chọn hướng người dùng cần cuộn và số lượng trang họ phải xem trước khi cửa sổ bật lên xuất hiện:

Cài đặt On Scroll To Element yêu cầu bạn nhập CSS ID. Khi người dùng tiếp cận phần tử đó trên trang của bạn, cửa sổ bật lên sẽ xuất hiện:

Với Khi nhấp , bạn sẽ phải chỉ định số lần người dùng phải nhấp vào trang web của bạn trước khi cửa sổ bật lên hiển thị:

Cài đặt Sau khi không hoạt động cho phép bạn kích hoạt cửa sổ bật lên sau khi người dùng không hoạt động trên trang của bạn trong một khoảng thời gian cụ thể:

Cuối cùng, bạn có thể chọn bật Ý định thoát trên trang . Cài đặt này sẽ kích hoạt cửa sổ bật lên của bạn khi người dùng cố gắng rời khỏi trang của bạn:

Nhấp vào LƯU & ĐÓNG hoặc TIẾP THEO để điều hướng đến Quy tắc nâng cao khi bạn hoàn tất . Chúng ta sẽ xem xét các quy tắc này một chút sau trong hướng dẫn này.
Bước 4: Thêm nút bật lên vào trang web của bạn (Tùy chọn)
Bạn có thể muốn kích hoạt cửa sổ bật lên Elementor của mình khi người dùng nhấp vào một phần tử cụ thể trên trang của bạn. Ví dụ: bạn có thể thiết kế một nút có nội dung “Đăng ký ngay bây giờ” và nhúng nó vào chân trang của bạn. Khi người dùng nhấp vào nút, họ sẽ thấy biểu mẫu đăng ký email của bạn trên màn hình của họ.
Đầu tiên, bạn cần tạo một nút Elementor trên trang web của mình. Mở bài đăng hoặc trang trong trình chỉnh sửa Elementor và chọn Nút từ menu. Kéo và thả nó vào trang của bạn:

Khi bạn đã chỉ định văn bản nút và tùy chỉnh giao diện của nó, hãy nhấp vào Liên kết> Thẻ động . Sau đó, chọn Tác vụ> Cửa sổ bật lên từ menu thả xuống:
Đăng kí để nhận thư mới

Nhấp vào Cửa sổ bật lên và chọn Mở Cửa sổ bật lên từ trình đơn Hành động thả xuống. Bạn cũng có thể chọn biểu mẫu của mình từ menu Cửa sổ bật lên:

Cuối cùng, chọn CẬP NHẬT để xuất bản nút của bạn. Bất cứ khi nào người dùng nhấp vào nó, họ sẽ được đưa đến biểu mẫu đăng ký của bạn.
Bước 5: Lưu mẫu cửa sổ bật lên của bạn để sử dụng sau
Bạn cũng có thể lưu cửa sổ bật lên của mình dưới dạng mẫu. Mở cửa sổ bật lên của bạn bằng trình chỉnh sửa Elementor và nhấp vào mũi tên hướng lên bên cạnh CẬP NHẬT . Chọn Lưu dưới dạng Mẫu từ menu:

Sau đó, bạn sẽ được nhắc đặt tên cho mẫu của mình. Khi bạn hoàn tất, hãy nhấp vào LƯU :

Cửa sổ bật lên sẽ được lưu vào Thư viện Mẫu của bạn. Bây giờ bạn có thể sử dụng nó khi xây dựng một trang hoặc bài đăng với các mẫu.
Cách định cấu hình cài đặt cửa sổ bật lên phần tử nâng cao
Chúng tôi đã trình bày cách tạo cửa sổ bật lên Elementor cơ bản. Tuy nhiên, cũng có một số cài đặt nâng cao mà bạn có thể muốn sử dụng.
Mở lại cửa sổ bật lên của bạn bằng trình chỉnh sửa Elementor và điều hướng đến Quy tắc hiển thị . Hãy xem các cài đặt khác nhau.
Cài đặt hiển thị cửa sổ bật lên
Một số cài đặt hiển thị cửa sổ bật lên nâng cao cho phép bạn kiểm soát khi người dùng nhìn thấy biểu mẫu của bạn. Những cấu hình này có thể hữu ích để nhắm mục tiêu khách truy cập trở lại hơn là những khách truy cập lần đầu.
Ví dụ: bạn có thể chọn hiển thị cửa sổ bật lên sau khi khách truy cập đã xem trang của bạn một số lần nhất định:

Ngoài ra, bạn có thể chọn Hiển thị sau X phiên . Cài đặt này nhắm mục tiêu các lượt truy cập tổng thể thay vì các trang cụ thể:

Cài đặt Hiển thị tối đa X lần có thể giới hạn số lần người dùng sẽ nhìn thấy cửa sổ bật lên của bạn. Bạn có thể cân nhắc việc bật nó nếu bạn không muốn liên tục gửi spam cho khách truy cập bằng các hình thức xâm nhập:

Bạn cũng có thể sử dụng cài đặt Hiển thị trên thiết bị và Hiển thị trên trình duyệt để giới hạn nơi cửa sổ bật lên của bạn sẽ xuất hiện. Cửa sổ bật lên có thể đặc biệt xâm nhập trên thiết bị di động, vì vậy bạn có thể cân nhắc việc tắt chúng ở đó:

Cung cấp trải nghiệm người dùng di động tốt hơn có thể khiến khách truy cập của bạn hài lòng. Nó cũng có thể thúc đẩy nỗ lực Tối ưu hóa Công cụ Tìm kiếm (SEO) của bạn và giúp trang web của bạn xếp hạng cao hơn trong kết quả tìm kiếm.
Cài đặt nguồn gốc người dùng
Cuối cùng, Elementor cho phép bạn định cấu hình cài đặt hiển thị cửa sổ bật lên tùy thuộc vào nơi người dùng của bạn đến từ. Các cài đặt này có thể hữu ích nếu bạn hướng khách truy cập đến trang đích quảng cáo và sau đó sử dụng cửa sổ bật lên của bạn cho các giao dịch quảng cáo hoặc yêu cầu chi tiết liên hệ.
Các cài đặt sau cho phép bạn chỉ định URL và chọn liên kết nào sẽ kích hoạt cửa sổ bật lên:

Cuối cùng, bạn có thể chọn ẩn cửa sổ bật lên của mình khỏi những người dùng đã đăng nhập. Bạn có thể sử dụng cài đặt này nếu bạn điều hành một trang web thành viên trả phí:

Khi bạn hài lòng với tất cả các cài đặt đã chọn, hãy nhấp vào LƯU & ĐÓNG . Bạn có thể điều hướng trở lại đây và thay đổi bất kỳ cấu hình nào trong số này nếu cần.
3 plugin hàng đầu cho cửa sổ bật lên phần tử
Như chúng ta đã thấy, Elementor Pro giúp bạn dễ dàng tạo cửa sổ bật lên cho trang web của mình. Tuy nhiên, bạn có thể chưa sẵn sàng nâng cấp lên trình tạo trang cao cấp. Ngoài ra, bạn có thể đang tìm kiếm các tính năng thiết kế bổ sung.
Dưới đây là một số plugin tốt nhất cho cửa sổ bật lên Elementor có lưu ý những điều đó.
1. JetPopUp (Crocoblock)

JetPopUp là một plugin thân thiện với người dùng với giao diện kéo và thả tích hợp hoàn hảo với Elementor. Nó cho phép bạn tạo các biểu mẫu bật lên động và tùy chỉnh, bao gồm đăng ký email, biểu mẫu chấp thuận cookie và đếm ngược.
JetPopUp tỏa sáng với các tính năng tương tác của nó. Bạn có thể chọn từ nhiều cài đặt hoạt ảnh, chẳng hạn như trượt, lật và xoay. Hơn nữa, plugin có nhiều mẫu khác nhau mà bạn có thể tùy chỉnh theo nhu cầu của mình.
Plugin này cũng cho phép bạn chọn và tùy chỉnh nhiều cài đặt hiển thị. Ví dụ: bạn có thể hiển thị biểu mẫu JetPopUp của mình cho người dùng vào những ngày cụ thể khi họ cố gắng rời khỏi trang web của bạn hoặc sau một khoảng thời gian cuộn nhất định.
Đặc trưng:
- Chọn từ các mẫu cửa sổ bật lên đặt trước
- Chọn các điều kiện hiển thị cửa sổ bật lên khác nhau
- Bao gồm và loại trừ các điều kiện cụ thể
- Sử dụng hiệu ứng hoạt hình
Giá cả: JetPopUp có giá 22 đô la mỗi năm. Gói này bao gồm tích hợp MailChimp, một tiện ích bật lên và hỗ trợ khách hàng. Bạn cũng có thể nâng cấp lên đăng ký bao trọn gói với $ 130 mỗi năm. Nó đi kèm với 20 plugin bổ sung và 150 widget bổ sung.
2. Tiện ích hộp bật lên (PowerPack)

Nếu bạn đang tìm kiếm cài đặt bật lên Elementor nâng cao, hãy cân nhắc sử dụng Tiện ích hộp bật lên của PowerPack. Nó cho phép bạn tạo cửa sổ bật lên tùy chỉnh bao gồm các yếu tố động như video, hình ảnh và bản đồ Google.
Plugin này cho phép bạn kích hoạt cửa sổ bật lên theo các hành động khác nhau của người dùng, bao gồm mục đích thoát và độ trễ thời gian tùy chỉnh. Bạn cũng có thể tạo cửa sổ bật lên hai bước tương tác với các liên kết và các yếu tố khác của Kêu gọi hành động (CTA).
Hơn nữa, Popup Box Widget có cài đặt hoạt ảnh nâng cao. Bạn có thể phóng to cửa sổ bật lên, sử dụng định dạng báo hoặc sử dụng hoạt ảnh 3D.
Đặc trưng:
- Chọn từ các hiệu ứng hoạt hình
- Tạo cửa sổ bật lên hai bước
- Sử dụng độ trễ thời gian và trình kích hoạt người dùng
- Hiển thị hình ảnh, video và các yếu tố tương tác khác
Giá cả: Popup Box Widget được bao gồm trong đăng ký PowerPack. Các gói bắt đầu từ $ 49 mỗi năm và đi kèm với hơn 70 vật dụng Elementor khác nhau.
3. Hộp đèn & Phương thức (Bổ trợ cần thiết cho Elementor)

Chúng tôi đã đề cập ngắn gọn về plugin bật lên Elementor này trước đó. Lightbox & Modal là một widget đa năng với công cụ Essential Addons for Elementor. Nó giúp bạn tạo cửa sổ bật lên với các tính năng tương tác như video, hình ảnh và hoạt ảnh.
Lightbox & Modal được thiết kế để hoạt động với các nút và liên kết trên trang web Elementor của bạn. Bạn có thể tạo các nút, biểu tượng và văn bản tùy chỉnh để kích hoạt biểu mẫu bật lên của mình. Hơn nữa, tiện ích có thể sử dụng độ trễ thời gian và các hành động khác của người dùng.
Nhìn chung, Hộp đèn & Phương thức có thể là lựa chọn tốt nhất để tương tác với người dùng của bạn thay vì chỉ trình bày thông tin.
Đặc trưng:
- Sử dụng trình kích hoạt nút cho cửa sổ bật lên
- Hiển thị hình ảnh, video và nội dung tùy chỉnh
- Tùy chỉnh bố cục cửa sổ bật lên
- Chọn từ các loại hoạt ảnh khác nhau
Giá cả: Lightbox & Modal được bao gồm trong các phần mềm bổ sung cần thiết cho Elementor Pro. Các gói bắt đầu từ $ 39,97 mỗi năm và có hơn 70 tiện ích con và bảy tiện ích mở rộng.
Bản tóm tắt
Biểu mẫu bật lên có thể rất cần thiết cho việc tạo khách hàng tiềm năng và các chiến dịch tiếp thị của bạn. Họ cũng có thể giúp bạn tương tác với khách truy cập và giữ họ trên trang của bạn. May mắn thay, bạn có thể tạo cửa sổ bật lên tùy chỉnh bằng trình tạo trang Elementor.
Thật dễ dàng để tạo cửa sổ bật lên với Elementor Pro. Bạn có thể tùy chỉnh chúng để phù hợp với thương hiệu của mình và quyết định vị trí chúng hiển thị trên trang web của bạn. Bạn cũng có thể đặt cài đặt hiển thị nâng cao để hiển thị cửa sổ bật lên của mình dựa trên hành động và nguồn gốc của người dùng.
Thiết kế một trang web đẹp với Elementor chỉ là bước đầu tiên. Bạn cũng sẽ cần một nhà cung cấp dịch vụ lưu trữ WordPress trong góc của bạn. Kiểm tra các kế hoạch định giá của chúng tôi ngay hôm nay để xem Kinsta có thể tăng giá trang web của bạn như thế nào!
Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:
- Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
- Tích hợp Cloudflare Enterprise.
- Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
- Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.
Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.