[Thủ Thuật Flatsome] Tạo popup trong Flatsome bằng Lightbox (Cập nhập mới)

Trong bài viết này là hướng dẫn tạo popup báo giá, popup báo giá kèm URL , popup hẹn giờ, .... bằng cách sử dụng tính năng có sẵn của Flatsome là Lightbox (hay còn gọi là popup flatsome, lightbox flatsome)

Giới thiệu Lightbox trong Flatsome

Lightbox hay còn gọi popup flatsome hay lightbox flatsome là loại popup được tạo bởi Flatsome mà khi bạn click vào vào một button thì mở lên một popup hiển thị nội dung trong đó.

Lightbox được dùng để tạo một shortcode popup flatsome, hiển thị các chương trình khuyến mãi, form đăng ký, hẹn giờ…. 

Hướng dẫn tạo một POPUP bằng Lightbox

Popup Flatsome này sẽ hiển thị một block và tự động mở khi vào trang, chỉ chạy 1 lần duy nhất.

Bước 1 – Tạo một UX BLOCK

Bạn hãy trình bày những gì bạn muốn có trên popup trong UX BLOCK này. Có thể sử dụng UX Builder để hỗ trợ

Sau khi tạo xong UX BLOCK có trả cho bạn 1 shortcode dạng như sau: [block id=”popup”] – Hãy copy nó

Bước 2 – Chèn popup vào web

Trước hết, hãy chèn shortcode vừa copy ở trên vào đoạn code sau:

[lightbox auto_open="true" auto_timer="3000" auto_show="once" id="newsletter-signup-link" width="650px" padding="20px"]
[block id="popup"]
[/lightbox]

Cuối cùng, hãy vào Flatsome –> Advanced –> Global setting, chèn đoạn shortcode Lightbox trên vào Footer script rồi save lại là xong

Giải thích thông số:

• lightbox: là tên shortcode 
• auto_open=”true” : tự mở popup
• auto_timer=”3000″ : mở sau 3 giây
• auto_show=”always/once”  mở 1 lần
• width: chiều rộng của popup
• padding: khoảng cách từ viền đến nội dung popup
• id: là id duy nhất, dùng để cho button xác định popup nào sẽ được mở khi click . Trong ví dụ này xem như bỏ qua vì không sử dụng button, như nếu dùng nó sẽ có dạng như sau

[button1 text="Open Lightbox Button" link="#newsletter-signup-link"]

Nếu bạn không muốn tạo UX Block cũng có thể để text hoặc nội dung bất kỳ vào trong [lightbox] thay cho [block id="popup"]

Trong bất kỳ button nào bạn tạo chỉ cần set href bằng id "newsletter-signup-link" là bất cứ khi nào click button sẽ mở hoặc đóng lightbox.

Hướng dẫn chi tiết tạo một popup báo giá bằng Lightbox

Phổ biến nhất vẫn là sử dụng Lightbox báo giá dùng kèm với Plugin Contact Form 7. Theo dõi đoạn hướng dẫn dưới để hiểu rõ cách làm.

Bước 1 - Tạo một contact form 7

Vào Plugin Contact Form 7 tạo một contact với nội dung như sau

[text* your-name placeholder "Họ và tên (*)"]
 
[email* your-email placeholder "Email (*)"]
 
[text* your-phone placeholder "Số điện thoại (*)"]
 
[text* your-address placeholder "Địa chỉ (*)"]
 
[submit "GỞI YÊU CẦU"]

Sau khi tạo xong bạn xe nhận được shortcode dạng "[contact-form-7 id="469"]".

 Bước 2 - Tạo block Popup Báo Giá

Vào trong UX Block , tạo một block mới và chèn code vào trong

[section padding="0px"]

[title style="center" text="ĐĂNG KÝ BÁO GIÁ" icon="icon-checkmark" size="142"]

Vui lòng điền thông tin form bên dưới để chúng tôi liên hệ gởi báo giá cho quý khách!

[contact-form-7 id="469"]

[/section]

 Tương tự, sau khi tạo block bạn sẽ nhận được một shortcode "[block id="popup-bao-gia"]"

Bước 3 -  Tạo Shortcode Lightbox

Vào Flatsome –> Advanced –> Global setting, chèn đoạn code dưới vào Footer Script rồi save lại là xong.

[lightbox id="bao-gia" width="400px" padding="20px"]
[block id="popup-bao-gia"]
[/lightbox]

Bước 4 - Tạo Button để mở Popup 

Trong bất kỳ button nào bạn tạo, chỉ cần set href bằng "bao-gia" là bất cứ khi nào click button sẽ mở hoặc đóng lightbox.

Nếu bạn có thể thêm style vào trong Flatsome –> Advanced –> Custom CSS để cho popup trông sinh động hơn