English Tiếng Việt
Xem demo Bắt đầu
Giao diện menu

Đổi màu menu cho hợp thương hiệu (bảng màu)

Thẻ Palette giúp bạn đổi cùng lúc toàn bộ màu nền, chữ, icon, đường kẻ và nhãn của menu theo màu thương hiệu hoặc bộ màu phối sẵn, không cần ngồi chỉnh từng ô một.

Chuẩn bị trước khi đổi màu

  • Bạn đã tạo sẵn một menu trong Navi+. Nếu chưa có, hãy xem bài Menu đầu tiên trong 5 phút.
  • Chuẩn bị mã màu thương hiệu của shop, ví dụ #1F6FEB. Nếu chưa có mã màu, bạn vẫn chọn được các bộ màu phối sẵn.
  • Palette chỉ đổi màu sắc, không làm thay đổi nội dung chữ, cỡ chữ, khoảng cách hay thêm xoá mục menu.

Cách đổi màu bằng Palette

  1. Mở menu bạn muốn đổi màu, chuyển sang bước Design trên thanh bước dọc bên trái. Thẻ Palette nằm ngay đầu tiên và đã được mở sẵn cho bạn.

  2. Nếu muốn phối màu theo màu thương hiệu: dán mã màu vào ô Your primary color rồi bấm Generate. Ngay bên dưới, mục Colors matching your primary color sẽ hiện ra các bộ màu sáng, tối, trung tính và chuyển sắc cùng tông với màu bạn vừa nhập.

  3. Nếu muốn dùng bộ màu phối sẵn: kéo xuống mục Or reference these ready-made palettes. Các bộ màu được chia theo phong cách: Light, Dark, Gradient, Neon / Cyberpunk, Glassmorphism, Minimal, Neumorphism và Monochrome. Mỗi nhóm hiện sẵn vài mẫu, bạn bấm mũi tên nhỏ cạnh tên nhóm để xem thêm.

  4. Bấm vào một thẻ màu bất kỳ để thử. Khung xem trước bên phải sẽ đổi màu ngay lập tức. Chưa ưng ý thì bạn cứ bấm thử thẻ khác.

  5. Khi đã chọn được màu ưng ý, bấm Save ở thanh trên cùng để lưu lại. Sau đó, bạn hãy mở trang web thật để kiểm tra màu menu trên nền web của shop.

Lưu ý

Màu trong khung xem trước của app có thể nhìn hơi khác so với ngoài web thật, vì giao diện shop của bạn có màu nền riêng. Sau khi lưu, bạn nhớ mở trang web thật để kiểm tra lại.

Cách quay lại màu cũ khi bấm nhầm

Mỗi khi bạn bấm chọn một thẻ màu, thanh thông báo Palette applied sẽ hiện ra trong vài giây kèm hai nút:

  • Undo — lùi lại ngay màu trước lần bấm vừa rồi.
  • Reset to original — trả menu về bộ màu lúc bạn mới mở thẻ Palette lần đầu tiên. Dù bạn vừa bấm thử cả chục thẻ màu liên tiếp, nút này vẫn đưa menu về thẳng màu gốc ban đầu chứ không phải màu ngay trước đó.

Nếu thanh thông báo đã tắt, bạn có thể kéo xuống cuối thẻ Palette và bấm dòng Reset to original để về lại màu gốc.

Kết hợp Palette với chỉnh từng ô màu

Palette không lưu màu ở một chỗ riêng. Mỗi lần bạn bấm một thẻ màu, app sẽ tự động điền mã màu vào hàng chục ô màu trong hai thẻ Main menu và Sub menu.

  • Sau khi chọn Palette, bạn vẫn qua các thẻ kia để sửa lại từng ô màu theo ý thích. Màu bạn tự sửa sẽ giữ nguyên cho tới khi bạn bấm sang một thẻ Palette khác.
  • Bạn nên chọn Palette trước rồi mới chỉnh từng ô màu sau. Nếu làm ngược lại, lần bấm Palette tiếp theo sẽ ghi đè lên các màu bạn vừa kỳ công chỉnh.
  • Nếu có mục menu nào đang cài màu riêng trong phần sửa mục, Palette cũng đổi luôn màu của mục đó cho đồng bộ với tông mới. Các cài đặt khác ngoài màu sắc vẫn giữ nguyên.

Nếu muốn tự chỉnh từng thành phần, bạn xem thêm bài Chỉnh kiểu menu chính và Chỉnh kiểu menu con.

Câu hỏi thường gặp khi đổi màu

Tôi tự chỉnh màu xong, bấm thử một thẻ Palette thì mất hết màu vừa chỉnh?

Mỗi khi bấm thẻ Palette, app sẽ điền lại toàn bộ các ô màu, đè lên cả những ô bạn vừa tự chỉnh. Bạn hãy bấm ngay nút Undo trên thanh thông báo để lấy lại màu cũ. Lần sau, bạn nhớ chọn xong Palette ưng ý rồi mới chỉnh chi tiết từng ô.

Các bộ màu có sẵn không có đúng màu thương hiệu của shop tôi?

Các mẫu có sẵn dùng tông màu cố định. Để phối theo đúng màu của shop, bạn hãy dán mã màu thương hiệu vào ô Your primary color ở trên cùng rồi bấm Generate.

Sao chọn bộ Neon hoặc Glassmorphism xong lại thấy có đoạn mã lạ trong Custom CSS?

Các hiệu ứng viền phát sáng hay mặt kính mờ cần thêm mã giao diện nên app tự động chèn một đoạn ngắn vào ô Custom CSS của menu, kèm dòng ghi chú NAVI_PALETTE_EFFECT … do not edit manually. Bạn cứ để nguyên đoạn mã này. Khi bạn đổi sang bộ màu khác, Navi+ sẽ tự động cập nhật hoặc xoá đi. Để xem vị trí ô Custom CSS, bạn mở bài CSS riêng, class dùng lại và font chữ.

Tôi chỉ bấm Palette mà màu riêng của một mục menu cũng bị đổi theo?

Đúng vậy. Nếu một mục menu đang cài màu chữ, icon, nền hoặc đường kẻ riêng, Palette sẽ tự đổi các màu đó theo tông mới để mục không bị lệch màu so với cả menu.

Sao tôi bấm vào thẻ màu mà khung xem trước không đổi?

Khung xem trước cần khoảng một giây để tải lại màu mới sau mỗi lần bấm. Nếu đợi một lúc vẫn chưa thấy đổi, bạn hãy tải lại trang trình duyệt rồi thử lại.

Nền tảng khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.

Bài liên quan

Bài này có giúp ích không?

Cần người xem cùng? Chat với chúng tôi trong app hoặc viết về [email protected] — gửi kèm địa chỉ cửa hàng và tên menu.