Hướng Dẫn Thêm Nhãn Nổi Bật Cho Menu Giao Diện Flatsome Cùng Sàn Giao Diện

Việc làm nổi bật menu với các nhãn (label) tùy chỉnh không chỉ giúp website của bạn trở nên thu hút hơn mà còn tăng khả năng điều hướng khách hàng đến các mục quan trọng. Với Sàn Giao Diện, bạn sẽ dễ dàng thực hiện điều này chỉ trong vài bước đơn giản.

1. Tại sao nên thêm nhãn vào menu?

Nhãn trên menu giúp:

  • Nhấn mạnh những mục cần thu hút sự chú ý, ví dụ như Sale, Hot, hoặc Mới.
  • Làm menu trở nên sinh động, tránh nhàm chán.
  • Tăng trải nghiệm người dùng khi truy cập website.

2. Hướng dẫn thêm nhãn cho menu Flatsome

Để chèn nhãn vào menu, hãy làm theo các bước sau:

Bước 1: Vào phần Menu trong quản trị WordPress.

  • Kiểm tra tùy chọn hiển thị CSS (góc phải trên cùng). Nếu chưa được kích hoạt, hãy tích vào như hình minh họa.

Bước 2: Chỉnh sửa menu con.

  • Thêm nhãn với cú pháp: label-[tên nhãn]. Ví dụ: label-new hoặc label-hot.

Bước 3: Lưu lại thay đổi.
Khi hoàn thành, nhãn sẽ hiển thị trên menu như mong muốn.

3. Tùy chỉnh nhãn theo ý thích

Để cá nhân hóa màu sắc và nội dung nhãn, bạn cần sử dụng một đoạn mã CSS. Thực hiện như sau:

Bước 1: Đăng nhập vào quản trị WordPress, vào Giao diện > Tùy biến.
Bước 2: Kéo xuống cuối trang và chọn CSS Bổ Sung (Additional CSS).
Bước 3: Thêm đoạn mã sau:

.label-purple.menu-item > a:after {
content: ‘Big Sale’; /* Tùy chỉnh nội dung nhãn */
display: inline-block;
font-size: 9px;
line-height: 9px;
text-transform: uppercase;
letter-spacing: -0.1px;
margin-left: 4px;
background-color: #572fbd; /* Mã màu nhãn */
font-weight: bolder;
border-radius: 2px;
color: #fff;
padding: 2px 3px 3px;
position: relative;
top: -2px;
}

Bạn có thể thay đổi:

  • content: để chỉnh sửa nội dung nhãn (Mới, Hot, Sale…).
  • background-color: để thay đổi màu sắc nhãn.

4. Lời khuyên từ Sàn Giao Diện

  • Đảm bảo sử dụng màu sắc và nội dung nhãn phù hợp với phong cách website của bạn.
  • Đừng quên kiểm tra hiển thị trên cả desktop và thiết bị di động để tối ưu trải nghiệm người dùng.

Sàn Giao Diện tự hào là đối tác thiết kế và cung cấp themes WordPress hàng đầu Việt Nam. Chúng tôi luôn sẵn sàng hỗ trợ bạn tạo nên những giao diện độc đáo và chuyên nghiệ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 *