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
Giới thiệu Lightbox trong Flatsome.
Lightbox là popup mà khi bạn click vào vào một button thì nhảy lên một popup được xây dựng sẵn trong Flatsome
Lightbox được dùng để 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
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 "”popup”" not found
– 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:
Cuối cùng, hãy vào Flatsome –> Advanced –> Global setting, chèn đoạn code trên vào Footer script rồi save lại là xong
Giải thích thông số:
- 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
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=”123″]“.
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
ĐĂNG KÝ BÁO GIÁ
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="123"]
Tương tự, sau khi tạo block bạn sẽ nhận được một shortcode “ Block "”popup-bao-gia”" not found
Bước 3 – Tạo 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.
Block "popup-bao-gia" not found
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.