Cửa sổ bật lên đầu tiên được tạo từ kịch bản do Ethan Zukerman tưởng tượng chochỗ ở của trang web của anh ấy trên Tripod vào đầu những năm 90. Người dùng của anh ấy phàn nàn về số lượng quảng cáo anh ấy đặt trên trang web, vì vậy anh ấy quyết định đặt các biểu ngữ trên một trang riêng biệt sẽ mở ra khi người dùng truy cập trang đó.
Đoạn mã nhỏ này vẫn không phải là một cửa sổ bật lên thực sự như bạn thấy trên mọi trang web ngay bây giờ, nhưng đó là nơi tất cả bắt đầu. Trên các trang web hiện đại, cửa sổ bật lên được sử dụng cho các mục đích khác nhau, không chỉ cho quảng cáo. Biểu mẫu liên hệ, cảnh báo chính sách bảo mật và đề xuất đăng ký cũng thường được hiển thị dưới dạng cửa sổ bật lên.
Có hai điều khiến người dùng khó chịu khi nói đến cửa sổ bật lên: khi họ nhảy vào bạn khi bạn không muốn họ; và khi sự xuất hiện của nó khác hoàn toàn với phong cách của trang web. Hai vấn đề này xuất hiện khi bạn sử dụng các plugin dường như không có chất lượng cao nhất.
Vấn đề lớn nhất của hầu hết các plugin mà các nhà phát triển mới sử dụng cho tạo cửa sổ bật lên là sự thiếu kiểm soát đối với thông điệp kết quả. Tuy nhiên, bạn có thể tránh được tất cả những vấn đề này nếu sử dụng Elementor để tạo một trang web.
Hai plugin tuyệt vời, được tạo riêng cho Elementor trang Builder, giúp bạn tạo cửa sổ bật lên thuộc bất kỳ loại, hình dạng và phong cách nào bạn cần - Trình tạo Popup Elementor et JetPopup. Vì cả hai đều được làm bằng xương giống như Elementor, câu hỏi duy nhất cần đặt ra là chọn plugin nào trong số các plugin này. Để giúp bạn đưa ra quyết định này, tôi sẽ xem xét kỹ lưỡng cả hai và bạn có thể so sánh ưu và nhược điểm của chúng. Vì vậy, chúng ta hãy đi!
Tải xuống và cài đặt
Đây không phải là tiêu chí quan trọng nhất khi chọn plugin nào để sử dụng, nhưng để dùng thử, bạn cần nắm được nó trước. Đó là lý do tại sao tôi sẽ bắt đầu ngay từ đầu và phác thảo quy trình để có được nó - giá cả, nỗ lực liên quan và sự đơn giản của quy trình thiết lập.
Trình tạo Popup
Plugin này được tạo bởi nhóm Elementor. Do đó, chúng tôi có thể gọi anh ta là "đứa con" thực sự của mình. Đây là bản cập nhật cuối cùng cho Elementor, được phát hành vào tháng 2019 năm XNUMX để đáp ứng nhu cầu của khách hàng. Tuy nhiên, nó không khả dụng cho người dùng phiên bản Elementor miễn phí.
Popup Builder được bao gồm trong gói đăng ký chuyên nghiệp. Vì vậy, để có khả năng tạo cửa sổ bật lên, trước tiên bạn phải có Elementor Pro. Gói định giá đơn giản nhất cho phép bạn sử dụng tất cả các tính năng đa dạng của Elementor cho một trang web có giá 49 đô la mỗi năm. Do đó, từ các bước đầu tiên (mua Elementor Pro), đây là thuật toán để lấy Popup Builder:
- Mua Pro Elementor trang Builder.
- Chuyển đến tài khoản cá nhân của bạn và tải xuống plugin.
- Chuyển đến bảng điều khiển trang web của bạn, Plugin> Thêm mới, nhấp vào nút “Tải lên plugin” và chọn tệp .zip thích hợp.
- Khi quá trình cài đặt hoàn tất, hãy kích hoạt plugin bằng khóa cấp phép của bạn.
- Đây là Trình tạo cửa sổ bật lên có thể tìm thấy trong tab Mẫu> Cửa sổ bật lên.
Đó là một con đường hơi dài, nhưng với Trình tạo cửa sổ bật lên, bạn cũng có được một bộ sưu tập khổng lồ bao gồm các yếu tố khác nhau từ Elementor, chẳng hạn như các vật dụng, mẫu và các công cụ bổ sung khác.
Trình tạo Popup
JetPopup
"Gia đình" các plugin Jet đã có nhiều hơn các bài viết 10 và JetPopup là một trong số đó. Nó đã được tạo cẩn thận dành riêng cho Elementor và tăng số lượng công cụ có sẵn. Plugin này là t
Hoàn toàn tương thích với các phiên bản miễn phí và trả phí. Vì vậy, bạn không cần phải thực hiện bất kỳ giao dịch mua bổ sung nào. JetPopup có giá 15 đô la và khi bạn nhận được nó, bạn có thể sử dụng nó cho chỉ một trang web. Nếu bạn cần nó cho nhiều dự án, bạn có thể mua plugin theo giấy phép của nhà phát triển (bạn sẽ mất $ 45) và sử dụng nó cho năm trang web. Thuật toán để tải plugin đơn giản hơn một chút:
- Mua plugin trên Thị trường TemplateMonster. Nó sẽ được tải xuống máy tính của bạn.
- Chuyển đến bảng điều khiển trang web của bạn, Plugin> Thêm mới, nhấp vào nút “Tải lên plugin” và chọn tệp .zip thích hợp.
- Khi quá trình cài đặt hoàn tất, hãy kích hoạt plugin.
- Thì đấy! Khi bạn mở menu tùy chỉnh Elementor (bằng cách nhấp vào nút "Chỉnh sửa bằng Elementor"), bạn sẽ tìm thấy phần JetPopup trong menu bên trái của tiện ích.
Tạo popup
Bây giờ, khi các công cụ đã có và sẵn sàng, tôi có thể thử tạo một cửa sổ bật lên bằng cả hai plugin và xem tính năng này đơn giản và dễ hiểu như thế nào. Tiếp theo, tôi sẽ tạo một cửa sổ bật lên cơ bản và xem các tùy chọn tùy chỉnh cho Popup Builder và JetPopup.
Trình tạo Popup
Trong Pro Elementor, cửa sổ bật lên được thực hiện riêng biệt với các trang của trang web. Để thay đổi giao diện của trang web, hãy mở trang bạn muốn tùy chỉnh, nhấp vào nút “Chỉnh sửa bằng Elementor” và thực hiện thay đổi. Nhưng để tạo (và sau đó chỉnh sửa) cửa sổ bật lên, bạn phải đi tới Mẫu> Cửa sổ bật lên và nhấn nút “Thêm cửa sổ bật lên mới”.
Trong cửa sổ mở, bạn cần chọn mẫu bạn sẽ tạo (vâng, bạn có thể tạo mẫu không chỉ cho cửa sổ bật lên, mà còn cho các trang và các mục khác) và đặt tên cho nó.
Sau khi nhấn nút "Tạo mẫu", bạn sẽ được chuyển hướng đến menu cá nhân hóa Elementor. Dễ dàng hơn để tùy chỉnh một mục hiện có bằng cách xây dựng nó từ đầu. Do đó, trước tiên bạn sẽ được yêu cầu chọn một mô hình thích hợp.
Tôi đã chọn một trong những mô hình được hiển thị ở đầu danh sách thư viện. Ngay sau khi lựa chọn, bạn đáp xuống không gian làm việc Elementor mà có lẽ bạn đã quen. Các tùy chọn cá nhân hóa được đặt trong thanh bên ở bên trái màn hình. Bạn có ba tab ở đây.
Tab "Cài đặt" cho phép bạn thay đổi bố cục của cửa sổ bật lên, thay đổi tên của mô hình và xem trước. Trên tab "Kiểu", bạn có thể tùy chỉnh thiết kế - thay đổi màu sắc, phông chữ, hình ảnh và đường viền. Tab "Nâng cao" cũng có một bộ thanh trượt bổ sung; ví dụ: chúng ngăn cửa sổ bật lên đóng bằng phím ESC.
Như bạn có thể thấy - không có gì bất ngờ, nếu bạn đã sử dụng Elementor trước đó, bạn sẽ không gặp phải bất kỳ vấn đề nào với plugin này. Đây là video chi tiết giải thích cách tạo cửa sổ bật lên bằng Trình tạo cửa sổ bật lên:
JetPopup
Plugin này cũng thêm một tab mới vào bảng điều khiển của bạn theme WordPress và với sự trợ giúp của nó, cửa sổ bật lên cũng được tạo riêng biệt với các trang. Các cửa sổ bật lên có sẵn cũng được lưu trữ trong một tab có tên “Thư viện cửa sổ bật lên”. Để tạo một cửa sổ bật lên mới, bạn có thể nhấn nút “Thêm” trên mẫu tạo sẵn hoặc đi tới JetPopup> Thêm cửa sổ bật lên mới, đặt tên cho mẫu và nhấn “Chỉnh sửa bằng Elementor”.
Lĩnh vực công việc hơi khác so với định mức vì bạn hiện đang tạo một cửa sổ nhỏ hơn. Trong menu bên trái, bạn có thể thêm bất kỳ loại mục nào vào cửa sổ bật lên của mình.
Plugin JetPopup thêm một mục duy nhất vào menu widget - nút hành động theo ngữ cảnh. Điều này cho phép bạn xác định loại hành động sẽ xảy ra khi người dùng nhấn nút.
Không thực sự rõ ràng khi mở cài đặt từ cửa sổ bật lên. Bạn cần nhấp vào nút bảo trì ở cuối trình đơn. Menu cài đặt khá giống với menu trong Popup Builder, nhưng chỉ có hai tab tùy chỉnh. “Cài đặt chung” cho phép bạn xác định hiệu ứng hoạt ảnh, đổi tên mô hình hoặc xác định các điều kiện. Trên tab "Kiểu", bạn có thể thay đổi bố cục, màu sắc, hình ảnh, phông chữ và đường viền.
JetPopup có một chức năng ít rõ ràng hơn nhưng bù lại bằng các video hướng dẫn chi tiết và hữu ích.
trigger
Để hữu ích và không gây khó chịu cho khách truy cập, cửa sổ bật lên phải xuất hiện đúng lúc. Các điều kiện theo đó cửa sổ bật lên được hiển thị được gọi là "trình kích hoạt". Các điều kiện có sẵn càng chi tiết, plugin popup càng linh hoạt. Độ chính xác rất quan trọng nếu bạn không muốn người dùng rời khỏi trang sau khi cửa sổ bật lên của mẫu đăng ký xuất hiện.
Trình tạo Popup
Plugin này giúp bạn xác định các điều kiện cần thiết ngay sau khi tùy chỉnh cửa sổ bật lên. Khi bạn nhấn nút "Xuất bản", bạn sẽ thấy cửa sổ nơi bạn có thể xác định các điều kiện (trên trang này cửa sổ bật lên này sẽ được hiển thị), kích hoạt (khi cửa sổ bật lên sẽ được hiển thị) và các quy tắc nâng cao.
Popup Builder có sáu trình kích hoạt, chẳng hạn như hiển thị trên một lần cuộn và nhấp chuột, và bảy quy tắc nâng cao, chẳng hạn như hiển thị sau một số phiên đã đặt hoặc hiển thị trên một số thiết bị nhất định. Trình kích hoạt và các quy tắc nâng cao có các công tắc trượt đơn giản và sẽ rất nhanh chóng để thiết lập tất cả các thông số bạn muốn.
JetPopup
Tất cả các trình kích hoạt, điều kiện và sự kiện mở được nhóm lại với nhau trong các tham số. Sau khi nhấp vào nút bảo trì, bạn mở các tab cài đặt và có thể đặt trình kích hoạt ngay lập tức. Bạn có thể đặt tỷ lệ phần trăm của trang sau khi cuộn, menu ngữ cảnh sẽ hiển thị hoặc số giây mà sau đó người dùng sẽ thấy thông báo.
Cửa sổ chỉ có thể được hiển thị một lần hoặc mỗi khi người dùng thực hiện một số hành động nhất định (Tôi không thực sự khuyên bạn nên làm như vậy - nó sẽ không khiến người dùng hài lòng). Bạn cũng có thể chọn rất chính xác bài đăng hoặc trang mà cửa sổ bật lên cụ thể này sẽ được hiển thị. Nói chung, plugin này khá linh hoạt và cho phép bạn hiển thị các cửa sổ bật lên với độ chính xác cao.
định vị
Người dùng chắc chắn sẽ không thể tránh khỏi các cửa sổ nhảy ngay ra giữa màn hình, nhưng chúng lại khiến khách truy cập trang web mất tập trung và có thể thực sự gây khó chịu. Không phải tất cả cửa sổ bật lên đều nên được đặt ở trung tâm, một dải băng hẹp ở trên cùng sẽ ít được chú ý hơn, nhưng có thể hiệu quả hơn nhiều. Điều này có nghĩa là bạn cần kiểm soát vị trí của cửa sổ và có thể di chuyển xung quanh màn hình.
Trình tạo Popup et JetPopup chia màn hình thành chín phần và cho phép bạn đặt cửa sổ bật lên của mình vào bất kỳ phần nào trong số đó. Vị trí được xác định theo thang trái-phải và lên-xuống. Nó không linh hoạt lắm, nhưng nó đủ cho một cửa sổ bật lên.
Hiệu ứng hoạt hình
Cách cửa sổ trượt (hoặc cuộn hoặc nhảy) trên trang là rất quan trọng. Nếu cửa sổ di chuyển quá nhanh hoặc quá chậm, nó sẽ không hiệu quả. Những cú nảy, nhột và run cũng nên được sử dụng với độ chính xác cao. Hiệu ứng hoạt ảnh làm cho trang web năng động hơn, nhưng chúng cũng có thể làm hỏng toàn bộ ấn tượng.
Trình tạo Popup có 36 kiểu hoạt ảnh đầu vào, bao gồm các kiểu trượt, mở, thu phóng, nảy và xoay theo các hướng khác nhau. Tất cả những điều này, cùng với thời lượng của hoạt ảnh, có thể được tìm thấy trong phần "Bố cục" của tab Cài đặt.
Có 13 loại hoạt ảnh trong plugin JetPopup, bao gồm mờ dần, lật dọc, trượt khác nhau, nảy và phóng to. Bạn sẽ tìm thấy chúng trong phần "Cài đặt" của tab Cài đặt.
mô hình
Trong một số trường hợp, bạn muốn tạo một cửa sổ bật lên có cấu trúc cụ thể và biết chính xác nó sẽ trông như thế nào. Nhưng đây là một dịp khá hiếm hoi; nhiều khi bạn không biết cửa sổ bật lên của mình phải chứa những yếu tố nào. Đây là nơi mà các mẫu có ích. Ngay cả khi bạn không sử dụng bất kỳ mẫu được định cấu hình trước nào, việc xử lý chúng có thể cung cấp cho bạn cái nhìn tổng quan. Và tất nhiên, việc tùy chỉnh một mặt hàng có sẵn sẽ nhanh hơn và dễ dàng hơn nhiều so với việc xây dựng nó từ đầu.
Trình tạo Popup đã thêm một danh mục vào thư viện mẫu của Elementor. Như tôi đã nói với bạn trước đây, bạn có thể thấy điều này ngay khi bắt đầu quá trình tạo cửa sổ bật lên mới. Các loại mẫu cửa sổ bật lên đủ lớn; có hơn 100 mặt hàng. Ở góc trên bên trái, công cụ sắp xếp theo danh mục thả xuống cho phép bạn tăng tốc tìm kiếm của mình. Các danh mục dễ hiểu và sẽ không mất nhiều thời gian để tìm thấy cửa sổ bật lên bạn cần.
JetPopup cũng có một thư viện mẫu khổng lồ. Tất cả chúng đều được lưu trữ trong tab Thư viện theo ngữ cảnh và có các tính năng tiện dụng như nút xem trước và bộ đếm sử dụng. Có nhiều tùy chọn sắp xếp hơn, danh sách có thể được cấu hình để hiển thị một loại mô hình cụ thể và sau đó được đặt theo bất kỳ thứ tự nào; ví dụ, tùy thuộc vào ngày tạo. Tôi không thể cho bạn biết số lượng chính xác các mô hình có sẵn, nhưng chắc chắn có hơn 100.
Bảng so sánh
| Trình tạo Popup Elementor | JetPopup | |
| Prix | 45 $ | 15 $ |
| mô hình | 100 + | 100 + |
| trigger | Kích hoạt 6, quy tắc nâng cao 7 | Các sự kiện mở 5 với các tham số bổ sung |
| Animatio | loại 36 | loại 13 |
| Hướng dẫn | tài liệu hướng dẫn | tài liệu hướng dẫn, video 9 |
Kết luận
Tôi không thể nói cái nào trong số hai plugin này là tốt hơn; quá phức tạp để đánh giá chúng. Mỗi trường hợp và mỗi người có những yêu cầu riêng đối với việc lựa chọn plugin. Tôi đoán bạn nên tự mình xác định - cái nào trong hai cái này sẽ phù hợp nhất với bạn? Tôi chúc bạn may mắn trong việc thêm một cửa sổ bật lên tuyệt vời vào trang web của mình!
