多脂質 讓您完全控制 Language Switcher 在桌面和行動檢視中的外觀和行為。無論您的目標是無縫集成設計還是更明顯的可訪問性,自定義切換器都可以改善用戶體驗並保持多語言頁面之間的設計一致性。

分步設置指南

1. 導航到 Language Switcher 設置

要開始自訂您的語言切換器:

  • 轉到 MultiLipi 儀錶板

  • 選擇 語言切換器 設置 選項卡。
    側邊欄導航突出顯示 Language Switcher settings 選項

2. 編輯 Switcher 佈局和外觀

進入 Switch Editor 後,您將看到一個專用的控制面板,其中包含兩者的自定義選項 桌面 移動 介面。 顯示 Desktop 和 Mobile 切換選項的 Switch Editor 面板

3. 樣本(切換器樣式)

從最符合您網站 UI 的預定義切換器樣式中進行選擇: 帶有預構建範本的語言切換器樣式下拉清單

4. 定位切換台

設定語言切換器在螢幕上的位置:

  • 浮動 (基於角落的定位,如左下角)
  • 嵌入式 (插入到特定的 HTML 元素中)

回退邏輯可確保在未找到嵌入點時切換器恢復為浮動狀態。

語言切換器的位置選項,包括浮動和嵌入放置

5. 自定義切換器顏色

選擇您自己的調色板以匹配您的品牌。設定:

  • 背景顏色
  • 文字顏色

使用 RGB 值或內置顏色選擇器。 語言切換器的顏色自定義面板

6. 高級自定義 CSS(選擇)

要實現完全控制,請注入您自己的 CSS 規則,以完全按照您的需要設置切換器的樣式。

例:

CSS - 複製編輯

#lang-switcher-selected-lang .fi {

邊框半徑:0px;

}

#dynamicDropdown {

/* 您的樣式 */

}

自定義 CSS 文字區域,用於高級語言切換器自定義

7. 保存或重置

  • 點擊 以應用更改。

  • 點擊 重置 以恢復為默認設計。

最終預覽

所有自定義設置都會即時即時預覽,讓您在桌面和移動模式之間切換,以確保設備類型之間的一致性。

結束語

MultiLipi 中的語言切換器編輯器允許您:

  • 選擇理想的顯示樣式
  • 調整精確位置
  • 將顏色與您的網站主題相匹配
  • 使用自定義 CSS 實現完全的靈活性

為多語言受眾完善您的用戶體驗 - 只需按兩下即可。