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é.
Bài liên quan
- Tạo Sticky Side Button với Flatsome
- Hướng dẫn tạo sticky menu tuyệt đẹp chân trang cho flatsome
- [Code hay flatsome]Hướng dẫn Infinite Scroll, kéo sản phẩm vô cực trong Woocommerce
- [Code hay Flatsome]Sửa lỗi SSL Flatsome
- [Code hay Flatsome]Tắt tính năng lịch sử chỉnh sửa của trình duyệt với flatsome
- Sửa lỗi thiếu tùy chọn chủ đề / Tùy biến hoặc Trình tạo UX
bài viết rất hữu ích, tks ad rất nhiều
sửa ở file nào vậy ad ơi, cám ơn ad
mình mới update lại, bạn cần tạo shortcode lightbox trước rồi thêm code mình add ở trên vào file function ở childtheme nhé