Giao diện riêng của một mục và kiểu của menu con

Ở bước Build Menu, bạn bấm vào một mục menu để mở bảng Edit item. Kéo xuống khối Style nếu bạn muốn chỉnh riêng màu chữ, icon, ảnh, nền, khung hoặc khoảng cách cho đúng mục này. Nếu mục đó có mục con bên trong, phần Submenu sẽ giúp bạn chỉnh riêng giao diện của bảng menu con mở ra từ nó.

Khi nào mục theo kiểu chung, khi nào có kiểu riêng?

Mặc định, mọi mục menu đều lấy theo kiểu chung của cả menu mà bạn đã đặt ở bước Design. Khi mục chưa có chỉnh sửa riêng nào, khối Style sẽ hiện dòng Follows the menu’s style. Mục chỉ có kiểu riêng khi bạn thêm và bật một cài đặt trong khối này.

Bước Design: kiểu chung của menu

Mục theo kiểu chung

Customize: ô riêng đè lên kiểu chung

Cách dùng khối Style:

Bấm nút Customize để thêm cài đặt bạn muốn chỉnh riêng. Bạn có thể gõ tìm trong ô Search a setting… hoặc chọn từ hai nhóm Common (hay dùng) và More (mở rộng).
Mỗi cài đặt đang có giá trị riêng sẽ hiện thành một thẻ trong khối Style kèm tóm tắt giá trị đó. Ở đầu khối cũng báo tổng số thẻ đã chỉnh, ví dụ “2 customized”.
Trên thẻ có ghi rõ mục đang kế thừa kiểu gốc từ đâu: từ Menu, Level 1 (cấp 1), Submenu (cấp 2–3) hoặc Default (mặc định). Nếu chưa rõ nguồn cụ thể, thẻ sẽ hiện Inherits menu style.
Muốn bỏ kiểu riêng của ô nào để quay về kiểu chung của menu, bạn bấm nút ✕ (Reset to inherit) trên thẻ đó.

‹ BackEdit item

ORUpload small image (as icon)jpg, png, svg, webp…

Basic info

TextLanguage Áo thun

Link to Auto-clean URLLanguage collections/ao-thun

Add dividerAdd badge

Sub text (optional)Language E.g. Free shipping over $50

Layout

Display layoutAUTOICON + TEXTTEXT ▸IMAGETEXT ONLY

Width layoutAutomatic

Style

Follows the menu's styleCustomizeKhối Style

Visibility

Showing under all conditionsEdit rules

Submenu

Advanced

Các cài đặt bạn có thể thêm từ nút Customize:

Nhóm	Cài đặt	Dùng để làm gì
Common	Text	Đổi màu chữ (Text color) và cỡ chữ (Text size) của mục
Common	Icon	Đổi màu (Icon color) và cỡ (Icon size) icon
Common	Icon background (nếu dùng ảnh thì hiện là Image frame)	Chỉnh hình nền, độ bo góc và khoảng trống quanh icon hoặc ảnh
Common	Background	Đặt màu nền hoặc ảnh nền cho cả mục
Common	Padding	Chỉnh khoảng trống bên trong mục
Common	Divider	Thêm đường kẻ ngăn cách dưới mục
Common	Badge	Gắn chấm nhãn hoặc hiện số lượng giỏ hàng
Common	Align	Căn lề trái, giữa hoặc phải
More	Icon background border & shadow	Thêm viền và bóng đổ cho nền icon
More	Inner box	Tạo khung riêng quanh phần chữ, có màu và viền riêng
More	Display layout, Width layout, Margin	Chỉnh bố cục và lề ngoài — xem Bố cục của một mục
More	Image ratio	Cắt ảnh theo tỉ lệ khung
More	Animation, Class names, CSS & attributes	Thêm hiệu ứng hoặc mã riêng — xem Hiệu ứng, class, CSS và thuộc tính
More	Submenu panel style	Chỉnh kiểu của bảng menu con (màu nền, ảnh nền, hiệu ứng), xem phần cuối bài

Cách cài Divider và Badge có hướng dẫn riêng tại bài Cột, đường kẻ và mục ghim và Icon, ảnh và nhãn.

Khối Style áp dụng cho cả 6 loại menu. Tuy nhiên, mỗi loại mục menu chỉ có một số cài đặt nhất định — bạn xem chi tiết tại bài Các loại mục menu.

Đổi màu chữ và cỡ chữ

Dùng khi bạn muốn làm nổi bật một mục cụ thể, ví dụ đổi chữ của mục Sale sang màu đỏ. Hai ô này nằm trong thẻ Text của khối Style.

Text color

Ở đâu: Build Menu → bấm mục → Edit item → khối Style → Customize → Text → ô Text color.
Dùng để làm gì: đổi màu chữ của riêng mục này, đè lên màu chữ chung của menu.
Giá trị: chọn trên bảng màu hoặc nhập mã dạng #RRGGBB. Với menu mới, ô để trống (hiện Inherit) nên mục lấy màu chung của menu.
Áp cho: cả 6 loại menu, mọi cấp. Loại mục: Icon + image + text, Big image + text, Group title, Tab và Card. Không có ở Line, Blank space, Image banner và Custom HTML. Không cần gói đặc biệt.
Khách thấy gì: chữ của đúng mục này đổi màu, các mục khác giữ nguyên. Muốn quay về màu chung, bấm ✕ (Reset to inherit) trên thẻ.

Text size (px)

Ở đâu: cùng thẻ Text, ô Text size (px) nằm cạnh Text color.
Dùng để làm gì: đặt cỡ chữ riêng cho mục này.
Giá trị: chỉ nhập số, đơn vị là px (ví dụ 16). Để trống (Inherit) thì mục lấy cỡ chữ chung của menu.
Áp cho: giống Text color — 6 loại menu, mọi cấp, các loại mục có chữ (Icon + image + text, Big image + text, Group title, Tab, Card). Không cần gói đặc biệt.
Khách thấy gì: chữ của mục này to hoặc nhỏ hơn các mục xung quanh. Nếu mục có icon, hãy kiểm tra lại cỡ icon (Icon size) cho cân với chữ.

Mục dạng Line và Blank space không có phần này.

Đổi màu và cỡ icon

Hai ô này nằm trong thẻ Icon của khối Style. Phần này không có ở mục dạng Group title. Để chọn icon hoặc tải ảnh lên cho mục, bạn xem bài Icon, ảnh và nhãn.

Icon color

Ở đâu: Build Menu → bấm mục → Edit item → khối Style → Customize → Icon → ô Icon color.
Dùng để làm gì: đổi màu icon của riêng mục này.
Giá trị: chọn trên bảng màu hoặc nhập #RRGGBB. Để trống (Inherit) thì icon lấy màu chung của menu — đó cũng là giá trị của menu mới.
Áp cho: cả 6 loại menu, mọi cấp. Loại mục: Icon + image + text, Tab và Card. Không có ở Big image + text, Group title, Line, Blank space và Image banner. Không cần gói đặc biệt.
Khách thấy gì: icon của đúng mục này đổi màu; chữ không đổi (chữ chỉnh ở Text color).

Icon size (px)

Ở đâu: cùng thẻ Icon, ô Icon size (px).
Dùng để làm gì: đặt cỡ riêng cho icon hoặc ảnh nhỏ của mục này.
Giá trị: nhập số theo px. Để trống (Inherit) thì mục lấy cỡ icon chung của menu.
Áp cho: cùng nhóm với Icon color — 6 loại menu, mọi cấp, các loại mục Icon + image + text, Tab và Card. Không cần gói đặc biệt.
Khách thấy gì: icon (hoặc ảnh nhỏ) của mục này to hơn hoặc nhỏ hơn các mục khác.

Cắt ảnh theo tỉ lệ

Ô Image ratio giúp bạn cắt khung ảnh ngay trong menu mà không cần sửa rồi tải ảnh lên lại.

Image ratio

Ở đâu: Build Menu → bấm mục → Edit item → khối Style → Customize → nhóm More → Image ratio. Ô hiện thành một hàng 5 hình nhỏ để bạn bấm chọn.
Dùng để làm gì: tự cắt ảnh lớn hoặc banner của riêng mục này theo một tỉ lệ khung cố định.
Lựa chọn: Inherit (theo menu, là giá trị của menu mới), Unchanged (giữ nguyên tỉ lệ ảnh gốc), 3:2 (ngang), 2:3 (đứng), 1:1 (vuông).
Áp cho: cả 6 loại menu, mọi cấp. Chỉ có ở mục dạng Big image + text và Image banner. Không cần gói đặc biệt.
Khách thấy gì: ảnh được cắt bằng cách phóng vừa khung (phần thừa bị cắt, ảnh không méo) và rộng hết ô chứa nó. Chọn Unchanged thì ảnh giữ đúng tỉ lệ gốc. Việc cắt chỉ diễn ra khi hiển thị, file ảnh của bạn không bị sửa.

Tạo khung nền cho icon hoặc ảnh

Khi muốn đặt icon hoặc ảnh nằm trong một ô tròn hay ô bo góc, bạn dùng nhóm Outer box — trong khối Style sẽ hiện tên là Icon background với icon, hoặc Image frame với ảnh.

Nhóm này có ở mục dạng Icon + image + text, Big image + text và Card, gồm các ô:

Ô	Mặc định
Background color	Để trống
Padding (px)	0
Border color	Để trống
Border size	1
Corner radius (px)	0
Shadow	Not used (các mức bóng đổ khác: Light, Medium, Strong)

Chỉnh nền mục và khung chữ

Background (trên giao diện cũ gọi là Outer) đặt nền cho cả mục. Riêng ở mục dạng Card, ô này được đưa thẳng lên đầu bảng vì nền chính là thân thẻ. Hai ô nền nằm trong thẻ Background của khối Style.

Background color

Ở đâu: Build Menu → bấm mục → Edit item → khối Style → Customize → Background → ô Background color.
Dùng để làm gì: tô màu nền phía sau cả mục (cả vùng icon, chữ và khoảng trống quanh chúng).
Giá trị: chọn trên bảng màu hoặc nhập #RRGGBB. Menu mới để trống, nên mục không có nền riêng.
Áp cho: cả 6 loại menu, mọi cấp. Loại mục: Icon + image + text, Group title, Blank space, Big image + text, Tab và Card. Không có ở Line, Image banner và Custom HTML. Không cần gói đặc biệt.
Khách thấy gì: một mảng màu hiện sau mục. Ở Card, nếu bạn để trống và thẻ chưa có ảnh thì thẻ có nền xám nhạt mờ mặc định; khi thẻ đã có ảnh, ảnh đứng một mình, không phủ thêm lớp màu nền xám đó.
Đi cùng: nếu bạn cũng đặt Background image, màu này còn là màu pha khi bạn giảm độ mờ của ảnh.

Background image

Ở đâu: cùng thẻ Background, ô Background image. Bạn dán đường dẫn ảnh hoặc bấm Select để chọn từ thư viện; bấm ✕ cạnh ô để xoá ảnh.
Dùng để làm gì: đặt ảnh nền sau cả mục. Ở mục dạng Card, đây chính là ảnh của thẻ.
Giá trị: để trống cho menu mới. Khi có ảnh, ô Background Image opacity (%) hiện ra để bạn chỉnh độ mờ.
Áp cho: giống Background color — 6 loại menu, mọi cấp, các loại mục Icon + image + text, Group title, Blank space, Big image + text, Tab và Card. Không cần gói đặc biệt.
Khách thấy gì: ảnh được phóng phủ kín nền của mục. Độ mờ 100% là ảnh hiện đầy đủ; số thấp hơn thì ảnh nhạt dần về màu nền (màu của ô Background color, hoặc màu nền chung của menu nếu ô đó để trống).
Mẹo: chọn ảnh có vùng chữ đủ tối hoặc đủ sáng; nếu chữ khó đọc, giảm độ mờ của ảnh hoặc đổi Text color.

Inner box (trên giao diện cũ gọi là Inner) tạo một khung bao quanh phần chữ với các ô chỉnh màu nền Background color, khoảng trống Padding (px) (mặc định 0), màu viền Border color, độ dày viền Border size (mặc định 1), độ bo góc Corner radius (px) (mặc định 0) và bóng đổ Shadow.

Phần Inner box chỉ có ở mục dạng Icon + image + text, Big image + text và Card. Với mục dạng Blank space thì chỉ có Background.

Khoảng trống bên trong mục

Padding (px)

Ở đâu: Build Menu → bấm mục → Edit item → khối Style → Customize → Padding. Bấm vào ô sẽ mở bảng chỉnh bốn cạnh.
Dùng để làm gì: chừa khoảng trống bên trong mục, giữa mép mục và nội dung (icon, chữ).
Giá trị: gõ một số cho cả bốn cạnh (12), hai số cho trên-dưới và trái-phải (12 20), ba hoặc bốn số theo thứ tự trên, phải, dưới, trái. Chỉ cần gõ số, đơn vị là px. Muốn mobile và desktop khác nhau, bảng chỉnh có ô Same as mobile; bỏ chọn rồi nhập riêng cho Desktop. Giá trị lưu dạng mobile|desktop, ví dụ 8|16. Menu mới để trống, ô gợi ý Default: 0.
Áp cho: cả 6 loại menu, mọi cấp, mọi loại mục có hiện ra trên menu. Không cần gói đặc biệt.
Khách thấy gì: nội dung của mục lùi vào trong, mục trông to và thoáng hơn. Nếu bạn dùng đường kẻ kiểu Inset hay Under text (xem Đường kẻ), đường kẻ lùi theo đúng padding trái-phải của mục. Với mục cấp 1 có menu con kiểu thả xuống, padding hoặc margin phía trên khiến mũi tên và bảng con dịch theo, nên mục nhô lên khỏi thanh vẫn dính với bảng con của nó.
Khác với: padding của khung quanh icon (xem Tạo khung nền cho icon hoặc ảnh) và padding của Inner box, hai ô đó chỉ chừa chỗ quanh icon hoặc quanh chữ.

Copy kiểu từ mục này sang mục khác

Khi muốn nhiều mục có cùng kiểu trang trí riêng mà không phải chỉnh lại từng ô, bạn bấm nút … (More actions) ở góc đầu khối Style:

Mở mục đã chỉnh xong, chọn Copy style. App sẽ báo Style copied.
Mở một mục khác cùng loại, chọn Paste style. App sẽ báo Style pasted.
Bấm Save để lưu lại. Thao tác dán mới chỉ điền thông số vào bảng chứ chưa tự lưu.

Một vài điểm cần biết khi copy và dán kiểu:

Bạn chỉ dán được giữa hai mục cùng loại. Nếu dán sang mục khác loại, app sẽ báo Cannot paste: item kind is different.
Ô nào đang để trống ở mục gốc (tức là đang theo kiểu chung của menu) sẽ không làm mất kiểu riêng sẵn có ở mục được dán.
Toàn bộ màu sắc, kích thước, nền, khung, bố cục, animation, class và CSS của mục gốc đều được copy sang.

Đổi giao diện bảng menu con của một mục

Phần Submenu (hoặc Submenu panel style trong nút Customize) dùng để chỉnh riêng bảng menu con hiện ra khi khách chạm vào mục này. Phần này chỉ xuất hiện khi mục đó có mục con bên trong.

Khi nào nên dùng: khi bạn muốn mỗi tab hoặc mỗi mục cha mở ra một bảng menu con có giao diện khác nhau, ví dụ đặt ảnh nền riêng cho mục Nam và mục Nữ.
Loại menu hỗ trợ: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Không có ở Icon Menu.
Loại mục hỗ trợ: Icon + image + text và Big image + text. Không có ở Group title, Tab, Banner, Card, Custom HTML, Blank space và Line.
Cả ba ô dưới đây cũng áp cho bảng nhiều cột (Multi-column layout), không chỉ bảng thường.
Nếu muốn đổi kiểu chung cho tất cả bảng menu con cùng lúc, bạn chỉnh ở bước Design — xem bài Chỉnh kiểu menu con.

Background color (bảng menu con)

Ở đâu: Build Menu → bấm mục cha → Edit item → khối Style → Customize → Submenu panel style (hoặc phần Submenu) → Background → ô Background color.
Dùng để làm gì: đổi màu nền của bảng menu con mà mục này mở ra, chỉ cho bảng của mục này.
Giá trị: chọn trên bảng màu hoặc nhập #RRGGBB. Menu mới để trống (Inherit), bảng con lấy màu nền chung của menu con đặt ở bước Design.
Áp cho: 5 loại menu kể trên, chỉ khi mục có mục con. Không cần gói đặc biệt.
Khách thấy gì: bảng con của mục này có màu riêng, bảng của các mục khác giữ màu chung. Với kiểu thả xuống (Dropdown), mũi tên nhọn trên bảng con cũng đổi theo màu này nên không bị lệch màu.
Lưu ý: nếu đồng thời đặt ảnh nền thì mũi tên vẫn chỉ lấy màu, không thể cắt theo ảnh.

Background image (bảng menu con)

Ở đâu: cùng thẻ Background của phần Submenu, ô Background image: dán đường dẫn ảnh hoặc bấm Select, bấm ✕ để xoá.
Dùng để làm gì: đặt ảnh nền cho bảng menu con của mục này.
Giá trị: để trống cho menu mới. Khi có ảnh, ô độ mờ hiện ra để bạn chỉnh.
Áp cho: giống ô màu nền ở trên — 5 loại menu, mục có mục con, loại mục Icon + image + text và Big image + text. Không cần gói đặc biệt.
Khách thấy gì: ảnh phủ kín nền bảng con. Giảm độ mờ thì ảnh nhạt dần về màu nền của bảng con (ô màu bên trên, hoặc màu chung của menu con nếu để trống), giúp chữ dễ đọc hơn.

Animation

Ở đâu: phần Submenu → thẻ Animation → ô Animation, bên cạnh có liên kết Demo mở trang xem thử các hiệu ứng.
Dùng để làm gì: chọn hiệu ứng chạy khi bảng menu con của mục này mở ra.
Giá trị: danh sách hiệu ứng chia theo nhóm, nhóm Popular đứng đầu (bounce, flash, pulse, tada…). Menu mới để Inherit, tức không đặt hiệu ứng riêng, bảng con dùng hiệu ứng chung của menu.
Áp cho: 5 loại menu kể trên, chỉ khi mục có mục con. Loại mục Icon + image + text và Big image + text. Không cần gói đặc biệt.
Khách thấy gì: mỗi lần bảng con của mục này mở ra thì chạy hiệu ứng bạn chọn. Đây là hiệu ứng của bảng con, khác với Animation của chính mục (xem Hiệu ứng, class, CSS và thuộc tính).