Налаштування перемикача мов на сайті 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 . На цій сторінці ви можете змінити кілька налаштувань
- Стиль іконки прапора: Виберіть один із трьох варіантів: відображення поруч, спадне меню або спливаюче вікно.
- Позиція: Виберіть, де на вашому сайті відображатиметься перемикач мов. Доступні різні варіанти розташування; переконайтеся, що він легко доступний для відвідувачів.
Ви можете поєднувати відображення прапорців і назв мов, прапорців і скорочень мов або лише назв мов. Для легшого розпізнавання користувачами рекомендується використовувати як прапорці, так і назви мов.
Крок 6: Налаштуйте дизайн прапорця
Після налаштування основного дисплея додатково налаштуйте дизайн прапорців, які будуть відображатися.
- Назва мови відображення: Ви можете вибрати, як показувати назву мови — на основі назви країни або самої назви мови. Наприклад, ви можете відображати «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 та налаштуйте перемикач мов, щоб покращити досвід користувача.
