1BANNER 123
5/5 - (176 bình chọn)

Nay mình sẽ chia sẻ 1 cách để tạo được banner 2 bên website của flatsome với ux block và css, mọi người theo dõi đoạn code dưới đây để biết cách làm nhé.

Demo

Tao Banner QC 2 Ben Website
Cách tạo banner 2 bên website

Cách để tạo được 2 bên website cũng không quá khó, các bạn tạo giúp 1 mình 1 uxblock có nội dụng như sau

Row>2 col-6>img

Tao Block Chua Banner
Tạo block chứa banner QC

Ở Row các bạn đặt class là banner_qc và bật chế độ chỉ show ở desktop giúp mình

Dat Class Banner QC
Đặt Class cho banner QC

Sau đó các bạn thêm đoạn code này vào functions.php

function show_banner_qc(){
	if ( is_front_page()){
		global $post;
	$content_post = get_post('241');
	$thecontent = $content_post->post_content;
		if(!empty($thecontent)){
			echo do_shortcode('[block id="banner-qc-home"]');
		}
	}
}
add_action('flatsome_after_page','show_banner_qc');

Nội dung của đoạn function trên là kiểm tra uxblock có nội dung hay không, nếu có sẽ xuất ra kết quả. Và kết quả chỉ hiển thị ở trang chủ.

Đoạn code này các bạn chú ý giúp mình 2 điểm. 1 là số 241, 2 là shortcode block id=”banner-qc-home”.

Ở cái số 1 các bạn thay giúp mình bằng id của uxblock mà các bạn đã tạo. Để lấy được ID các bạn xem hình dưới đây.

Lay Id Uxblock
Lấy ID của UX block

Ở cái số 2 thì các bạn thay bằng shortcode hiện tại của ux block là được.

Về phần CSS thì các bạn thêm code này vào style.css hoặc chỗ thêm css tùy chỉnh

.banner_qc{
	position: fixed;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
	width:1200px;
}
.banner_qc>.col{
	position: absolute;
    top: 0px;
    width: 150px;
    height: 514px;
    cursor: pointer;
}
.banner_qc>.col:first-child{
	right: calc(100% + 10px);
}
.banner_qc>.col:nth-child(2){
	left: calc(100% + 10px);
}

ở class banner_qc width thì các bạn để theo width hiện tại của website nhé

Và các bạn tận hưởng thành quả của cách tạo banner 2 bên cho website. Chúc các bạn thành công

2 thoughts on “Hướng dẫn cách tạo banner QC 2 bên website với block của Flatsome

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *