[Hướng dẫn] Tạo popup Flatsome theo ý muốn siêu đơn giản

Tạo popup Flatsome theo ý muốn siêu đơn giản

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

Hôm nay, Flatsomea-z sẽ hướng dẫn các bạn cách Tạo popup Flatsome theo ý muốn siêu đơn giản. Bắt đầu nhé!

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

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 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:

  • [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)

Lưu lại và kết quả là như này:

Tạo popup Flatsome theo ý muốn siêu đơn giản
Tạo popup Flatsome theo ý muốn siêu đơn giản

Demo: https://noithatxuong.vn/product/chung-cu-nam-do-complex-anh-chi/

Ở 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 thêm contact form vào popup flatsome thì làm như sau nhé:

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"][contact-form-7 404 "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 ^^

Trả lời

Email của bạn sẽ không được hiển thị công khai.