Cách Thêm Nhãn Menu Cá Nhân vào Website Sử Dụng Flatsome

Thêm nhãn vào mục menu là cách hiệu quả đối với các cửa hàng trực tuyến. Nhãn menu giúp khách hàng của bạn nhanh chóng nhận biết các sản phẩm đặc biệt của bạn. Nhãn menu tùy chỉnh là cách thông minh để thu hút khách hàng đến với 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 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ững nhãn menu đầ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. Bạn cũng có thể biết cách tạo một mega menu trên website trong chủ đề Flatsome.

Cách Thêm Nhãn Menu Tùy Chỉnh trong Chủ Đề Flatsome Bước Đơn Giản

Bước 1:

Từ thanh quản trị trên cùng, di chuột đến ‘Flatsome’ và nhấp vào ‘Nâng cao.’

Bước 2:

Trên trang ‘Tùy Chọn Nâng Cao của Flatsome’, nhấp vào tab ‘CSS Tùy Chỉnh’. Hầu hết các chủ đề WordPress thân thiện với di động hàng đầu đều có trường CSS tùy chỉnh.

Bước 3:

Bây giờ chúng ta cần thêm một đoạn mã CSS tùy chỉnh vào mục ‘Tất Cả Màn Hình’ trên tab ‘CSS Tùy Chỉnh’. Bạn cũng có thể dán mã CSS này vào tệp ‘style.css’ của chủ đề con của bạn. Nếu bạn không biết cách tạo chủ đề con WordPress, hãy xem một hướng dẫn khác.

********************************************************************************************
/** * Mã được đặt trong style.css của chủ đề con hoặc Nâng cao > CSS Tùy Chỉnh */
.label-purple.menu-item > a:after {

content: ‘Purple’; /* Thay đổi văn bả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 */

font-weight: bolder;

border-radius: 2px;

color: #fff;

padding: 2px 3px 3px;

position: relative;

top: -2px;

}
**********************************************************************************************
Bạn cần tùy chỉnh mã trong hai vị trí theo nhu cầu của bạn. Trong mã, viết tên nhãn của bạn trong giá trị ‘content’; thay thế ‘Purple’ trong dấu nháy đơn với tên bạn chọn. Tương tự, thay thế giá trị ‘màu nền’ với mã màu Hexa mà bạn chọn.

Bước 4:

Dán mã đã cho vào trường mã tùy chỉnh ‘Tất Cả Màn Hình’.

Bước 5:

Nhấp vào ‘Lưu Tất Cả Thay Đổi’ để lưu mã CSS tùy chỉnh của chúng ta trong Tùy Chọn Nâng Cao.

Bước 6:

Bây giờ trên bảng điều khiển, di chuột đến tùy chọn ‘Giao Diện’ và sau đó nhấp vào ‘Menus.’ Việc tạo và chỉnh sửa menu gần như giống nhau trong tất cả các chủ đề WordPress cao cấp tốt nhất để xây dựng một eStore tuyệt vời.

Bước 7:

Nhấp vào ‘Tùy Chọn Màn Hình’ ở góc trên bên trái.

Bước 8:

Đánh dấu vào ô ‘Lớp CSS’ để kích hoạ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 9:

Bây giờ nhấp vào mục menu mà 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 cho mục menu ‘Winter,’ như trong hình.

Bước 10:

Bây giờ, trong trường ‘Lớp CSS’ bên trong mục menu ‘Winter’, viết tên lớp của nhãn tùy chỉnh mà chúng tôi đã tạo trước đó. Đối với chúng tôi, tên lớp nhãn tùy chỉnh là ‘label-purple’.

Bước 11:

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ước 12:

Bây giờ truy cập trang web của bạn và di chuột đến menu. Bạn sẽ thấy nhãn tùy chỉnh của chúng tôi ‘Featured’ được hiển thị hoàn hảo bên cạnh mục menu ‘Winter’.

Kết Luận

Đây là cách bạn có thể tạo và thêm nhãn tùy chỉnh đẹp mắt, bắt mắt vào mục menu của mình trong chủ đề Flatsome. Chúng tôi đã cố gắng trình bày chi tiết để cho bạn thấy cách dễ dàng thêm nhãn menu tùy chỉnh mà không gặp nhiều khó khăn. Chúng tôi hy vọng hướng dẫn này hữu ích cho bạn. Hãy tiếp tục theo dõi WPCred để biết thêm nhiều hướng dẫn như thế này. Bạn cũng có thể xem hướng dẫn về cách tạo liên kết cuộn đến trong chủ đề Flatsome.