BLOGS

Tạo Popup bằng Lightbox shortcode trong Flatsome

Posted on by administrator

Hi anh em, popup Lightbox của Flatsome cũng rất đẹp anh em dùng luôn cho đỡ phải thêm js nặng site lại dễ dùng không có gì cả.

Tạo Popup Lightbox Auto

Cái này thường Popup cho các chương trình sale các thứ anh em muốn nó tự động hiển thị khi vào website thì dùng code này.

[lightbox auto_open="true" auto_timer="3000" auto_show="always/once" id="newsletter-signup-link" width="600px" padding="20px"]
Auto lightbox......
[/lightbox]

Tạo Click Popup Lightbox

Chú ý đến cái link=”#popup” nhé hiển thị nội dung trong cái lightbox có id=”popup” còn buttom hay link hay gì thì tùy các sếp miễn sao link là ID của lightbox.

[button text="Lightbox button" link="#popup"][lightbox id="popup" width="600px" padding="20px"]Add lightbox content here...[/lightbox]

Và hơn hết là bên trong popup dúi luôn cái UX Block vào thì anh em tha hồ mà vẽ với đủ cả rất là tiện luôn.

Lightbox Close

Mặc định nó sẽ ở bên ngoài trên cùng bên phải màn hình, anh em muốn nút close ở trong popup thì thêm cái này vào functions.php nhé.

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

add_filter( 'flatsome_lightbox_close_btn_inside', '__return_true' );

Đổi nút Close

Anh em tìm hiểu nhé

<?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;
} );