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

Hôm nay mình sẽ chia sẻ cho các bạn 1 cái tip nhỏ để có thể thêm được 1 cái banner full hàng ngang ngay trên đầu của phần header, tip này được sử dụng cho theme Flatsome nhé.

Demo sẽ như thế này:

Banner Dau Trang
Banner trên cùng của phần header

Đầu tiên các bạn chuẩn bị cho mình 1 tấm hình với chiều ngang có phần nội dung bằng với chiều ngang của layout mà các bạn lựa chọn.

Layout
Layout ở demo mình đang để là 1200

Sau đó tạo 1 Uxblock mới các bạn tạo giúp mình theo các element sau:

Z3118684355164_80e231387b12fc9d6de343596360d20b
Tạo các element cần thiết

Element image thì các bạn thêm cái hình banner 1200px ban đâu vào, đối với các section bạn thay màu background trùng vs màu của banner 1200px nhé.

section các bạn chỉnh padding:0.

Option Section
Chỉnh option của section

sau đó các bạn dán đoạn function sau vào file functions.php nhé

Vị trí dán function
function add_block_header_top(){
	echo do_shortcode('[block id="banner-header"]');
}
add_action('flatsome_before_header','add_block_header_top');

Sau đó các bạn thêm 1 chút css là nó sẽ trở nên gọn hơn.

#wrapper>.section .col{
	padding:0
}

Như vậy là xong, tận hưởng kết quả nhé, chúc các bạn thành công.

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 *