Cách tạo và hiển thị cửa sổ bật lên bằng thẻ bài viết trong WordPress

Bạn có muốn tạo và hiển thị một cửa sổ bật lên trên mỗi thẻ bài đăng trong WordPress không? Vì vậy, hãy tiếp tục đọc bài viết này.

Chúng tôi chắc rằng bạn đã quen thuộc với cửa sổ nhỏ xuất hiện khi duyệt một trang web. Chà, nó được gọi là cửa sổ bật lên hoặc cửa sổ bật lên. Cửa sổ bật lên có thể xuất hiện ở các kích cỡ và vị trí khác nhau trên màn hình trên một trang web.

Trong WordPress, có nhiều plugin để tạo cửa sổ bật lên, chẳng hạn như Elementor Pro, JetPopup, Brizy Pro, v.v.

Điều quan trọng cần nhớ là cửa sổ bật lên không được gây khó chịu cho khách truy cập trang web của bạn. Do đó, hãy tạo một cửa sổ bật lên đơn giản và hấp dẫn nhất có thể.

Mục lục

Một số plugin WordPress để tạo cửa sổ bật lên

Elementor Pro

Elementor Pro là tiện ích mở rộng Elementor với hàng trăm tính năng cao cấp. Nó cung cấp cho bạn các công cụ chuyên nghiệp mạnh mẽ giúp tăng tốc quy trình làm việc và thiết kế của bạn. Elementor Pro cung cấp cho bạn toàn quyền kiểm soát bố cục và thiết kế trang web của bạn. Trong trường hợp này, bạn có thể tự do tùy chỉnh thiết kế cửa sổ bật lên của mình.

dùng Elementor Pro để tạo cửa sổ bật lên theo thẻ bài đăng rất đơn giản và dễ sử dụng. Bạn có thể dễ dàng xác định các điều kiện hiển thị của cửa sổ bật lên của mình một cách rất chính xác.

Crocoblock's JetPopup là một phần mở rộng cho Elementor. Bạn có thể mua nó dưới dạng plugin độc lập hoặc mua theo gói với các plugin Crocoblock khác. Ưu điểm của việc sử dụng JetPopup để tạo cửa sổ bật lên là nó đi kèm với rất nhiều tính năng thú vị.

Bạn có thể thử với các trình kích hoạt cửa sổ bật lên.
Bạn có thể tạo hoạt ảnh cho cửa sổ bật lên.
Một số lượng lớn các mẫu cửa sổ bật lên có sẵn.

Đọc cũng: 22 Addon cao cấp tốt nhất cho Elementor

Brizy chuyên nghiệp

Trình tạo cửa sổ bật lên của Brizy chuyên nghiệp cung cấp cho bạn hai lựa chọn. Đầu tiên là cửa sổ bật lên được kích hoạt bằng nhấp chuột và thứ hai là các điều kiện và trình kích hoạt tự động.

Mở khi nhấp chuột: Cửa sổ bật lên của bạn có thể được kích hoạt đơn giản bằng cách nhấp vào các phần tử trên trang của bạn.
Trình kích hoạt và điều kiện tự động: Bạn có thể định cấu hình hành động của khách truy cập sẽ xác định thời điểm cửa sổ bật lên được hiển thị.

Như đã đề cập trước đó, bạn có một số tùy chọn để tạo cửa sổ bật lên trong WordPress. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo và hiển thị cửa sổ bật lên trên mỗi thẻ bài đăng bằng phiên bản Elementor Pro, vì vậy hãy chắc chắn rằng bạn đã có một cái.

Điều đầu tiên cần làm là tạo một mẫu Popup mới. Để tạo mẫu Popup mới, hãy truy cập Mẫu > Cửa sổ bật lên trên bảng điều khiển WordPress của bạn và nhấp vào nút Thêm mới.

Tiếp theo, thêm tên Popup của bạn và nhấp vào nút TẠO MÔ HÌNH.

Bạn sẽ được chuyển đến thư viện mẫu, bạn có thể chọn một mẫu từ cửa sổ thư viện hoặc thiết kế mẫu Popup của riêng bạn. Để sử dụng mẫu từ thư viện, chỉ cần nhấp vào nút chèn.

Nhưng trong hướng dẫn này, chúng ta sẽ tạo mẫu Popup từ đầu. nhấp vào biểu tượng X để đóng thư viện mẫu.

Chúng ta cần thực hiện một số điều chỉnh trong cài đặt Popup trước khi bắt đầu tạo mẫu Popup. Bạn có thể tìm thấy các cài đặt tốt nhất cho trang web của mình. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn các cài đặt Popup mà bạn chọn.

Nhấp vào biểu tượng bánh răng ở góc dưới bên trái. Trong cài đặt Cửa sổ bật lên, hãy thay đổi Chiều rộng trong 90% chiều rộng của chế độ xem (VW) Et các Chức vụ en Giữa-Dưới.

Tiếp theo, thiết kế mẫu Popup của bạn. Thêm một phần mới và chọn cấu trúc 5 cột. Trong phần cài đặt, đặt Chiều rộng trên 950. Bạn có thể chơi với cài đặt của mình.

Ví dụ: bạn có thể chuyển đến tab Phong cách để đặt nền, hãy chuyển đến tab tiên tiến để tùy chỉnh lề và nhiều tính năng khác.

Bây giờ trở lại cột của bạn. Ở cột bên trái, đặt chiều rộng thành 33% và đối với bốn cột còn lại, thành 16%.

Ở cột bên trái, chúng tôi sẽ thêm tiện ích Tiêu đề với một số văn bản. Bạn có thể thêm văn bản mời khách truy cập trang web của mình xem nội dung khác có liên quan đến nội dung hiện tại hoặc bất kỳ văn bản nào khác mà bạn chọn.

Ở bên phải, chúng tôi sẽ thêm tiện ích Hình ảnh. Bạn có thể thêm hình ảnh từ hình thu nhỏ/hình ảnh nổi bật của bài đăng hoặc tải chúng lên theo cách thủ công.

Bây giờ cấu trúc đã sẵn sàng. Quay trở lại Cài đặt bật lên để tùy chỉnh hoạt ảnh nhập, thoát và lề. Trong hướng dẫn này, chúng tôi đặt đầu vào thành Giảm dần và đầu ra trên mờ dần lên. Sau đó chuyển đến tab tiên tiến và đặt lề là 30 (giá trị chung cho các liên kết).

Bây giờ thiết kế đã sẵn sàng, hãy nhấp vào nút PUBLISH để đặt điều kiện hiển thị và trình kích hoạt. Để xác định điều kiện hiển thị, bấm vào nút THÊM ĐIỀU KIỆN và chọn tùy chọn của bạn từ danh sách thả xuống.

Như bạn muốn hiển thị Popup theo thẻ bài viết, bạn có thể thiết lập các điều kiện hiển thị như sau (xem hình động).

Bấm tiếp. trong tab trigger, hãy đặt trình kích hoạt thành Khi cuộn lật công tắc sang vâng. Xác định Chiều hướng sur Bas và Chiều rộng trên 95%. Bởi vì chúng tôi muốn Popup xuất hiện khi khách truy cập đến cuối bài viết của chúng tôi.

Trong hướng dẫn này, chúng ta sẽ không định nghĩa Quy tắc nâng cao. Vì vậy, bấm vào LƯU VÀ ĐÓNG. Bây giờ chúng ta đã hoàn thành.

Hãy xem nó trông như thế nào.

Ở đây bạn vừa hoàn thành cửa sổ bật lên của mình. Xem thêm các bài viết liên quan của chúng tôi:

Tải xuống Elementor Pro

Chia sẻ bài viết này :

Mikhos Gartner

Mikhos Gartner là chuyên gia về công cụ kỹ thuật số, người mua, kiểm tra và đánh giá các công cụ SAAS cho các doanh nghiệp nhỏ. Dựa trên nhiều năm kinh nghiệm trong lĩnh vực công nghệ, ông đưa ra những đánh giá sâu sắc. Nội dung của nó được tiêu thụ rộng rãi, phục vụ hàng triệu người dùng mỗi tháng.