Hướng dẫn thêm shortcode lightbox vào theme Flatsome

Lightbox cho phép bạn hiển thị hộp thoại Popup vào trang web WordPress một cách dễ dàng. 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.

Sau đây là một số ví dụ đơn giản về lightbox.

Lightbox đơn giản

[button text="Lightbox button" link="#test"]

[lightbox id="test" width="600px" padding="20px"]
  Add lightbox content here...
[/lightbox]

Newsletter

Bạn có thể sử dụng lightbox để tạo đăng ký newsletter trong flatsome. Xem ví dụ sau:

<a href="#newsletter-signup-link"><span class="icon-envelop"></span> Newsletter Signup</a>

[lightbox id="newsletter-signup-link" width="600px" padding="20px"]
  
[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]

[/lightbox]

Lightbox tự động bật

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:

[lightbox auto_open="true" auto_timer="3000" auto_show="always/once" id="newsletter-signup-link" width="600px" padding="20px"]
  
[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]

[/lightbox]

Trên đây là những ví dụ về mã shortcode để tạo lightbox trong flatsome, nếu bạn có những ý tưởng nào hay về cách sử dụng flatsome xin chia sẻ với chúng tôi dưới bài viết này nhé.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook