Hướng dẫn tạo popup trong Flatsome bằng lightbox

Giới thiệu Lightbox trong Flatsome.

Lightbox là popup mà khi bạn click vào vào mộtbutton thìnhảy lên một popup tính năng này được tích hợp sẵn trong Flatsome.

Tính năng thường được dùng để thông báo các trương trình khuyến mại hoặc tích hợp form để lấy thông tin người dùng ….

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

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

Sử dụng UX BLOCK để build cho đẹp ae nhé:

Sau khi tạo xong trả cho bạn 1 shortcode dạng như sau:

– 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àoFlatsome–>Advanced–>Global setting, chèn đoạn code trên vàoFooter scriptrồ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

Các bước vẫn như trên chi tiết hơn 1 chut a/e theo dõi :))

Bước 1 – Tạo mộtcontact form 7

Sau khi cài đặt Contact Form 7 -> tạo một contact với nội dung như sau:

[text 1="your-name" 2="placeholder" 3="Họ và tên*" language="*"][/text]

1	[text 1="your-name" 2="placeholder" 3="Họ và tên*" language="*"][/text]

[email* your-mail placeholder “Email*”] [tel* your-phone placeholder “Số điện thoại*”] [textarea your-content placeholder “Nội dung…”] [submit “GỬI NGAY”]

Sau khi tạo xong bạn xe nhận được shortcode dạng “

Error: Contact form not found.

“.

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"] <br />[ux_text font_size="1.5" text_align="center"] THÔNG TIN LIÊN HỆ [/ux_text] <br />[gap height="20px"] <br />[ux_text text_align="center"] <br /><p class="wpcf7-contact-form-not-found"><strong>Error:</strong> Contact form not found.</p> <br />[/ux_text] <br />[/section]

1	[section padding="0px"] <br />[ux_text font_size="1.5" text_align="center"] THÔNG TIN LIÊN HỆ [/ux_text] <br />[gap height="20px"] <br />[ux_text text_align="center"] <br />[contact-form-7 id="888"] <br />[/ux_text] <br />[/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 Lightbox

VàoFlatsome–>Advanced–>Global setting, chèn đoạn code dưới vàoFooter Scriptrồi save lại là xong.

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

1	[lightbox id="hwp-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“hwp-bao-gia”là bất cứ khi nào click button sẽ mở hoặc đóng lightbox.

//Vì dụ
<a href=”#hwp-bao-gia”>LIÊN HỆ NHẬN BÁO GIÁ</a>

Chúc thành công!

Flatsome là mẫu theme khá phổ biến được nhiều A/E lựa chọn vì nó nhẹ nhiều tùy chỉnh …. 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. Đơn giản nhưng không phải ai cũng biết tham khảo bài viết dưới đây…!

Giới thiệu Lightbox trong Flatsome.

Lightbox là popup mà khi bạn click vào vào mộtbutton thìnhảy lên một popup tính năng này được tích hợp sẵn trong Flatsome.

Tính năng thường được dùng để thông báo các trương trình khuyến mại hoặc tích hợp form để lấy thông tin người dùng ….

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

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

Sử dụng UX BLOCK để build cho đẹp ae nhé:

Sau khi tạo xong trả cho bạn 1 shortcode dạng như sau:

[crayon-6519f378618c9019857151/]

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

[crayon-6519f378618d4291271942/]

Cuối cùng, hãy vàoFlatsome–>Advanced–>Global setting, chèn đoạn code trên vàoFooter scriptrồ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

Các bước vẫn như trên chi tiết hơn 1 chut a/e theo dõi :))

Bước 1 – Tạo mộtcontact form 7

Sau khi cài đặt Contact Form 7 -> tạo một contact với nội dung như sau:

[crayon-6519f378618d7407263665/] [email* your-mail placeholder “Email*”] [tel* your-phone placeholder “Số điện thoại*”] [textarea your-content placeholder “Nội dung…”] [submit “GỬI NGAY”]

Sau khi tạo xong bạn xe nhận được shortcode dạng “

Error: Contact form not found.

“.

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

[crayon-6519f378618db943779715/]

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 Lightbox

VàoFlatsome–>Advanced–>Global setting, chèn đoạn code dưới vàoFooter Scriptrồi save lại là xong.

[crayon-6519f378618dd832294389/]

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“hwp-bao-gia”là bất cứ khi nào click button sẽ mở hoặc đóng lightbox.

//Vì dụ
<a href=”#hwp-bao-gia”>LIÊN HỆ NHẬN BÁO GIÁ</a>

Chúc thành công!