Muốn kích vào nút bottom và hiển thị lên popup Maker thì làm thế nào?

[ptic24]

Để kích hoạt một popup được tạo bởi Popup Maker khi nhấp vào một nút (button) trên trang WordPress của bạn, bạn cần thực hiện các bước sau. Tôi sẽ hướng dẫn chi tiết để bạn dễ dàng áp dụng:
Bước 1: Tạo Popup trong Popup Maker

1. Cài đặt và kích hoạt Popup Maker:
   • Nếu chưa cài, vào Plugins > Add New trong dashboard WordPress, tìm "Popup Maker", cài đặt và kích hoạt.
2. Tạo Popup mới:
   • Vào Popup Maker > Add Popup trong menu WordPress.
   • Đặt tên cho popup (ví dụ: "My Popup").
   • Trong phần Content, thêm nội dung bạn muốn hiển thị trong popup (ví dụ: form từ Sendy, văn bản, hình ảnh, v.v.).
   • Nhấn Publish hoặc Update để lưu popup.
3. Ghi lại ID của Popup:
   • Sau khi tạo, bạn sẽ thấy ID của popup trong danh sách (ví dụ: popmake-123, trong đó 123 là số ID). Ghi lại ID này (chỉ cần phần số, như 123).

Bước 2: Tạo Nút (Button) trên Trang
Bạn có thể thêm nút bằng cách sử dụng trình chỉnh sửa WordPress (Gutenberg, Elementor, hoặc HTML thủ công).
Cách 1: Dùng Gutenberg (Block Editor)

1. Vào trang hoặc bài viết nơi bạn muốn đặt nút.
2. Thêm block Button:
   • Nhấn dấu + > tìm "Button" > thêm block Button.
   • Chỉnh sửa nội dung nút (ví dụ: "Nhấn để xem Popup").
3. Thêm class để kích hoạt popup:
   • Chọn block Button > vào Block Settings (bên phải) > mở rộng Advanced.
   • Trong mục Additional CSS Class(es), nhập popmake-123 (thay 123 bằng ID popup của bạn).

Cách 2: Dùng HTML thủ công

1. Thêm mã HTML sau vào nơi bạn muốn đặt nút (dùng block "Custom HTML" hoặc chỉnh sửa mã nguồn):
   html
   CollapseWrapCopy
   <button class="popmake-123">Nhấn để xem Popup</button>
   
   • Thay 123 bằng ID popup của bạn.
2. (Tùy chọn) Thêm CSS để nút đẹp hơn:
   html
   CollapseWrapCopy
   <button class="popmake-123" style="padding: 10px 20px; background-color: #0073aa; color: white; border: none; cursor: pointer;">Nhấn để xem Popup</button>
   

Cách 3: Dùng Elementor (nếu bạn dùng Elementor)

1. Thêm widget Button vào trang.
2. Trong Button Settings:
   • Đặt text cho nút (ví dụ: "Nhấn để xem Popup").
   • Vào tab Advanced > mục CSS Classes, thêm popmake-123 (thay 123 bằng ID popup).

Bước 3: Cấu hình Popup trong Popup Maker

1. Vào Popup Maker > All Popups, chọn popup bạn vừa tạo để chỉnh sửa.
2. Trong Popup Settings (bên dưới trình chỉnh sửa):
   • Tab Triggers:
     • Nhấn Add New Trigger > chọn Click Open.
     • Trong Extra CSS Selectors, nhập .popmake-123 (thay 123 bằng ID popup của bạn). Điều này liên kết nút với popup.
     • Nhấn Add để lưu trigger.
   • Tab Display:
     • Đảm bảo các cài đặt như vị trí hiển thị (center, top, v.v.), kích thước popup phù hợp với nội dung.
   • Tab Close:
     • (Tùy chọn) Thêm nút đóng hoặc cho phép đóng khi nhấp ra ngoài.
3. Nhấn Update để lưu.

Bước 4: Kiểm tra

1. Truy cập trang nơi bạn đặt nút.
2. Nhấn vào nút và kiểm tra xem popup có hiển thị không.
3. Nếu không hoạt động:
   • Đảm bảo ID popup trong class (popmake-123) khớp với ID thực tế.
   • Kiểm tra xem bạn đã thêm trigger "Click Open" trong Popup Maker chưa.

Lưu ý

• Nếu bạn muốn tích hợp Sendy:
  • Trong nội dung popup, dán mã HTML subscription form từ Sendy (lấy từ Sendy > List > Subscription Form).
  • Đảm bảo form hoạt động bằng cách thử nhập email và kiểm tra danh sách trong Sendy.
• Nếu dùng trình chỉnh sửa khác (như WPBakery, Divi), cách thêm class tương tự, chỉ cần áp dụng vào phần cài đặt nâng cao của nút.

Nếu bạn gặp khó khăn ở bước nào, cứ nói với tôi để tôi hỗ trợ thêm nhé!