Monday, June 24, 2024

Cách dùng hình trong Tab trong Flatsome (phần 1)

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ách dùng hình trong Tab trong Flatsome
Cách dùng hình trong Tab trong Flatsome

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

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

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é !

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

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:

/*Hình cho tab*/
.tab-feedback ul li:nth-child(4).tab,.tab-feedback ul li:nth-child(3).tab,.tab-feedback ul li:nth-child(2).tab,.tab-feedback ul li:nth-child(1).tab
padding: 5px;
.tab-feedback .tab span
display: none;
.tab-feedback .tab-panels
order: 0;
.tab-feedback.tabbed-content .nav
order: 2;
.tab-feedback ul li:nth-child(1).tab a:before
content: ” “;
display: block;
height: 25px;
background: url(wp-content/uploads/2022/03/tab1.jpg) center center no-repeat;
background-size: contain;
width: 168px;
height: 100px;
text-align:center;
.tab-feedback ul li:nth-child(2).tab a:before
content: ” “;
display: block;
height: 25px;
background: url(wp-content/uploads/2022/03/tab2.jpg) center center no-repeat;
background-size: contain;
width: 168px;
height: 100px;
text-align:center;
.tab-feedback ul li:nth-child(3).tab a:before
content: ” “;
display: block;
height: 25px;
background: url(wp-content/uploads/2022/03/tab3-1.jpg) center center no-repeat;
background-size: contain;
width: 168px;
height: 100px;
text-align:center;
.tab-feedback ul li:nth-child(4).tab a:before
content: ” “;
display: block;
height: 25px;
background: url(/wp-content/uploads/2022/03/tab4-1.jpg) center center no-repeat;
background-size: contain;
width: 168px;
height: 100px;
text-align:center;
.tabbed-content li a:before
opacity: 1 !important;

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.

4.7/5 - (3 votes)
46,788FansLike

Bài Viết Mới