Cách chèn hình ảnh vào tiêu đề trong tabs trong flatsome

Chào các bạn, tình cờ trong 1 lần va chạm sự đời là mình muốn chèn 1 hình ảnh thay cho 1 tiêu đề của 1 tabs thì mình có tìm hiểu 1 số plugin nhưng đa phần đều cho kết quả như không mong muốn, có cái thì chỉ cho chèn icon, có cái thì tính phí…Và rồi thì mình cũng đã tìm được giải pháp cho chính mình đó là dùng HTML và CSS để tạo 1 tabs và sử dụng. Và nhân thời gian thất nghiệp mình quyết định chia sẻ cho anh/em nào chưa biết cách để chèn hình ảnh vào tiêu đề trong tabs.

Ở đây mình không có dài dòng giải thích lại nó là như thế nào? Tại sao lại dùng như vậy nha, đây chỉ là 1 bài Blog chia sẻ nên mọi người cứ ráp vào và dùng. Các bước mình thực hiện.

Bước 1: Chèn đoạn mã HTML vào nơi mà mình cần tạo tabs. Mỗi tabs mình tạo cho nó 1 class riêng dùng để chèn hình riệng biệt vào đó. Class .thuonghieu1 tương ứng với nội dung của ID #tab_tab-1

Bước 2: Các bạn sử dụng đoạn CSS sau đây và chèn vào nơi chứa được CSS. Nhớ thay đổi lại link hình ảnh nha.

Bước 3: Chèn phần nội dung vào trong đoạn các đoạn tương ứng với tabs. Ở đây thì mình tạo nội dung bằng cách sử dụng UX Blocks trong Flatsome sau đó mình lấy Shortcode dán vào. Vậy là đã hoàn thành cách để chèn hình ảnh vào tiêu đề trong tabs

Đó là cách mình làm, còn nếu các bạn muốn đẹp hơn thì có thể CSS thêm vào cho nó hoặc có cách hay hơn thì có thể bình luận ở phía dưới để mọi người cùng tham khảo nhé.

LINK DEMO: https://thietkeweb24h.top/test/

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 *