Tìm theo từ khóa

Tạo popup báo giá bằng Lightbox trong Flatsome [VIDEO]



Tạo pop up báo giá, dùng lightbox trong Flatsome. Flatsome wordpress theme được xài nhiều hiện nay vì bản thân theme này hỗ trợ rất nhiều cho người dùng, một trong những chức năng hot của Flatsome là tạo các popup bằng Lightbox. Trong nội dung bài viết này mình sẽ trình bày các vấn đề như sau về popup.

  • Tạo popup báo giá
  • Tạo popup báo giá có kèm url
  • Popup hẹn giờ

Dùng lightbox có sẵn của Flatsome và một số plugin hỗ trợ không cần biết code nhé!

Giới thiệu Lightbox trong Flatsome

Lightbox là các popup (click vào nhảy lên 1 form) trong flatsome dùng để hiển thị các chương trình khuyến mãi, form đăng ký …. Với các theme thông thường các chức năng này phải cài plugin, và tất nhiên để có các chức năng cao cấp hơn các bạn phải trả phí.

Flatsome với hệ thống các UX block và shortcode mạnh mẽ các bạn không rành lập trình có thể tạo các popup với các chức năng mà thường phải trả phí mới có. Sau đây là ví dụ của một Lightbox đơn giản được giới thiệu trênUxthemes (click vào button để hiện popup)

Lightbox button

Các bạn có thể nhúng form hoặc code vào lightbox để làm các thao tác dữ liệu mong muốn. Phần tiếp theo mình sẽ hướng dẫn cụ thể theo các trường hợp.

Popup báo giá trong flatsome dùng lightbox
Popup báo giá trong flatsome dùng lightbox

CÁC VÍ DỤ VỀ ỨNG DỤNG LIGHTBOX TRONG THEME FLATSOME

1. Lightbox báo giá dùng Contact Form 7:

Dùng pop up các form báo giá, action form hoặc banner quảng cáo khi có người click vào, tất nhiên bạn cần cài Plugin Contact form 7 nhé:

B11: copy code lightbox vào header
Thêm vào phần html của theme Flatsome như bên dưới nhé

Thêm shortcode vào Header theme Flatsome
Thêm shortcode vào Header theme Flatsome
B12: Tạo block pop-bao-gia
Block thêm vào như hình bên dưới, chú ý block tạo nên phải có shortcode là pop-bao-gia như trên bước 1 hoặc thay bằng shortcode của bạn vào.

Tạo block hiển thị cho popup
Tạo block hiển thị cho popup
B13: chỉnh các tùy chọn trong contact form

Tạo form mới và copy nội dung form demo bên dưới vào

Contact form 7 được thêm vào như bên dưới, chú ý id của contact form 7 (phần khoanh đỏ id=” 3856″) sẽ dùng điền vào B12: 

Contact Form 7 cho Popup
Contact Form 7 cho Popup

2. Lightbox báo giá dùng Contact Form 7 kèm url click form:

Thông thường khi làm như cách 1 chúng ta không thể biết khách hàng click từ trang nào trên website, nếu các bạn muốn lấy thêm url trang khách hàng đang xem thì làm như sau:

Cài plugin Contact Form 7 – Dynamic Text Extension

Trong bước B1.3 bên trên các bạn thêm dòng [dynamichidden dynamicname “CF7_URL”] như bên dưới

Email gởi về trong Contact Form 7 các bạn thêm trường  [dynamicname]  vào nhé.

Thêm trường lấy URL website vào Contact Form 7
Thêm trường lấy URL website vào Contact Form 7

3. Lightbox hẹn giờ trang chủ:

Sau đây là 1 ví dụ về Auto popup Lightbox

Có thêm tham số như sau:

  • auto_open=”true” : tự mở popup
  • auto_timer=”3000″ : mở sau 3 giây
  • auto_show=”always/once”  mở 1 lần

Trăm nghe không bằng mắt thấy, các bạn xem thêm video hướng dẫn để rõ thêm cách dùng nhé. Cuối cùng nếu các bạn thấy bài viết mình mang lại giá trị thì like share hoặc mời caffe cho nhóm có thêm động lực chia sẻ.

4.2/5 - (5 bình chọn)
4 5 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
11 Góp ý
Mới nhất
Cũ nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
hùng
1 năm trước

xin cảm ơn bài viết rất hay

Đức Nguyễn
Đức Nguyễn
2 năm trước

flatsome phiên bảo nào là làm được vậy anh, em làm i chang mãi mà không được, cứ bấm là ra cái link không hà

hai
hai
3 năm trước

Sao mình làm như hướng dẫn mà lightbox không hoạt động AD?

việt
3 năm trước

Ad cho hỏi mình muốn tắt giá sản phẩm trong cái popup ở trang chủ thì làm sao vậy ?

hùng
hùng
3 năm trước

k thấy code để copy đâu bác

Kha
Kha
3 năm trước

Mình add 3 button [ GỌI – CHAT – TẢI BẢNG GIÁ] ở menu giao diện mobile
giờ sao gắn cái lighbox KH bấm Tải bảng giá hiện Popup dc bạn
Có để href=”#bao-gia” mà bấm ko lên
làm theo clip để button gắn bài viết bấm thì lên bình thường
cám ơn
Reply giúp mình có để email nhận thông báo

0
Rất thích suy nghĩ của bạn, hãy bình luận.x