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