Việc thêm nhãn menu có hiệu quả đối với các cửa hàng trực tuyến. Các nhãn menu cho phép khách hàng của bạn nhanh chóng được công nhận về các mặt hàng đặc biệt của bạn. Nhãn menu tùy chỉnh là một cách thông minh để thu hút khách hàng của bạn đến các sản phẩm nổi bật. Chúng tôi sẽ hướng dẫn bạn từng bước về cách bạn có thể tạo và thêm nhãn menu tùy chỉnh vào các mục menu. Bạn sẽ có thể tạo nhãn thực đơn đầy màu sắc và bắt mắt cho khách hàng của mình sau khi hoàn thành hướng dẫn này. Trong bài viết này, chúng tôi sẽ hướng dẫn cụ thể ở theme Flatsome, hãy cùng xem chi tiết hướng dẫn.
Hướng dẫn chi tiết thêm nhãn menu website sử dụng theme wordpress
Bước 1: Các bạn truy cập vào đường dẫn như ảnh bên dưới để thêm CSS cho nhãn menu.
Nếu bạn sử dụng 1 theme WordPress khác không phải là Flatsome thì hãy vào đường dẫn Giao diện > Theme File Editor > style.css để thêm mã CSS nhãn menu.
Bước 2:
Bạn cần tùy chỉnh mã ở hai nơi theo nhu cầu của bạn. Bên trong mã, viết tên nhãn của bạn vào giá trị ‘nội dung’; thay thế ‘HOT’ bên trong ” (dấu nháy đơn) bằng tên bạn chọn. Tương tự, thay thế giá trị ‘background-color’ bằng mã màu Hexa mà bạn muốn. Sau đó nhấn lưu thay đổi cập nhật.
.label-hot.menu-item > a:after {
content: "HOT"; /* Thay đổi chữ hiển thị */
display: inline-block;
font-size: 9px;
line-height: 9px;
text-transform: uppercase;
letter-spacing: -0.1px;
margin-left: 4px;
background-color: #f63f52; /* Thay đổi màu sắc */
font-weight: bolder;
border-radius: 2px;
color: #fff;
padding: 2px 3px 3px;
position: relative;
top: -2px;
}
Bước 3: Theo đường dẫn Giao diện > Menu. Nhấp vào ‘Tùy chọn hiển thị’ ở góc trên cùng bên trái. Chọn Lớp CSS để bật CSS tùy chỉnh cho các mục menu. Sau đó nhấp vào ‘Lưu Menu‘ để lưu cài đặt menu.
Bước 4: Bây giờ hãy nhấp vào mục menu bạn muốn hiển thị nhãn tùy chỉnh. Ví dụ: chúng tôi sẽ thêm nhãn tùy chỉnh vào mục menu ‘Phần mềm’, như trong hình. Bây giờ, trong trường Lớp CSS bên trong mục menu ‘Phần mềm’ , hãy viết tên lớp của nhãn tùy chỉnh mà chúng ta đã tạo trước đó. Đối với chúng tôi, tên CSS nhãn tùy chỉnh là ‘label-hot’
Bước 5: Viết tên lớp CSS tùy chỉnh như trong hình và nhấp vào ‘Lưu Menu’ để lưu cài đặt của bạn.
Bây giờ hãy truy cập lại trang web của bạn. Bạn sẽ thấy rằng nhãn tùy chỉnh ‘HOT’ của chúng tôi được hiển thị hoàn hảo bên cạnh mục menu “Phần mềm”.
Đây là cách bạn có thể tạo và thêm các nhãn menu tùy chỉnh đẹp, bắt mắt vào mục menu của mình trong chủ đề Flatsome .