Cách dùng hình trong Tab trong Flatsome

flatsome
10/03/22
0

Chào các bạn , có một số bạn hỏi làm cách nào để thay thế hình cho 1 tab cụ thể nào đó trong Flatsome ?
theo mình biết tab có sẳn trong Flatsome và có thể custom nó với cá dạng mong muốn và có thể làm được 100% không cần phải thêm Pugin nào nữa nên hôm nay tớ sẽ chia sẽ TAB tớ đã làm trong 1 dự án mới đây Cách dùng hình trong Tab trong Flatsome

Cách dùng hình trong Tab trong Flatsome

để bạn dễ hình dung mới bạn xem demo mình đã làm nhé (  Link demo ở SIdebar bạn có thể tham khảo )

Cách dùng hình trong Tab trong Flatsome
Cách dùng hình trong Tab trong Flatsome

 

Cách thêm tab trong Flatsome

bạn tạo 1 table và cho Tab vào bên trong đặt class cho Tab đó để khi mình Css cho tab không bị ảnh hưởng css đến những tab sau này mình dùng nhé

như hình mình đặt tên class tab là “tab-feedback

Cách dùng hình trong Tab trong Flatsome
Cách dùng hình trong Tab trong Flatsome

sau khi mình tạo tab và thêm 4 tab ( như hình ) ta có css của từng tab sẽ là

.tab-feedback ul li:nth-child(1).tab – > .tab-feedback ul li:nth-child(2).tab  -> .tab-feedback ul li:nth-child(3).tab

  • trong đó .tab-feedback <= class mình đã đặt rước đó
  • nth-child(1).tab <= số (1) là vị trí tab đứng tính từ trái qua phải

Text trên mỗi tab đánh gì cũng được nhé – mình sẽ ẩn đi trong css bằng code

.tab-feedback .tab span {
display: none;
}

nên sẽ không hiện thị ra bên ngoài nhé !

Cách dùng hình trong Tab trong Flatsome
Cách dùng hình trong Tab trong Flatsome

Cách add hình vô tab bằng css

sau khi đặt tên class cho tab ta css cho từng ta theo bảng css sau

Giải thích 1 tý về code css này :

.tab-feedback là cass mình đã đặt cho tab nhé – class bạn có thể khác hoặc trùng với mình thì tùy

wp-content/uploads/2022/03/tab1.jpg <= mình đang dùng để thay thế cho tab 1 bạn có thể úp hình khác và change lại url này nhé

.tab-feedback .tab-panels { order: 0; và .tab-feedback.tabbed-content .nav { order: 2; <= đổi vị trí tab từ bên trên = > xuống bên dưới ( nếu bạn bỏ 2 dòng code này thì tab mặc định là bên trên nhé )

OK sau khi thêm css và lưu lại thì quay lại xem đã ok chưa nhé 🙂

Tab này làm cho Feedback trong các trang quá đẹp đúng ko bạn

nếu bạn làm không được hoặc có ý kiến gì liên hệ tớ nhé – Chúc bạn thành công

 

theo :https://flatsome.xyz/cach-dung-hinh-trong-tab-trong-flatsome.html