Các phương pháp hay nhất để thiết kế bộ chọn ngôn ngữ

Một màn hình máy tính mờ với văn bản màu trắng trên nền đen. Hình ảnh xuất hiện bị nhòe.
Mục lục

Bộ chọn ngôn ngữ là một yếu tố quan trọng mà bạn nên chú ý khi tạo một trang web đa ngôn ngữ vì bộ chuyển đổi ngôn ngữ là điều mà người dùng thường truy cập khi họ muốn chuyển ngôn ngữ.

Một nút chuyển đổi ngôn ngữ hiệu quả có thể mang lại nhiều lợi ích cho trang web, từ việc tăng cường tối ưu hóa web đến tăng doanh số bán hàng.

Trong bài viết này, chúng tôi sẽ thảo luận về các phương pháp hay nhất để thiết kế bộ chọn ngôn ngữ. Hãy thảo luận thêm về vấn đề này trong bài viết sau.

Những điểm chính: Các phương pháp tốt nhất để thiết kế bộ chọn ngôn ngữ

1
Vị trí chiến lược tối ưu hóa việc sử dụng

Vị trí đặt menu ở đầu trang/trên máy tính và menu hamburger/trên thiết bị di động đảm bảo khả năng truy cập mà không làm gián đoạn trải nghiệm người dùng hoặc tốc độ tải trang.

2
Tự động phát hiện thông minh với chức năng ghi đè

Tự động phát hiện ngôn ngữ trình duyệt nhưng luôn cung cấp tùy chọn ghi đè thủ công dễ dàng và ghi nhớ tùy chọn người dùng thông qua cookie.

3
SEO và khả năng truy cập là yếu tố thiết yếu

Triển khai thẻ hreflang, nhãn ARIA cho trình đọc màn hình, thiết kế thân thiện với cảm ứng và phương án dự phòng không dùng JavaScript cho trình thu thập thông tin.

Bộ chọn ngôn ngữ là gì?

Học sinh học trên thiết bị với giáo viên hướng dẫn

Bộ chọn ngôn ngữ là một phần tử giao diện người dùng hoặc tính năng cho phép người dùng chọn ngôn ngữ mà họ muốn tương tác với trang web, ứng dụng hoặc bất kỳ nền tảng kỹ thuật số nào. Nó thường được tìm thấy trên các trang web, ứng dụng phần mềm và các giao diện kỹ thuật số khác để phù hợp với người dùng nói các ngôn ngữ khác nhau.

Bộ chọn ngôn ngữ thường hiển thị danh sách các ngôn ngữ có sẵn và người dùng có thể chọn ngôn ngữ theo lựa chọn của mình từ danh sách đó. Khi được chọn, nội dung giao diện, bao gồm văn bản, nhãn và đôi khi là hình ảnh, sẽ được hiển thị bằng ngôn ngữ đã chọn. Điều này đặc biệt quan trọng đối với các trang web và ứng dụng phục vụ đối tượng toàn cầu hoặc cơ sở người dùng đa dạng.

Bộ chọn ngôn ngữ góp phần mang lại trải nghiệm người dùng tốt hơn bằng cách làm cho nội dung kỹ thuật số trở nên dễ tiếp cận với nhiều đối tượng hơn, bất kể trình độ ngôn ngữ của họ. Chúng là một thành phần chính của các nỗ lực địa phương hóa, cho phép các nhà phát triển và nhà thiết kế điều chỉnh sản phẩm của họ cho phù hợp với các ngữ cảnh ngôn ngữ và văn hóa khác nhau.

Tại sao cần tùy chỉnh công tắc ngôn ngữ của bạn?

Hình minh họa về người học và người dạy. Nền tảng giáo dục với công nghệ.

Tùy chỉnh công tắc ngôn ngữ trên một trang web đa ngôn ngữ mang lại một số lợi ích quan trọng.

  • Sự liên kết thương hiệu và phong cách trực quan: Bằng cách tùy chỉnh bộ chuyển đổi ngôn ngữ, bạn có thể đảm bảo rằng giao diện và phong cách của ngôn ngữ được sử dụng phù hợp với thương hiệu và phong cách trực quan của trang web của bạn. Bạn có thể tùy chỉnh các nút hoặc menu chuyển đổi ngôn ngữ để phù hợp với thiết kế tổng thể của trang web của bạn, tạo sự thống nhất trong trải nghiệm người dùng.
  • Kiểm soát tốt hơn đối với các ngôn ngữ được hiển thị: Đôi khi, bạn có thể muốn giới hạn một số ngôn ngữ được hiển thị trong bộ chuyển đổi ngôn ngữ. Ví dụ: bạn có thể có phiên bản giới hạn của trang web bằng một số ngôn ngữ và bạn chỉ muốn hiển thị những ngôn ngữ đó trong bộ chuyển đổi ngôn ngữ. Bằng cách tùy chỉnh bộ chuyển đổi ngôn ngữ, bạn có thể chọn ngôn ngữ nào được hiển thị, giúp bạn kiểm soát tốt hơn nội dung có sẵn.
  • Trải nghiệm người dùng tối ưu: Bằng cách tùy chỉnh bộ chuyển đổi ngôn ngữ, bạn có thể tạo trải nghiệm người dùng tối ưu. Ví dụ: bạn có thể điều chỉnh bố cục hoặc vị trí của bộ chuyển đổi ngôn ngữ để giúp người dùng dễ dàng tìm thấy. Bạn cũng có thể thêm các tính năng như thông báo hoặc hướng dẫn chuyển đổi ngôn ngữ giúp người dùng hiểu cách sử dụng tính năng này một cách dễ dàng.
  • Đáp ứng nhu cầu người dùng khác nhau: Mỗi người dùng có sở thích ngôn ngữ khác nhau. Bằng cách tùy chỉnh chuyển đổi ngôn ngữ, bạn có thể đáp ứng nhu cầu của người dùng từ nhiều nền tảng ngôn ngữ khác nhau. Điều này có thể bao gồm người dùng địa phương, khách truy cập quốc tế hoặc người dùng thoải mái hơn với ngôn ngữ khác.
  • Tăng chuyển đổi bán hàng: việc tùy chỉnh bộ chuyển đổi ngôn ngữ phù hợp cũng có thể mang lại lợi ích tăng chuyển đổi bán hàng. Bởi vì một bộ chuyển đổi ngôn ngữ hiệu quả có thể mang lại sự thoải mái cho người dùng khi tương tác với trang web của bạn. Theo dữ liệu nghiên cứu của CSA, 72,4% người tiêu dùng cho biết họ có nhiều khả năng mua sản phẩm có thông tin bằng ngôn ngữ của riêng họ. Vì vậy, không thể phủ nhận rằng mức độ bán hàng của bạn cũng sẽ tăng lên.

Các loại bộ chọn ngôn ngữ khác nhau

Mỗi chủ sở hữu trang web chắc chắn sẽ cân nhắc kỹ lưỡng về cách hiển thị bộ chọn ngôn ngữ của họ, mỗi trang web sẽ có những tùy chọn khác nhau. Đối với những người đang tìm kiếm loại bộ chọn ngôn ngữ có thể sử dụng, dưới đây là một số gợi ý.

Nút ngôn ngữ

Đây là một trong những loại công tắc ngôn ngữ thường được sử dụng. Nút ngôn ngữ thường là một biểu tượng hoặc văn bản cho biết ngôn ngữ đang được hiển thị, ví dụ: “EN” cho tiếng Anh hoặc cờ quốc gia đại diện cho một ngôn ngữ cụ thể. Khi người dùng nhấp vào nút ngôn ngữ, họ sẽ được chuyển hướng đến phiên bản trang web bằng ngôn ngữ phù hợp.

Đối với các nút ngôn ngữ, bạn nên hiển thị một số lượng ngôn ngữ hạn chế để tránh giao diện bị lộn xộn. Thông thường, có hơn 4 đến 5 ngôn ngữ có thể tạo ra hiệu ứng hình ảnh bận rộn. Điều quan trọng là đặt nút ở vị trí dễ thấy để người dùng có thể dễ dàng tìm thấy nó. Chúng tôi sẽ thảo luận về các khía cạnh này sâu hơn trong phần tiếp theo của bài viết này.

Nút ngôn ngữ có thể phù hợp cho các doanh nghiệp nhắm đến các thị trường cụ thể hoặc phục vụ các cộng đồng quốc tế ở một số vị trí nhất định. Một ví dụ về việc sử dụng nút ngôn ngữ trên trang web của WHO như sau.

Trang chủ thành phố Rock and Roll với hình ảnh robot

Liên kết văn bản

Liên kết văn bản là một loại công tắc ngôn ngữ sử dụng văn bản dưới dạng tên ngôn ngữ làm liên kết. Ví dụ: bạn có thể hiển thị các liên kết văn bản như “Tiếng Anh,” “Tiếng Pháp,” hoặc “Tiếng Tây Ban Nha” để đưa người dùng đến phiên bản trang web bằng ngôn ngữ đã chọn. Liên kết văn bản này thường được đặt trong danh sách hoặc menu thả xuống để giúp người dùng dễ dàng chọn ngôn ngữ mong muốn.

Biểu mẫu đăng nhập tài khoản trực tuyến an toàn

Một loại bộ chọn ngôn ngữ liên kết được sử dụng bởi công ty lớn Facebook, ngoài các ngôn ngữ được liệt kê, bạn cũng có thể nhấn vào biểu tượng (+) để tìm thêm ngôn ngữ.

Sau đó, trang sẽ được dịch ngay lập tức sang ngôn ngữ đã chọn trước đó.



Menu lựa chọn

Menu lựa chọn là một loại công tắc ngôn ngữ sử dụng menu thả xuống hoặc menu mở để chọn ngôn ngữ. Khi người dùng nhấp vào menu tùy chọn, họ sẽ thấy danh sách các ngôn ngữ có sẵn và có thể chọn ngôn ngữ mong muốn. Menu tùy chọn có thể chứa biểu tượng quốc gia hoặc cờ làm chỉ số ngôn ngữ, cũng như tên ngôn ngữ trong văn bản.

Menu lựa chọn khá khác so với nút ngôn ngữ, loại này phức tạp hơn chỉ một nút. Giống như ví dụ dưới đây đến từ trang web của Porsche.

Họ cung cấp một trang web chọn ngôn ngữ nơi người dùng có thể trực tiếp viết ngôn ngữ hoặc quốc gia đích.

Một hình ảnh tối với biểu mẫu và văn bản trên đó.

Dropdown so với Danh sách so với Pop-up: Cái nào hoạt động tốt nhất?

Một người phụ nữ chọn các tùy chọn ngôn ngữ trên một trang web. Trang web cung cấp nhiều ngôn ngữ.

Chọn mô hình tương tác phù hợp cho bộ chọn ngôn ngữ của bạn là rất quan trọng để mang lại trải nghiệm người dùng liền mạch và trực quan. Mỗi phương pháp—dù là trình đơn thả xuống, danh sách nội tuyến hay cửa sổ bật lên—đều mang lại những lợi thế khác nhau tùy thuộc vào bố cục trang web, số lượng ngôn ngữ được hỗ trợ và hành vi của người dùng. Dưới đây là so sánh của ba mô hình tương tác chính để lựa chọn ngôn ngữ, tập trung vào UX, khả năng truy cập và ngữ cảnh triển khai.

Loại

Điểm mạnh

Hạn chế

Trường hợp sử dụng tốt nhất

Trình đơn thả xuống

Gọn gàng, sạch sẽ, có khả năng mở rộng với nhiều ngôn ngữ

Yêu cầu tương tác (nhấp/chạm), có thể không rõ ràng với tất cả người dùng

Trang web đa ngôn ngữ có hạn chế về không gian

Danh sách văn bản

Hiển thị mà không cần tương tác, truy cập nhanh hơn cho các ngôn ngữ chính

Có thể làm rối loạn giao diện người dùng, không thể mở rộng cho nhiều ngôn ngữ

Các trang web có 2–4 tùy chọn ngôn ngữ chính

Cửa sổ bật lên

Có thể bao gồm trường tìm kiếm, thiết kế giao diện người dùng linh hoạt

Có thể làm gián đoạn luồng người dùng, cần nút đóng rõ ràng và khả năng truy cập

Các trang web toàn cầu có 10+ ngôn ngữ

Các phương pháp hay nhất và mẹo về bộ chọn ngôn ngữ

mọi người làm việc cùng nhau trong dự án phần mềm. Hợp tác làm việc theo nhóm

Thiết kế bộ chọn ngôn ngữ hiệu quả bao gồm việc mang lại trải nghiệm liền mạch trên tất cả các thiết bị và đảm bảo khả năng tiếp cận cho người dùng từ nhiều nền tảng khác nhau. Với khán giả toàn cầu ngày càng tăng, bộ chuyển đổi ngôn ngữ của bạn nên trực quan, dễ tiếp cận và phản hồi nhanh để đảm bảo người dùng có thể tương tác thoải mái trong ngôn ngữ ưa thích của họ.

Dưới đây là các phương pháp hay nhất bạn có thể áp dụng để đảm bảo bộ chọn ngôn ngữ của bạn rõ ràng, thuận tiện và dễ truy cập cho tất cả người dùng.

Ưu tiên thiết kế đáp ứng

Hầu hết người dùng truy cập các trang web từ các thiết bị di động, vì vậy bộ chọn ngôn ngữ của bạn nên phản hồi nhanh và thân thiện với thiết bị di động. Đảm bảo nút hoặc menu dễ dàng chạm vào, không che khuất nội dung quan trọng và vẫn hiển thị trên các màn hình nhỏ hơn.

Ví dụ, bộ chọn ngôn ngữ trên trang web trông như thế này.

Plugin dịch thuật trang web cho hơn 85 ngôn ngữ

Sau đó, khi xem từ phía di động, bộ chọn ngôn ngữ vẫn có thể được truy cập dễ dàng và không di chuyển hoặc biến mất.

Logo và thông tin về dịch vụ dịch thuật Linguiase. Tăng lưu lượng truy cập trang web với các bản dịch.

Sử dụng trình đơn thả xuống hoặc trình đơn có thể mở rộng để giữ bố cục gọn gàng và đảm bảo các mục tiêu cảm ứng có đủ khoảng cách để tương tác thoải mái. Điều này giúp người dùng chọn ngôn ngữ ưa thích của họ một cách dễ dàng mà không bị thất vọng do các yếu tố chật chội hoặc khó nhấp.

Vị trí đặt cẩn thận trong giao diện

Đặt bộ chọn ngôn ngữ ở những khu vực dễ thấy, dự kiến như góc trên bên phải của tiêu đề hoặc chân trang dưới cùng. Đây là những vị trí trực quan mà người dùng thường tìm kiếm tùy chọn ngôn ngữ.

Tránh ẩn bộ chọn trong các biểu tượng mơ hồ hoặc trình đơn phụ. Giữ vị trí của nó nhất quán trên tất cả các trang để người dùng thường xuyên chuyển đổi ngôn ngữ có thể tìm thấy nó dễ dàng vào bất kỳ lúc nào.

Sử dụng thuộc tính trợ năng (ARIA)

Để đảm bảo bộ chọn ngôn ngữ của bạn có thể truy cập được đối với người dùng khuyết tật, hãy sử dụng các thuộc tính ARIA (Ứng dụng Internet phong phú có thể truy cập) như aria-label, aria-haspopup và aria-expanded. Những điều này giúp các công nghệ hỗ trợ như trình đọc màn hình hiểu vai trò và chức năng của phần tử.

Nền tảng thương mại Shopify cho các giao dịch trực tuyến và trực tiếp

Việc triển khai khả năng tiếp cận đáp ứng các tiêu chuẩn WCAG và đảm bảo trang web của bạn bao gồm và có thể sử dụng được bởi nhiều đối tượng hơn. Thiết kế bao gồm mang lại lợi ích cho mọi người, không chỉ người dùng có nhu cầu cụ thể.

Sử dụng nhãn ngôn ngữ rõ ràng và dễ nhận biết

Hiển thị từng tùy chọn ngôn ngữ bằng nhãn gốc của nó, ví dụ: “Español” thay vì “Tiếng Tây Ban Nha” hoặc “Deutsch” thay vì “Tiếng Đức”. Điều này cho phép người dùng nhanh chóng nhận ra ngôn ngữ ưa thích của họ, ngay cả khi họ không hiểu ngôn ngữ trang web hiện tại.

Nhãn gốc bao gồm nhiều hơn và giảm tải nhận thức, đặc biệt là đối với người dùng quốc tế. Tránh sử dụng các chữ viết tắt hoặc mã ngôn ngữ khó hiểu trừ khi khán giả của bạn biết chúng.

Tránh quá tải với quá nhiều tùy chọn

Hiển thị quá nhiều tùy chọn ngôn ngữ cùng một lúc có thể làm rối giao diện và gây nhầm lẫn cho người dùng. Chỉ hiển thị các ngôn ngữ phù hợp nhất hoặc thường được sử dụng trước, và đặt phần còn lại vào menu thả xuống hoặc trong phần “Ngôn ngữ khác”.

Điều này giúp giữ cho giao diện sạch sẽ và cải thiện khả năng sử dụng, đặc biệt là trên thiết bị di động. Sử dụng phân tích lưu lượng truy cập trang web để quyết định ngôn ngữ nào nên được ưu tiên hoặc ẩn.

Sử dụng biểu tượng và gợi ý trực quan phù hợp (không dựa vào cờ)

Các tín hiệu trực quan như biểu tượng quả địa cầu (🌐), mũi tên hướng xuống (▾), hoặc các điểm nổi bật trạng thái hoạt động giúp người dùng hiểu rằng một phần tử có thể nhấp được. Tuy nhiên, tránh sử dụng cờ quốc gia để đại diện cho ngôn ngữ, vì một ngôn ngữ có thể được nói ở nhiều quốc gia.

Ảnh chụp màn hình trang web Latteco hiển thị các ngôi nhà phổ biến ở Yogyakarta

Cờ cũng có thể mang ý nghĩa văn hóa hoặc chính trị. Nếu bạn sử dụng hình ảnh trực quan, hãy kết hợp chúng với nhãn văn bản để đảm bảo sự rõ ràng và giữ cho các biểu tượng nhất quán và trung lập về văn hóa trong thiết kế của bạn.

Duy trì sự nhất quán với thiết kế và thương hiệu trang web

Bộ chọn ngôn ngữ của bạn nên căn chỉnh trực quan với phong cách tổng thể của trang web. Cho dù sử dụng nút, liên kết văn bản hay biểu tượng, hãy đảm bảo rằng typography, màu sắc và trạng thái di chuột phù hợp với thương hiệu của bạn. Điều này cải thiện niềm tin và củng cố trải nghiệm người dùng.

Nếu bạn đang xây dựng một bộ chọn tùy chỉnh, hãy kiểm tra nó trên các trình duyệt và thiết bị khác nhau để đảm bảo nó hoạt động như dự định. Thiết kế nhất quán và chức năng đáng tin cậy góp phần tạo nên hành trình người dùng đa ngôn ngữ liền mạch.

Phá vỡ rào cản ngôn ngữ
Tạm biệt rào cản ngôn ngữ và chào đón sự phát triển không giới hạn! Hãy thử dịch vụ dịch tự động của chúng tôi ngay hôm nay.

Thiết lập bộ chọn ngôn ngữ với Linguise trong 7 bước

Tại thời điểm này, bạn đã biết các phương pháp hay nhất cho các bộ chọn ngôn ngữ. Bản dịch này có thể được thực hiện sau khi bạn sử dụng dịch vụ dịch thuật trang web. Tuy nhiên, không phải tất cả các dịch vụ dịch thuật đều cung cấp sự linh hoạt trong cài đặt bộ chọn ngôn ngữ.

Nhưng bạn không phải lo lắng vì Linguise không giống như vậy. Linguise là một dịch vụ dịch tự động cung cấp tùy chỉnh người dùng cho công tắc ngôn ngữ. Một số lợi ích bạn sẽ nhận được khi sử dụng Linguise bao gồm.

  • Linguise có thể được sử dụng và tích hợp vào hơn 40 CMS (WordPress, Joomla, Drupal, v.v).
  • Bản dịch sang các ngôn ngữ khác nhau sẽ được thực hiện tự động chỉ trong vài giây sau khi bạn thêm ngôn ngữ vào bộ chuyển đổi ngôn ngữ trên trang web.
  • Có hơn 80+ ngôn ngữ có sẵn có thể được thêm vào bộ chọn ngôn ngữ.
  • Linguise sẽ tự động chuẩn bị một URL duy nhất theo ngôn ngữ đích của bản dịch. Ví dụ: URL linguise.com/de/ cho một trang đang được dịch sang tiếng Đức.
  • Nó sẽ tự động tạo một URL chuẩn để giúp tránh nội dung trùng lặp trong các công cụ tìm kiếm khi bạn có các biến thể ngôn ngữ trên một trang.
  • Bạn có thể cài đặt bộ chuyển đổi ngôn ngữ linh hoạt theo nhu cầu trang web, bắt đầu từ biểu tượng, màu sắc đến tên ngôn ngữ.
  • Bạn có thể xem thống kê lượt xem trang của khách truy cập theo ngôn ngữ, cho mỗi ngôn ngữ được thêm vào bộ chọn ngôn ngữ.

Trong hướng dẫn này, chúng tôi sẽ sử dụng WordPress làm ví dụ về hệ thống CMS được sử dụng.

Bước 1: Đăng ký tài khoản miễn phí Linguise

Để truy cập vào bộ chuyển đổi ngôn ngữ trên Linguise, bước đầu tiên bạn cần làm là đăng ký tài khoản trên Linguise. Linguise cũng cung cấp một phiên bản dùng thử miễn phí trong một tháng, bao gồm nhiều tính năng bạn có thể tận dụng.

Bước 2: Thêm tên miền vào trang web đa ngôn ngữ của bạn

Bước thứ hai là thêm tên miền trang web vào Linguise mà bạn đã sở hữu vào bảng điều khiển Linguise. Có một số điều bạn cần điền vào, bắt đầu từ.

  • Tài khoản
  • Địa chỉ URL
  • Nền tảng
  • Ngôn ngữ
  • Ngôn ngữ dịch
  • Dịch URL
Một hình ảnh đen trắng của màn hình mã với một số đầu vào văn bản. Màn hình hiển thị các dòng mã.

Sau đó, bạn cần kích hoạt khóa API và đặt URL ngôn ngữ. Để có hướng dẫn đầy đủ về việc thêm miền trang web, bạn có thể đọc tài liệu, trong khi cụ thể cho WordPress, bạn có thể xem nó bằng cách cài đặt Linguise dịch tự động trên WordPress hoặc xem hướng dẫn video bên dưới.

Bước 3: Cài đặt plugin Linguise

Sau khi thêm thành công một trang web, sau đó mở WordPress bảng điều khiển và cài đặt plugin Linguise, thực hiện việc này bằng cách Plugins > Add New > Linguise > Cài đặt > Kích hoạt.

Nếu plugin đã được cài đặt, hãy đi đến bảng điều khiển Linguise và sao chép khóa API.

thông báo lỗi trên màn hình

Sau đó, mở plugin Linguise và dán mã API mà bạn nhận được từ bảng điều khiển Linguise vào cột sau.

Truy cập bị từ chối. Vui lòng xác minh khóa API của bạn.

Bước 4: Thiết lập hiển thị chính

Để cấu hình công tắc ngôn ngữ hoặc hiển thị cờ ngôn ngữ, các bước thực hiện thông qua Linguise bảng điều khiển trong Cài đặt > Menu hiển thị cờ ngôn ngữ.

Trong quá trình thiết lập ban đầu, chúng tôi sẽ thực hiện các điều chỉnh đối với màn hình chính, xem xét các thành phần khác nhau.

Một cân nhắc ban đầu là cấu hình định dạng hiển thị danh sách ngôn ngữ, cung cấp ba tùy chọn để lựa chọn: cạnh nhau, dropdown hoặc popup. Ở phía bên trái, có một bản xem trước hiển thị cho mỗi định dạng.

Định dạng đầu tiên, như được hiển thị bên dưới, là bố cục cạnh nhau.

Ảnh chụp màn hình giao diện dịch ngôn ngữ. Giao diện bao gồm các trường để nhập văn bản cần dịch và chọn ngôn ngữ đích.

Định dạng sau đây áp dụng kiểu trình đơn thả xuống, như được mô tả trong hình ảnh bên dưới.

Hình nền tối với khoảng trắng lớn

Cuối cùng, chúng tôi có định dạng popup làm tùy chọn cuối cùng.

Một hình ảnh nền đen với khoảng trắng lớn

Tiếp theo, chúng tôi tiến hành bước tiếp theo, bao gồm việc cấu hình vị trí của công tắc ngôn ngữ. Bạn có sự linh hoạt để chọn từ các tùy chọn vị trí khác nhau, vì vậy điều quan trọng là chọn một vị trí dễ dàng nhận thấy đối với khách truy cập.

Cuối cùng, bạn cần quyết định sở thích kết hợp để hiển thị các tùy chọn ngôn ngữ. Bạn có thể chọn giữa các tùy chọn như cờ + tên ngôn ngữ, cờ + tên ngắn, hoặc chỉ hiển thị cờ một mình. Quyết định này sẽ phụ thuộc vào sở thích thiết kế cụ thể của bạn và sở thích của đối tượng mục tiêu.

Bước 5: Đặt thiết kế cờ

Sau đó, bên dưới phần hiển thị chính, bạn sẽ gặp các cấu hình thiết kế cụ thể cho cờ. Hình ảnh được cung cấp bên dưới thể hiện một số tùy chọn cài đặt có sẵn.

  • Hiển thị tên ngôn ngữ: Bạn có tùy chọn hiển thị tên ngôn ngữ dựa trên quốc gia hoặc chính ngôn ngữ đó. Ví dụ, bạn có thể chọn hiển thị “Tiếng Đức” hoặc “Deutsch.”
  • Loại cờ tiếng Anh: Tùy chọn này được áp dụng khi xử lý các ngôn ngữ có nhiều biến thể, chẳng hạn như “Tiếng Anh Mỹ” hoặc “Tiếng Anh Anh.” Các lựa chọn tương tự có thể được thực hiện cho các ngôn ngữ như Tây Ban Nha, Đài Loan, Đức và Bồ Đào Nha.
  • Kiểu dáng cờ: Cài đặt này cho phép bạn xác định hình dạng của biểu tượng cờ, liệu nó nên là hình tròn hay hình vuông (hình chữ nhật).
Một hình ảnh giữ chỗ tối.

Bước 6: Đặt màu sắc và kích thước của cờ

Sau khi thiết kế cờ được thiết lập, bước tiếp theo liên quan đến việc điều chỉnh màu sắc, kích thước và các yếu tố khác nhau. Trong giao diện sau, bạn sẽ tìm thấy nhiều cài đặt có thể tùy chỉnh, bao gồm:

  1. Bán kính đường viền cờ: Điều này cho phép bạn cá nhân hóa bán kính đường viền tính bằng pixel khi sử dụng cờ hình chữ nhật.
  2. Màu tên ngôn ngữ: Bạn có thể chọn màu văn bản mặc định cho tên ngôn ngữ.
  3. Màu sắc ngôn ngữ trong popup: Cài đặt này xác định màu sắc của tiêu đề ngôn ngữ trong các khu vực popup hoặc dropdown.
  4. Kích thước cờ: Bạn có tùy chọn sửa đổi kích thước của cờ theo sở thích của mình.
  5. Màu khi di chuột qua tên ngôn ngữ: Cài đặt này kiểm soát màu văn bản khi di chuột qua tên ngôn ngữ.
  6. Màu khi di chuột qua ngôn ngữ trong popup: Tương tự, cài đặt này xác định màu văn bản khi di chuột qua tiêu đề ngôn ngữ trong popup hoặc trình đơn thả xuống.
Nhiều thiết bị điện tử màu đen. Nhiều mẫu mã khác nhau được hiển thị.

Bước 7: Thiết lập bóng cho hộp cờ

Trong giai đoạn cuối cùng, bạn có cơ hội tùy chỉnh cài đặt bóng cho cờ. Cài đặt ban đầu cho phép bạn chỉ định bóng cho mỗi cờ được hiển thị trên trang web của bạn, trong khi cài đặt tiếp theo liên quan đến hiệu ứng bóng khi di chuột qua cờ ngôn ngữ.

Hãy nhớ nhấp vào nút Lưu để lưu giữ các cài đặt tùy chỉnh mà bạn đã thực hiện cho bộ chuyển đổi ngôn ngữ. Điều này đảm bảo rằng các cấu hình đã chọn của bạn cho các hiệu ứng bóng được triển khai và lưu lại để sử dụng trong tương lai.

Sửa bóng hộp trên màn hình. Sửa cách bóng trên nhà

Sau khi tất cả các cấu hình đã được thực hiện, đây là một ví dụ về cách hiển thị bộ chọn ngôn ngữ sử dụng popup, được đặt ở góc trên bên phải và sử dụng các chữ cái đầu tiên. Đây chỉ là một ví dụ, bạn có thể tùy chỉnh phần còn lại theo ý muốn và theo nhu cầu của trang web.

Một ảnh chụp màn hình đen trắng của một hang động

Ngoài WordPress CMS, bạn cũng có thể sử dụng các nền tảng trang web khác và làm theo hướng dẫn chi tiết như cài đặt bộ chuyển đổi cho OpenCart, bộ chuyển đổi ngôn ngữ cho Drupal, và cài đặt bộ chuyển đổi cho PrestaShop.

Sẵn sàng khám phá thị trường mới? Hãy thử dịch vụ dịch tự động của chúng tôi miễn phí với thử nghiệm không rủi ro 1 tháng. Không cần thẻ tín dụng!

Thiết kế bộ chọn ngôn ngữ của bạn để có trải nghiệm đa ngôn ngữ liền mạch với Linguise!

Tại đây, bạn đã hiểu rõ về các phương pháp hay nhất để thiết kế bộ chọn ngôn ngữ và cách thực hiện bằng cách sử dụng Linguise! Tin tôi đi, việc tạo bộ chuyển đổi ngôn ngữ có thể mang lại nhiều lợi ích và đảm bảo tối ưu hóa dựa trên các điểm được đề cập ở trên.

Khi tạo bộ chọn ngôn ngữ, hãy đảm bảo tuân theo các mẹo và phương pháp hay nhất mà chúng tôi đã giải thích ở trên, bắt đầu từ việc sử dụng biểu tượng, chọn ngôn ngữ liên quan, đến định vị.

Bây giờ, đăng ký tài khoản Linguise, thêm trang web của bạn và tinh chỉnh bộ chọn ngôn ngữ để cung cấp trải nghiệm người dùng tốt hơn. Đừng quên thử tính năng dùng thử miễn phí 1 tháng để tận hưởng các tính năng vượt trội của Linguise!

Bạn cũng có thể quan tâm đến việc đọc

Đừng bỏ lỡ!
Đăng ký nhận Bản tin của chúng tôi

Nhận tin tức về bản dịch tự động trang web, SEO quốc tế và hơn thế nữa!

Invalid email address
Hãy thử. Một lần mỗi tháng, và bạn có thể hủy đăng ký bất cứ lúc nào.

Đừng rời đi mà không chia sẻ email của bạn!

Chúng tôi không thể đảm bảo bạn sẽ trúng xổ số, nhưng chúng tôi có thể hứa mang đến một số tin tức thông tin thú vị xung quanh bản dịch và giảm giá thường xuyên.

Đừng bỏ lỡ!
Invalid email address