Hướng dẫn tạo lightbox trong theme Flatsome

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 gì cả. Flatsome 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. ( link-id = id của 1 mục lightbox )

  • Light box click ra popup
<a href="#newsletter-signup-link"><span class="icon-envelop"></span> Newsletter Signup</a>
[ux_banner  bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]
[/ux_banner]
  • Light box auto bật theo thời gian gán

Mặc định lightbox không tự động bật, phải được kích hoạt khi bạn nhấn nút hoặc liên kết trên trang. Tuy nhiên, bạn cũng muốn tự động bật lightbox khi load trang. Sử dụng đoạn shortcode sau đây:

[ux_banner  bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
abc
[/ux_banner]
 
Chú ý thuộc tính: 
  • auto_time: thời gian để hiện thị
  • auto_show: hiệu ứng hiện thị

cuối cùng kết quả hiện thị popup

Bài Viết Liên Quan

Trả lời

0973.099.739