Thêm icon image vào tiêu đề Tab trong theme Flatsome

Đóng góp bởi: Lê Thiện 175 lượt xem Đăng ngày 25/04/2023

Chào các bạn, trong quá trình làm web trên theme Flatsome, hẳn là các bạn gặp nhiều trường hợp tạo Tab nhưng muốn chèn thêm icon cho Tab để tăng thêm sinh động cho website. Mặc định thì theme Flatsome hỗ trợ element “Tab” với tiêu đề tab là text cơ bản, hôm nay chúng ta sẽ thử thêm icon image vào tiêu đề cho Tab nhé!

Bài viết sưu tầm trên internet và được thực hiện trên theme Flatsome, các bạn dùng theme Flatsome thì làm theo các bước hướng dẫn đây là ok nhé!

Kết quả của bài hướng dẫn này sẽ được mô tả như hình sau:

Chèn icon vào tiêu đề tab trong theme Flatsome
Chèn icon vào tiêu đề tab trong theme Flatsome
Giuseart.com – Element Tab trong theme Flatsome sau khi custom
Giuseart.com – Element Tab trong theme Flatsome sau khi custom

Bước 1: Copy code vào function.php

Các bạn copy và paste toàn bộ code sau đây bỏ vào Giao diện – Sửa – Function.php

Bước 2: Copy phần trang trí CSS

Các bạn copy và paste toàn bộ đoạn code dưới đây bỏ vào Giao diện – Tùy biến – Style – Custom CSS

Bước 3: Hướng dẫn gọi Tab ra trong Ux builder

Để gọi Custom mới ra trong Ux builder, các bạn mở Ux builder – gõ tìm kiếm “Tab with Images” và chèn vào trang.

Giuseart.com---Chèn-image-vào-tab-trong-theme-flatsome
Giuseart.com – Chèn element “Tab with Images” trong Ux builder cực đơn giản

Trong Element “Tab with Image”, các bạn thực hiện setup như Tab thường, chỉ khác là giờ đây mỗi Tab sẽ có thêm ảnh icon trước và ảnh icon sau khi hover vào mục nhỏ trong Tab. Các bạn thêm ảnh vào và xem thành quả nhé!

Lời kết

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt.com trong suốt thời gian qua. Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website. Mọi nhu cầu thiết kế, in ấn và làm website, vui lòng liên hệ admin để được tư vấn nhiệt tình:

Thông tin liên hệ

+ Liên hệ: Lê Văn Thiện
+ Phone: 0972939830
+ Email: giuselethien@gmail.com
+ Website: www.giuseart.com
+ Flickr: www.flickr.com/photos/77493237@N07/albums
+ Behance: https://www.behance.net/giuselethien
+ Pintesest: https://www.pinterest.com/giuselethien/pins

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 *

Mẫu web mới đăng

Mời bạn xem một số mẫu web mới đăng của Toptheme.info | NinhBinhweb