Flatsome là theme bán chạy số 1 về lĩnh vực website thương mại điện tử (Woocommerce) và Lightbox là một công cụ giúp hiển thị hình ảnh hoặc nội dung trên một cửa sổ phóng to, tạo ra một trải nghiệm tốt hơn. Và hơn hết Lightbox trong theme flatsome còn có thể làm Popup hiển thị quảng cáo khuyến mãi. Sau đây ad sẽ hướng dẫn sử dụng lightbox và tạo popup
Tạo popup bằng Lightbox shortcode trong Flatsome
Dưới đây là các ví dụ về ứng dụng cách sử dụng Lightbox shortcode tạo popup tại vị trí bất kỳ trong website Flatsome của bạn
Click vào button để hiện popup
Sau đây là ví dụ của một Lightbox đơn giản được giới thiệu trên Uxthemes
[button text="Lightbox button" link="#test"][lightbox id="test" width="600px" padding="20px"]Add lightbox content here...[/lightbox]Tạo popup tự động mở theo giờ hẹn trước
[lightbox auto_open="true" auto_timer="3000" auto_show="always/once" id="newsletter-signup-link" width="600px" padding="20px"]
Auto lightbox......
[/lightbox]Các thông số cấu hình
auto_show=”always”: luôn luôn mở khi truy cập, chỉ để hiện lần đầu các bạn để làauto_open=”once”auto_timer=”3000″: là thời gian tự mở tính theo mili giây, 3000 = 3 giây- Auto lightbox: Nội dung Popup hiện lên có thể là link hình ảnh, video, có thể là form đăng ký, chương trình khuyến mãi, Like fanpage… tuỳ vào chủ ý của bạn
Lời khuyên: Phần nội dung Popup các bạn nên tạo bằng UX block.
Bạn hãy trình bày những gì bạn muốn hiện lên trên popup trong UX Block này. Có thể sử dụng UX Builder để hỗ trợ
Bước 1: Tạo nội dung Popup hiện lên
Các bạn vào UX Blocks ==> Add new tạo nội dung mình muốn, sau đó lưu lại sẽ được shortcode dạng như sau: [block id="popup-hien-len-o-trang-chu"]
P/s: Bạn có thể Flatsome Studio trong UX Buider để có thể import những thư viện về bảng giá, contact, banner hình ảnh… có sẵn rất đẹp để sử dụng cho Popup hiện lên
Bước 2: Dán code Popup vào website
Các bạn vào Trang chủ ==> sửa trang ==> UX builder ==> Add elements ==> HTML coppy và paste đoạn code này vào là xong
[lightbox auto_open="true" auto_timer="3000" auto_show="always" width="600px" padding="20px"]
[block id="popup-hien-len-o-trang-chu"]
[/lightbox]
Như vậy:
- Bạn muốn Popup hiển thị cho 1 trang hoặc bài viết cụ thể khác Trang Chủ => Bạn dán Code Popup cho trang hoặc bài viết đó
- Bạn muốn Popup hiện thị ở tất cả các trang => Bạn dán Code Popup vào Flatsome ==> Advanced ==> Global Settings ==> Footer scripts
