Popup lightbox cách tạo báo giá trong theme flatsome

Các bạn đang cần một bảng báo giá ấn tượng từ lightbox nhưng cách nào để áp dụng cho nó trên theme Flatsome? Hiện tại có rất nhiều tính năng khác từ code mà bạn chưa biết nhưng phần lớn không biết đến tính năng này sẵn có trong flatsome, cũng như phần hỗ trợ component lightbox đẹp mắt, để kích hoạt lightbox chúng ta sẽ nhấn vào nút hoặc liên kết với link #link-id.

Tạo báo giá cùng popup lightbox

Flatsome cho phép bạn hiển thị hộp thoại popup ( lightbox ) vào trang web WordPress một cách dễ dàng mà không cần phải thêm thư viện

Popup lightbox là gì?

Lightbox là các (bảng) 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ó.

Tạo báo giá popup lightbox cùng 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ợ

Đầu tiên: các bạn vào Blocks >> Blocks tại đây các bạn tạo mới cho mình một Block và copy nó sau khi tạo xong UX BLOCK có trả cho bạn 1 shortcode dạng như sau:

Block "”popup”" not found

Tiếp theo: 

Các bạn 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]Giải thích thông số:

  • Auto_open: Tự động bật
  • auto_timer: Thời gian bao lâu để bật, đơn vị tính ms 3000ms = 3s
  • auto_show=once: Chỉ hiện 1 lần
  • width: chiều rộng của popup
  • padding: khoảng cách từ viền đến nội dung popup

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.

Tạo ra báo giá popup lightbox bằ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 các bạn có thể xem thêm các cách cài đặt khác bằng contact form 7 tại đây: https://sieutocviet.page/tuy-bien-contact-form-7/

Bước 1:

  • Các bạn copy code vào header của CF7
    1
    2
    3
    [lightbox id=“bao-gia” width=“400px” padding=“20px”]
    [block id=“pop-bao-gia”]
    [/lightbox]

Bước 2: 

  • Tạo Block cho CF7
    1
    2
    3
    4
    5
    6
    7
    8
    9
    [section padding=“0px”]
    [title style=“center” text=“ĐĂNG KÝ BÁO GIÁ” icon=“icon-checkmark” size=“142”]
    Vui lòng đin thông tin form bên dưới để chúng tôi liên hgi báo giá cho quý khách!
    [contactform7 id=“469”]
    [/section]

Bước 3:

  • Setting tùy chọn – Các bạn tạo mới và dán form demo bên dưới
    1
    2
    3
    4
    5
    6
    7
    8
    9
    [text* yourname placeholder “Họ và tên (*)”]
    [email* youremail placeholder “Email (*)”]
    [text* yourphone placeholder “Số điện thoại (*)”]
    [text* youraddress placeholder “Địa chỉ (*)”]
    [submit “GỞI YÊU CẦU”]

Cách tạo Lightbox popup báo giá dùng Contact Form 7 kèm url click form

Khi thực hiện như cách trên chúng ta không thể biết khách hàng đã click đến từ nguồn link nào trên website, nếu các bạn muốn lấy thêm url khách hàng click vào lightbox 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

[devwp_posts_related]