Tạo popup website wordpress đẹp theo ý muốn siêu đơn giản

Tạo popup website wordpress – Có rất nhiều bạn có hỏi làm cách nào để hiển thị popup trong website wordpress mà không cần phải sử dụng plugin. Thực tế thì trên theme Flatsome đã hỗ trợ sẵn điều này nhưng chắc nhiều bạn chưa biết đến.

Tạo popup website wordpress

Hướng dẫn tạo popup website wordpress khi click vào button, link

Theme Flatsome có popup hiện bằng Lightbox. Và cách sử dụng như sau, bạn sử dụng đoạn code sau để tạo popup website wordpress nhé:

Lưu ý: Code mình có thêm số 1 vào sau các button và lightbox để hiển thị được cho các bạn xem. Khi các bạn sử dụng nhớ bỏ số 1 đi nhé.

[button1 text="Liên hệ" link="#dat-ten-id"]

[lightbox1 id="ten-da-dat-truoc-do" width="600px" padding="20px"]nội dung trong popup[/lightbox1]

Giải thích code:

  • [button1]: là nút để click vào, có thể đổi sang dạng khác như thẻ <a href=”#” link=”#dat-ten”></a>
  • [lightbox1]: là khung hiện lên nội dung trong popup
  • link=”#dat-ten-id” phải trùng với id=”tet-da-dat-truoc-do” id là không có dấu # đâu nha.
  • width và padding: là khung popup dài 600px, có thể chỉnh tăng giảm số này để hiển thị bạn mong muốn.

Ví dụ mình sẽ tạo 1 button liên hệ ngay phía trước nút thêm giỏ hàng mình sẽ làm như sau:

Truy cập Giao diện > Tuỳ biến > Product Page > HTML before Add To Cart button rồi thêm đoạn code sau:

[button1 text="Liên hệ" link="#lienhenhanh"]
[lightbox1 id="lienhenhanh" width="600px" padding="10px"]<img src="https://cdn.tgdd.vn/Files/2021/06/04/1357472/tong-dai-hotline-viettelpay-va-cac-kenh-lien-he--1.jpg" width="600">[/lightbox1]

**(Nhớ bỏ số 1 đi nha)

Ở ví dụ trên, khi click vào nút liên hệ sẽ hiện ra 1 popup là hình ảnh. Nếu bạn nào muốn hiển thị ra nội dung khác thì chỉ cần thay link ảnh hoặc nội dung vào đoạn code trên nha.

Trường hợp bạn muốn tạo popup website wordpress dưới dạng Form Liên hệ

Copy và page đoạn code sau vào vị trí bạn muốn hiển thị nha

[button1 text="Liên hệ" link="#popup-cdb"]
[lightbox1 id="popup-cdb" width="600px" padding="20px"]

Error: Contact form not found.

[/lightbox1]

**(Nhớ bỏ số 1 đi nha)

Thay short code contact form của bạn vào là được nhé.

Chúc các bạn thành công tạo popup website wordpress . Nếu có thắc mắc hay gặp vấn đề gì hãy comment xuống bến dưới để mình hỗ trợ nha. Cảm ơn các bạn đã quan tâm đến hungshare.com.

Bài viết liên quan

Đánh giá bài viết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *