Tạo Popup Bằng Lightbox Trong Flatsome

Bài viết này mình sẽ hướng dẫn cách tạo popup trong flatsome để 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.

Xem Thêm:

1. Lightbox Trong Flatsome Là Gì?

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ờ….

2. Hướng Dẫn Cách Tạo Popup Trong Flatsome 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" id="popup"] – Hãy copy nó. (Bỏ dấu nháy “” chữ block)

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]
Chú ý: Bỏ dấu " ở sau [ đầu tiên.

Sau đó, 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

3. Hướng Dẫn Chi Tiết Tạo Popup Báo Giá.

Nói về WP khi tạo Form liên hệ có lẽ CF7 là phổ biến nhất, mình sẽ hướng dẫn tạo popup trong flatsome thông qua form từ CF7 nhé.

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

Tạo một contact form với nội dung như sau

[text* your-name placeholder "Họ 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=”311″]

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Ý NHẬN BÁO GIÁ" icon="icon-checkmark" size="142"]
Vui lòng điền đầy đủ thông tin bên dưới để chúng tôi liên hệ gởi báo giá cho quý khách!
['contact-form-7 id="311"]
['/section]
Chú ý: Bỏ dấu " ở sau [ đầu tiên.

Tương tự, sau khi tạo block bạn sẽ nhận được một shortcode “[“block id”=”bao-gia”]” (Bỏ dấu nháy “” chữ block)

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.

['lightbox id="bao-gia" width="450px" padding="30px"]
['block id="bao-gia"]
['/lightbox]
Chú ý: Bỏ dấu " ở sau [ đầu tiên.

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.

Như vậy bài viết này mình đã hướng dẫn các bạn cách tạo popup trong Flatsome bằng cách sử dụng Lightbox. Nếu có gì thắc mắc, các bạn ib hỗ trợ Tại Đây

5/5 - (1 bình chọn)

Có thể bạn quan tâm

  • Hướng dẫn chèn fanpages vào website

    Hướng Dẫn Cách Chèn Fanpage Vào Website

    Nội Dung Chính1. Lightbox Trong Flatsome Là Gì?2. Hướng Dẫn Cách Tạo Popup Trong Flatsome Bằng LightboxBước 1 – Tạo một UX BLOCKBước 2 – Chèn popup vào web3. Hướng Dẫn Chi Tiết Tạo Popup Báo Giá.Bước 1 – Tạo một contact form 7Bước 2 – Tạo block Popup Báo GiáBước 3 –  Tạo LightboxBước 4 …

  • tạo bài viết liên quan trong flatsome

    Thêm Bài Viết Liên Quan Trong Flatsome

    Nội Dung Chính1. Lightbox Trong Flatsome Là Gì?2. Hướng Dẫn Cách Tạo Popup Trong Flatsome Bằng LightboxBước 1 – Tạo một UX BLOCKBước 2 – Chèn popup vào web3. Hướng Dẫn Chi Tiết Tạo Popup Báo Giá.Bước 1 – Tạo một contact form 7Bước 2 – Tạo block Popup Báo GiáBước 3 –  Tạo LightboxBước 4 …

  • cai-dat-smtp-wordpress-gmail

    Cách Cấu Hình SMTP Cho WordPress

    Nội Dung Chính1. Lightbox Trong Flatsome Là Gì?2. Hướng Dẫn Cách Tạo Popup Trong Flatsome Bằng LightboxBước 1 – Tạo một UX BLOCKBước 2 – Chèn popup vào web3. Hướng Dẫn Chi Tiết Tạo Popup Báo Giá.Bước 1 – Tạo một contact form 7Bước 2 – Tạo block Popup Báo GiáBước 3 –  Tạo LightboxBước 4 …

  • advanced-options-flatsome

    THAY ĐỔI STYLE & LAYOUT CHO FLATSOME

    Nội Dung Chính1. Lightbox Trong Flatsome Là Gì?2. Hướng Dẫn Cách Tạo Popup Trong Flatsome Bằng LightboxBước 1 – Tạo một UX BLOCKBước 2 – Chèn popup vào web3. Hướng Dẫn Chi Tiết Tạo Popup Báo Giá.Bước 1 – Tạo một contact form 7Bước 2 – Tạo block Popup Báo GiáBước 3 –  Tạo LightboxBước 4 …

  • seo tổng hợp

    Cách Đưa Google Analytics Vào Website

    Nội Dung Chính1. Lightbox Trong Flatsome Là Gì?2. Hướng Dẫn Cách Tạo Popup Trong Flatsome Bằng LightboxBước 1 – Tạo một UX BLOCKBước 2 – Chèn popup vào web3. Hướng Dẫn Chi Tiết Tạo Popup Báo Giá.Bước 1 – Tạo một contact form 7Bước 2 – Tạo block Popup Báo GiáBước 3 –  Tạo LightboxBước 4 …