Tạo Popup liên hệ với Elementor trên WordPress

Giới thiệu

Ở bài viết này mình sẽ hướng dẫn cho bạn cách tạo popup cho website chuyên nghiệp với plugin  Popup Maker . Đây là plugin miễn phí nhưng tính năng nó mang lại vông cùng hữu ích. Chi tiết cách cài đặt và thiết lập các bạn có thể xem hướng dẫn bên dưới nhé.

Hướng dẫn cài đặt

Ở bài viết này mình sẽ hướng dẫn các bạn tạo Popup liên hệ, do đó bạn cần chuẩn bị sẵn cho mình một Form liên hệ để chúng ta chèn vào Popup nhé.

Bước 1: Cài đặt Plugin

Đầu tiên, các bạn hãy tiến hành cài đặt và kích hoạt Plugin Popup Maker cho website của mình trước nhé.

Cách cài đặt một Plugin mới các bạn có thể xem ở hướng dẫn bên dưới.

• Cài đặt Plugin trên website WordPress

Bước 2: Tạo nút hoặc hình ảnh để click hiển thị Popup

Thông thường chúng ta sẽ cần hiển thị các Form liên hệ bên trong Post hoặc Page để khách hàng có thể điền thông tin. Ví dụ ở đây mình tạo mới một Page với Elementor, và bây giờ mình sẽ truy cập vào Page đó để tạo một nút click hiển thị Popup.

Tại giao diện chỉnh sửa với Elementor , bạn chọn mẫu nút Button và kéo vào khu vục mình cần hiển thị.

Tiếp đó bạn nhấp chuột vào nút vừa tạo để chỉnh sửa các thuộc tính bên trong (kích thước, màu sắc, text, hiệu ứng ..vv. )

Quan trọng: Sau khi chỉnh sửa các thuộc tính xong, sẽ đến phần quan trong là tạo lớp CSS (CSS Classes) cho button đó. Ở đây mình đặt tên là cls-popup-lienhe

Bây giờ mình tiến hành SAVE hoặc PUBLISH page vừa chỉnh sửa.

Bước 3: Lấy Shortcode của Form cần tạo Popup

Ở đây mình có một Form tên Contact us với Shortcode là: contact-form-7 id=”4019″ title=”Contact us” , bây giờ mình sẽ sử dụng Form này để làm Popup hiển thị.

Bước 4: Cài đặt Popup

Ngay sau khi cài đặt và kích hoạt Plugin , các bạn sẽ nhận được thông báo như hình. Bạn nhấn vào Create your first popup! để bắt đầu tạo Popup đầu tiên. Hoặc bạn có thể tạo popup mới bằng cách truy cập Popup Maker >> Create Popup

Tại phần tạo Popup, bạn điền thông tin cơ bản sau

Tiếp đến bạn kéo xuống phần POPUP SETTINGS, chọn Triggers >> Add New Trigger

Ở mục tiếp theo là Display (cách hiển thị Popup), các bạn có thể setup từ cách hiển thị Popup, theme, kích thước , chiều cao..vv. Cái này các bạn có thể tự thiết lập theo ý mình nhé. Còn ở đây mình để mặc định.

Hoàn tất các phần thiết lập, bạn nhấn Publish để đăng Popup lên nhé.

Bây giờ hãy truy cập page và kiểm tra nhé. Dưới đây là Video mỉnh demo thành công

Chúc các bạn thực hiện thành công.!