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

11837 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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:

GiuseArt.com - Thêm icon image cho tiêu đề tab trong theme flatsome
GiuseArt.com – Thêm icon image cho tiêu đề tab trong theme flatsome
Giuseart.com---Thêm-icon-cho-tab-trong-theme-flatsome
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: //www.behance.net/giuselethien
+ Pintesest: //www.pinterest.com/giuselethien/pins

5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để 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 *