Tạo popup miễn phí và nhẹ trong theme flatsome

Cái này chắc rất nhiều bạn cần. Nhưng phần nhiều không biết đến tính năng này sẵn có trong flatsome. Có khi các bạn sẽ sử dụng một plugin khác để cài vào web của mình. Việc này không tốt lắm. Vì cài càng nhiều plugin càng nặng. Bạn có thể dùng lightbox với close button tức nút tắt (đóng) theo mấy câu lệnh sau. Vô cùng tiện và nhẹ web nha các bạn.

Trải nghiệm thôi nào.

Các bạn tạo lightbox trên trang trước nhé. Chi tiết shortcode lightbox Ux builder

Đoạn code dưới thêm vào file function.php của child theme để an toàn hơn khi mình update themes.

flatsome_lightbox_close_btn_inside

Thẻ flatsome_lightbox_close_btn_inside lọc cho phép thay đổi vị trí nút đóng hộp đèn. Bên trong (True) hoặc bên ngoài (false).

Ví dụ:

<?php // Do not include this if already open!

add_filter( 'flatsome_lightbox_close_btn_inside', '__return_true' );

Yêu cầu bản Flatsome 3.9.0 hoặc cao hơn

flatsome_lightbox_close_button

Thẻ flatsome_lightbox_close_button cho phép thay đổi mẫu nút tắt popup

Các bạn tham khảo đoạn code dưới đây.

<?php 
// Do not include this if already open!
add_filter( 'flatsome_lightbox_close_button', function ( $html ) {
$html = '<button title="%title%" type="button" class="mfp-close">';

/* f.ex. We're replacing the SVG icon into another one. */
$html .= '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.2 475.2" width="28" height="28"><path d="M405.6 69.6C360.7 24.7 301.1 0 237.6 0s-123.1 24.7-168 69.6S0 174.1 0 237.6s24.7 123.1 69.6 168 104.5 69.6 168 69.6 123.1-24.7 168-69.6 69.6-104.5 69.6-168-24.7-123.1-69.6-168zm-19.1 316.9c-39.8 39.8-92.7 61.7-148.9 61.7s-109.1-21.9-148.9-61.7c-82.1-82.1-82.1-215.7 0-297.8C128.5 48.9 181.4 27 237.6 27s109.1 21.9 148.9 61.7c82.1 82.1 82.1 215.7 0 297.8z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFF"/><path d="M342.3 132.9c-5.3-5.3-13.8-5.3-19.1 0l-85.6 85.6-85.6-85.6c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l85.6 85.6-85.6 85.6c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4l85.6-85.6 85.6 85.6c2.6 2.6 6.1 4 9.5 4 3.5 0 6.9-1.3 9.5-4 5.3-5.3 5.3-13.8 0-19.1l-85.4-85.6 85.6-85.6c5.3-5.3 5.3-13.8 0-19.1z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFF"/></svg>';
$html .= '</button>';
return $html;
} );

Yêu cầu bản Flatsome 3.9.0 hoặc cao hơn

Nhớ ghé thăm web mình thường xuyên để cập nhật thêm nhiều tiện ích cực hay cho Flatsome nhé.