CSS, Thủ thuật Ngày 10/03/2022 7120 lượt xem

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

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…

Lê Anh ĐôngFlatsome trên Google News

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

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

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

Có Nhận xét cho "Cách dùng hình trong Tab trong Flatsome"

  1. Pingback: Hiện thị mô tả acf cho danh mục categories blog - FLATSOME - FREE EVERY THING

  2. Pingback: Hiển thị số lượng sản phẩm đã bán trong Woocommerce wordpress - FLATSOME - FREE EVERY THING

  3. Pingback: Cách dùng hình trong Tab trong Flatsome - FLATSOME - FREE EVERY THING

Để lại một bình luận

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 *

Các dịch vụ của FLATSOME.XYZ