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

Flatsome, một trong những chủ đề WordPress bán hàng phổ biến nhất hiện nay, đã giới thiệu một tính năng mới cho các khách hàng của mình – Lightbox.

Lightbox là một tính năng được sử dụng để hiển thị hình ảnh hoặc video một cách nổi bật hơn trên trang web của bạn. Nó cho phép người dùng xem các hình ảnh hoặc video trên cùng một trang web mà không cần phải chuyển đến trang khác.

Với tính năng này, Flatsome giúp tăng trải nghiệm người dùng và tăng khả năng tương tác của trang web. Lightbox cũng cho phép khách hàng của Flatsome tùy chỉnh các tùy chọn như kích thước, màu sắc và thời gian hiển thị.

Flatsome đã trở thành một trong những chủ đề WordPress bán hàng được ưa chuộng nhất nhờ vào tính năng linh hoạt và thiết kế đẹp mắt. Lightbox là một bổ sung tuyệt vời cho danh mục tính năng của Flatsome và giúp cho Flatsome trở thành một lựa chọn đáng tin cậy cho các doanh nghiệp bán hàng trực tuyến.

Nếu bạn đang tìm kiếm một chủ đề WordPress bán hàng phù hợp với nhu cầu của mình, Flatsome sẽ là một lựa chọn không thể bỏ qua.

  • 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

Dow full code tại đây

Bài Viết Liên Quan