Thay đổi nhãn giao diện flatsome cực đơn giản

Nhiều bạn vẫn đang tìm kiếm cách làm thế nào để thay đổi được màu mấy cái nhãn, hay thay đổi chữ trên nhãn ý cho nó thuần việt. Hôm nay mình đến để hỗ trợ các bạn đây. Nhiều khi bản thân bạn muốn đổi chữ New sang mới, rồi là đổi chữ popular sang phổ biến. Hoặc biến đổi tùy chỉnh theo ý thích của mình mà còn đang dò code, dò từng tí một luôn ấy. Mà vẫn không có ra. Chỉ cần search từ khóa chỉnh bubble text hoặc label trên flatsome rất có thể bạn đã nhanh chóng tìm được câu trả lời.

Vấn đề này tưởng chừng đơn giản nhưng nó cũng rất quan trọng nhé. Nếu như trên menu mà có những label cụ thể như này. Mình sẽ điều hướng khách hàng tốt hơn vào các mục mình cần nhấn mạnh hoặc gây chú ý. Sự nổi bật của nó khiến cho menu không trở nên nhàm chán nữa.

Chi tiết đoạn code ở phần dưới. Tuy nhiên, bạn cần chú ý là nhớ thay đổi mã màu và tên nhãn như chú thích mình có ghi trong đoạn code ý. Tránh tình trạng các bạn lại gặp vấn đề đó là. Tại sao em không đổi được màu. Tại sao em không đổi được tên…

Chèn label vào menu flatsome

Còn vấn đề các bạn mà chưa biết chèn code vào để menu hiển thị thì làm theo hướng dẫn sau:

Vào menu bạn cần chỉnh sửa. Kiểm tra phần tùy chọn hiển thị (góc phải trên cùng). Xem có phần CSS như hình dưới đây không. Nếu không thì tích vào nhé. Nhìn như hình

Tiếp theo thì vào từng phần menu con bạn điền nhãn vào là được. Nhìn như hình sau nhé.

Với cú pháp label-tên bạn đặt ở phía dưới. Như vậy là nó hiển thị ngon lành rồi.

Đây là cách đơn giản nhất để thay đổi màu nền và việt hóa nhãn:

Đoạn code chính

Phần này nhớ thêm vào custome CSS nhé.

Hướng dẫn luôn cho các bạn chưa biết. Đầu tiên, bạn đnăg nhập vào trang quản trị này, dò menu cột trái đến giao diện/tùy biến.

Nó chuyển trang và bạn kéo xuống gần cuối trang. Thấy chữ addition CSS. Thêm đoạn code phía dưới vào là xong.

Nhớ lưu lại và tận hưởng nhé.

/**
* Code goes in style.css of your child theme or Advanced > Custom CSS
*/
.label-purple.menu-item > a:after {
content: 'Purple'; /* Thay đổi tên nhãn, có thể là Big sale, hot, mới, hoặc bất cứ thứ gì mình muốn */
display: inline-block;
font-size: 9px;
line-height: 9px;
text-transform: uppercase;
letter-spacing: -0.1px;
margin-left: 4px;
background-color: #572fbd; /* thay đổi màu sắc - Copy mã màu nào bạn cần */
font-weight: bolder;
border-radius: 2px;
color: #fff;
padding: 2px 3px 3px;
position: relative;
top: -2px;
}

[related_posts_by_tax posts_per_page="6" title="Bài liên quan" taxonomies="category,post_tag"]