AN NHIÊN xin 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? Tab có sẳn trong Flatsome và có thể custom nó với cá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 An Nhiên sẽ chia sẻ TAB đã 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
Để dễ hình dung hơn thì các bạn nhìn hình ở dưới đây nhé
CÓ THỂ BẠN QUAN TÂM
Các bài viết về theme Flatsome Wordpess
Lấy danh mục con trong danh mục sản phẩm wordpress
Cách tạo Full Aff từ Tiki , Aff từ Lazada , Aff từ Shopee
Tạo banner trượt cho web wordpress theme flatsome
Liên hệ đẹp cho theme Flatsome – Liên hệ Box 10
Tạo mục sản phẩm flatsome trong wordpress
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 khác sau này nhé
Như hình dưới đây mình đặt tên class tab là “tab-feedback”
Sau khi tạo tab và thêm 4 tab ( như hình ) thì các bạn sẽ 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 tên trướ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 bạn ghi theo ý muốn 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é !
Add hình vào tab bằng css:
Sau khi đã đặt tên class cho tab ta css cho từng tab 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ể đặt khác hoặc giống nhé )
wp-content/uploads/2022/03/tab1.jpg <= mình đang dùng để thay thế cho tab1, 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é )
Sau khi các bạn hoàn thành các bước trên thì upload và kiểm tra lại xem ok chưa nhé.
Dùng tab này làm Feedback cho các trang là quá hợp lý.
Cảm ơn các bạn đã đọc bài viết này! Chúc các bạn thành công.
