Налаштування перемикача мов на сайті Bubble.io може полегшити користувачам зміну мови. Ця функція особливо цінна для додатків із глобальною аудиторією, дозволяючи користувачам взаємодіяти з платформою улюбленою мовою. Bubble.io, популярна платформа розробки без коду, пропонує вбудовані можливості локалізації, які дозволяють розробникам створювати багатомовні додатки без глибоких знань програмування.
Щоб реалізувати перемикач мов у Bubble.io, розробники зазвичай починають із визначення мов, які вони хочуть підтримувати в налаштуваннях застосунку. Потім вони створюють елемент випадаючого списку або кнопки, з яким користувачі можуть взаємодіяти, щоб змінити мову. У цій статті ми обговоримо налаштування перемикача мов на Bubble.io за допомогою одного з вебсайтів сервісів автоматичного перекладу.
Чому перемикач мов важливий на сайті Bubble.io?
Додавання перемикача мов на вебсайті зроблено недарма. Ось чому вам потрібно налаштувати його на вебсайті Bubble .
- Полегшує користувачам з інших країн: Перемикач мов дозволяє міжнародним користувачам переглядати вебсайт рідною мовою. Наприклад, іспанський користувач, який відвідує інтернет-магазин, може перемкнутися на іспанську, що полегшує розуміння деталей товару та завершення покупок. Дослідження CSA Research показують, що 76% онлайн-покупців віддають перевагу купівлі товарів, коли інформація доступна їхньою мовою, що підкреслює важливість цієї функції для комфорту та доступності користувачів.
- Оптимізація веб-сайту в результатах пошуку інших країн: Завдяки перемикачу мов ваш веб-сайт Bubble.io може краще ранжуватися в пошукових запитах іноземними мовами. Наприклад, французька версія вашого сайту з більшою ймовірністю з’явиться у французьких пошукових запитах Google. Ця покращена видимість може значно збільшити міжнародний трафік.
- Збільшення конверсії продажів: Пропонування контенту кількома мовами може підвищити продажі. Платформа онлайн-курсів, яка дозволяє користувачам перемикати мови, може залучити ширшу аудиторію та збільшити кількість реєстрацій. Цей підхід ефективний, оскільки споживачі частіше купують на веб-сайтах, які надають інформацію їхньою рідною мовою, що безпосередньо впливає на ваші показники конверсії.
- Покращує залученість і утримання користувачів: Перемикач мов може довше утримувати користувачів на вашому сайті. Наприклад, користувачі, які спілкуються улюбленою мовою в застосунку соціальної мережі, зазвичай залишаються залученими довше. Це підвищення залученості є важливим, оскільки користувачі зазвичай проводять удвічі більше часу на сайтах рідною мовою, ніж на сайтах другою мовою, що призводить до кращого утримання користувачів.
Як налаштувати перемикач мови на Bubble.io
Тепер, коли ми розуміємо важливість перемикання мов на багатомовних веб-сайтах Bubble.io, давайте обговоримо, як це реалізувати. Сервіси перекладу веб-сайтів зазвичай пропонують цю функцію, яку можна адаптувати до потреб користувача.
Однак не всі сервіси перекладу пропонують налаштовувані та зручні перемикачі мов. Тому дуже важливо вибрати сервіс автоматичного перекладу, сумісний з різними фреймворками та з гнучкими функціями перемикання мов.
Одним із сервісів автоматичного перекладу, який відповідає цим критеріям, є Linguise. Linguise автоматичний переклад пропонує дуже настроювану та просту у використанні функцію перемикання мов, яка інтегрується з популярними CMS та конструкторами сайтів, як-от Bubble.io.
Linguise забезпечує бездоганну інтеграцію з Bubble, дозволяючи розробникам легко впроваджувати перемикання мов у свої багатомовні застосунки. Використовуючи передові функції та зручний інтерфейс Linguise, ви можете спростити налаштування та підтримку перемикачів мов на вашому вебсайті Bubble .
Ось кроки для встановлення Linguise на веб-сайті Bubble.io та налаштування перемикача мов.
Крок 1: Зареєструйте обліковий запис Linguise
Почніть з створення безкоштовного Linguise акаунта та додавання домену вашого веб-сайту. Ви можете скористатися 30-денною безкоштовною пробною версією перед вибором плану підписки.
Потім вам потрібно зареєструвати свій домен, щоб авторизувати переклад. Скопіюйте назву свого домену, включаючи “https://,” і виберіть “інше” як платформу.
Далі виберіть вихідну та цільову мови.
Крок 2: Автоматичне додавання DNS за допомогою Entri
Після реєстрації вашого веб-сайту на панелі керування Linguise у вас буде два варіанти встановлення.
Для автоматичного додавання DNS-записів натисніть “Підключити DNS автоматично.” Ця функція, яка називається Entri, спрощує процес встановлення, керуючи DNS-записами за вас. Крім того, ви можете вручну скопіювати DNS-записи до вашого доменного провайдера.
Натискання кнопки спонукає Entri проаналізувати URL-адресу вашого зареєстрованого вебсайту та перевірити ваші публічні записи DNS, визначаючи необхідного постачальника та записи DNS.
Далі натисніть “Авторизуватися за допомогою [вашого постачальника домену]” (наприклад, Cloudflare). Ця дія перенаправить вас на сторінку входу вашого постачальника домену, де ви можете увійти та продовжити.
Після входу Entri автоматично додасть відповідні DNS-записи—один DNS на кожну мову та один TXT DNS для ключа перевірки—до вашого домену.
Після авторизації Entri повідомить вас, що всі налаштування DNS успішно налаштовано. Функція перекладу має стати доступною, щойно всі записи DNS поширяться на вашому домені, що зазвичай займає від 20 до 30 хвилин.
Для ручного встановлення ви можете виконати наведені нижче кроки.
Крок 3: Копіювати записи DNS
Для ручного встановлення вас буде перенаправлено на екран із записами DNS, необхідними для налаштування ваших багатомовних сторінок, наприклад fr.domain.com або es.domain.com.
Скопіюйте ці елементи до конфігурації DNS вашого Bubble.io.
Далі перейдіть до менеджера доменів і перейдіть до області налаштування DNS. Дотримуйтесь інструкцій, щоб скопіювати:
- Один TXT-запис для перевірки домену
- Один або кілька записів CNAME для мов
Ось приклади для кожного типу запису (TXT і CNAME).
Після додавання всіх записів ваша конфігурація має виглядати так.
Крок 4: Перевірте DNS
Після додавання всіх записів до DNS вашого домену натисніть кнопку “Перевірити конфігурацію DNS”, щоб перевірити поширення DNS.
Перевірка DNS зазвичай триває від 30 хвилин до 1 години. Після завершення ви побачите зелені індикатори поруч зі списком DNS у панелі керування Linguise . Ви майже готові перекласти свій вебсайт Bubble.io; залишилося лише підключити перемикач мов із прапорами країн.
Крок 5: Увімкніть перемикач мови
Перемикач мов — це спливне вікно з прапорцями, яке дозволяє користувачам вибрати бажану мову. Щоб його впровадити, скопіюйте код, наданий наприкінці процесу реєстрації домену або в налаштуваннях домену, до заголовка сторінок вашого сайту Bubble.io. Перемикач мов із прапорцями потім автоматично з’явиться на вашому публічному вебсайті.
Далі перейдіть до панелі вашого веб-сайту Bubble . Натисніть ‘Налаштування’ у меню лівої бічної панелі та виберіть “SEO / метатеги.”
Прокрутіть вниз до “Скрипт/мета-теги в заголовку” у розділі “Розширені налаштування.” Вставте Linguise , який ви скопіювали раніше, потім натисніть ‘Зберегти’ і опублікуйте свій сайт.
Крок 5: Налаштуйте головний дисплей
Щоб почати налаштування перемикача мов, перейдіть до розділу “Налаштування” > “Відображення мовних прапорців” у панелі керування Linguise . На цій сторінці ви можете налаштувати кілька параметрів
- Стиль іконки прапора: Виберіть один із трьох варіантів: поруч, у випадаючому меню або у спливаючому вікні.
- Позиція: Виберіть, де на вашому сайті з’явиться перемикач мов. Доступні різні варіанти розташування; переконайтеся, що він легко доступний для відвідувачів.
Ви можете поєднувати відображення прапорців і назв мов, прапорців і скорочень мов або лише назв мов. Для полегшення розпізнавання користувачами рекомендується використовувати як прапорці, так і назви мов.
Крок 7: Встановіть дизайн прапорця
Після налаштування основного відображення додатково налаштуйте дизайн прапорців, які будуть показані.
- Відображувана назва мови: Ви можете вибрати, щоб назва мови відображалася на основі назви країни або самої назви мови. Наприклад, ви можете відобразити “French” або “Français”.
- Тип англійського прапора: Ця опція корисна для мов із кількома варіантами, як-от американська чи британська англійська (а також застосовується до іспанської, тайванської, німецької та португальської).
- Стиль прапора: Виберіть форму значка прапора: круглу або прямокутну.
Крок 7: Налаштування кольору та розміру
Після налаштування дизайну прапора ви можете додатково налаштувати колір і розмір прапорів. Ось параметри, які ви можете змінити:
- Радіус рамки прапора: Налаштуйте радіус у пікселях для прямокутного стилю прапора.
- Колір назви мови: Виберіть колір тексту за замовчуванням для відображення назви мови.
- Колір мови у спливаючому вікні: Встановіть колір тексту назви мови у спливаючому вікні або випадаючому списку.
- Розмір прапора: Налаштуйте розмір значків прапора.
- Колір назви мови при наведенні: Встановіть колір тексту, який з’являється, коли користувач наводить курсор на назву мови.
- Колір мови у спливаючому вікні при наведенні: Встановіть колір тексту, який з'являється, коли користувач наводить курсор на назву мови у спливаючому вікні або випадаючому списку.
Крок 8: Налаштування тіні рамки прапора
Нарешті, ви можете налаштувати параметри тіні рамки прапорця. Перша опція дозволяє застосувати ефект тіні до кожної іконки прапорця, що відображається на вашому вебсайті. Наступна опція керує ефектом тіні, коли користувачі наводять курсор миші на мовні прапорці.
Після внесення всіх бажаних змін натисніть кнопку «Зберегти», щоб застосувати налаштування. Потім відвідайте свій веб-сайт Bubble , щоб переконатися, що конфігурацію успішно застосовано. Ось як виглядатиме перемикач мов.
Після налаштування ви можете побачити, як працює перемикач мов на вашому багатомовному вебсайті Bubble .
Далі ви можете перекласти вебсайт іншими мовами, наприклад іспанською.
Найкращі практики оптимізації перемикача мови на Bubble.io
Після успішного налаштування перемикача мови на багатомовному вебсайті Bubble важливо врахувати поради щодо оптимізації перемикача мови як для вашого сайту, так і для відвідувачів.
Використовуйте легко впізнаваний логотип прапора мови
Коли ви впроваджуєте перемикач мов на своєму вебсайті Bubble.io, надзвичайно важливо використовувати легко впізнавані мовні прапори або іконки. Ці візуальні підказки допомагають користувачам швидко визначити та вибрати бажану мову. Наприклад, іконка глобуса загальновідомо означає мовні опції. Як альтернативу, ви можете використовувати прапори країн, але врахуйте, що це іноді може бути проблематичним, оскільки мови не завжди прив’язані до однієї країни.
Приклад: Вебсайт Amazon використовує маленьку іконку глобуса поруч із поточно вибраною мовою (наприклад, «EN») у верхній панелі навігації. Цей простий, але ефективний підхід дозволяє користувачам швидко знаходити мовні опції незалежно від їхніх поточних мовних налаштувань.
Додайте назви мов поруч із прапорами
Хоча прапори можуть бути корисними, їх не слід використовувати окремо. Додавання назви мови її рідною писемністю поряд із прапором або значком забезпечує ясність і дозволяє уникнути потенційної плутанини. Це особливо важливо для мов, якими розмовляють у кількох країнах або регіонах.
Приклад: Перемикач мов на сайті Airbnb відображає назву мови та прапор країни. Наприклад, він показує «English (US)» з прапором США та «Français» з прапором Франції. Таке поєднання гарантує, що користувачі зможуть точно визначити бажаний варіант мови.
Розмістіть кнопку перемикання мов обдумано
Розташування перемикача мов є критично важливим для доступності користувачів. Зазвичай його розміщують у правому верхньому куті заголовка, у нижньому колонтитулі або в головному навігаційному меню. Головне — зробити його легко знайти, не перевантажуючи основну область вмісту.
Приклад: На веб-сайті tiffany.com перемикач мов розташований у нижньому правому куті сторінки, завжди видимий і доступний. Це послідовне розміщення гарантує, що користувачі можуть швидко знайти та використовувати мовні опції незалежно від того, де вони знаходяться на сайті.
Розробіть перемикач мови, щоб він був адаптивним
Переконайтеся, що ваш перемикач мов добре працює на всіх пристроях, від настільних комп’ютерів до смартфонів. На менших екранах вам, можливо, доведеться адаптувати дизайн – наприклад, використовувати спадне меню замість горизонтального списку опцій.
Приклад: Перемикач мов на веб-сайті ЮНЕСКО чудово адаптується до різних пристроїв. На комп’ютері він відображається як горизонтальний список у заголовку. На мобільному пристрої він перетворюється на компактне спадне меню, забезпечуючи зручність використання без шкоди для мобільного макета.
Переконайтеся, що перемикач мов є однаковим на всіх сторінках
Зберігайте однаковий дизайн, функціональність і розташування перемикача мов на всіх сторінках вашого веб-сайту Bubble.io. Така послідовність допомагає користувачам ефективніше орієнтуватися на вашому сайті, оскільки вони точно знають, де знайти мовні опції, незалежно від поточної сторінки.
Приклад: Вебсайт послідовно розміщує перемикач мов у нижньому колонтитулі на всіх сторінках — від головної до сторінок товарів і процесу оформлення замовлення. Така послідовність гарантує, що користувачі можуть легко змінити мову в будь-який момент під час перегляду сайту чи покупок.
Налаштуйте перемикач мов на багатомовному веб-сайті Bubble за допомогою Linguise!
Тепер ви вже розумієте, як вибрати мову для багатомовного вебсайту Bubble.io. Читання селектора мови може надати різні переваги та надалі призвести до оптимізації на основі раніше згаданих пунктів.
Ефективна оптимізація перемикача мов може значно покращити досвід користувачів. Зареєструйтеся для Linguise акаунта, інтегруйте його з вашим веб-сайтом Bubble.io та налаштуйте перемикач мов, щоб покращити досвід користувачів.
