CSS, Thủ thuật Ngày 26/02/2024 440 lượt xem

Cách làm banner top full width trong theme flatsome wordpress

Làm banner top full width trong giống mấy trang shop Điện tử hoặc trang thời trang tận dụng menu top để làm nổi bật , đẩy hàng…

Lê Anh Đông Lê Anh ĐôngFlatsome trên Google News

Cách làm banner top full width trong theme flatsome wordpress

Làm banner top full width trong giống mấy trang shop Điện tử hoặc trang thời trang tận dụng menu top để làm nổi bật , đẩy hàng đang SALE lên đó. Với theme Flatsome chúng ta cũng có thể làm được theo dạng 1 banner cố định hoặc dạng Siler để đẩy lên top nhé. Để xem cách làm vui lòng xem bài viết bên dưới nhé

Cách làm banner top full width trong theme flatsome wordpress

Sẳn có 1 bác hỏi trên Group Flatsome cách làm Banner top full Width nên mình viết bài hướng dẫn anh em luôn

Câu hỏi theo hình bên dưới nhé cho anh em dễ hình dung

Cách làm banner top full width trong theme flatsome wordpress
Cách làm banner top full width trong theme flatsome wordpress

Cách làm banner top full width

để làm như hình trình ta xem lại cách bố trí của Menu top trong flatsome

Banner Top Full Cach Lam Min
Cách làm banner top full width

menu top được chia 3 phần như hình trên ( gồm 1 ,2 ,3 như hình vẽ )

Để phân biệt MENU TOP và các menu khác ta có thể dùng class .header-top ( hoặc có thể dùng ID #top-bar nếu Class ko dùng được ) – bạn có thể đọc bài phân biệt ID và Class để hiểu thêm nhé

Class tương ừng với Các vị trí được đánh trên là

Mục tiêu của mình là Css vị trí 1 = Full Width , và Auto ẩn vị trí thứ 2 hoặc thứ 3 đi ( Nếu set vị trí 1 100% thì auto 2 vị trí kìa bị ẩn đi)

Code css để banner top full width

thêm 1 dòng html vào html1 như hình bên dưới

Banner Top Full Cach Lam 2 Min

 

kéo html1 lên top , mục tiếu mình là css cho html1 này full width nhé. Đơn giản là chỉ coppy và dán đoạn css bên dưới lưu lại là ổn liền

 

sau khi bạn thao tác đúng lưu lại sẽ có Demo như hình

Banner Top Full Cach Lam 2 Cach Lam 1 Min
Banner Top Full

Demmo trên mình đang làm là hình ảnh, bạn cũng có thể chèn block của flatsome vô để thao tác nhé.

Xem demo của tớ https://demo.flatsome.xyz/

Chúc bạn thành công nhé

Điểm 5/5 - ( Có 7 bình chọn)

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 *