Как настроить переключатель языка на Bubble.io

автор: Аоринка Анендья
1 августа 2024 г.

Блог > Руководство > Как настроить переключатель языка на Bubble.io

Установка переключателя языка на Bubble.io может облегчить пользователям переключение языков. Эта функция особенно ценна для приложений с глобальной аудиторией, позволяя пользователям взаимодействовать с платформой на предпочитаемом ими языке. Bubble.io, популярная платформа разработки без кода, предлагает встроенные возможности локализации, которые позволяют разработчикам создавать многоязычные приложения без обширных знаний в области кодирования.

Чтобы реализовать переключатель языка в Bubble.io, разработчики обычно начинают с определения языков, которые они хотят поддерживать, в настройках приложения. Затем они создают раскрывающийся список или элемент кнопки, с которым пользователи могут взаимодействовать, чтобы изменить язык. В этой статье мы обсудим настройку переключателя языка на Bubble.io с помощью одного из веб-сайтов службы автоматического перевода.

Почему переключатель языка важен на сайте Bubble.io?

Добавление переключателя языка на сайт неспроста. Вот почему вам нужно настроить его на веб-сайте Bubble.

Облегчает работу пользователей в других странах: переключатель языка позволяет международным пользователям просматривать веб-сайт на своем родном языке. Например, испанский пользователь, посещающий интернет-магазин, может переключиться на испанский язык, что упрощает понимание деталей продукта и совершение покупок. Исследования CSA показывают, что 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 для каждого языка и один DNS TXT для ключа проверки.

После авторизации 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. Такая согласованность помогает пользователям более эффективно перемещаться по вашему сайту, поскольку они точно знают, где найти языковые параметры, независимо от их текущей страницы.

Пример: на веб-сайте переключатель языка постоянно отображается в нижнем колонтитуле на всех страницах, от главной страницы до страниц продуктов и процесса оформления заказа. Такая согласованность гарантирует, что пользователи смогут легко переключать языки в любое время во время просмотра страниц или покупок.

Готовы осваивать новые рынки? Попробуйте наш автоматический перевод бесплатно с нашей 1-месячной пробной версией без риска. Кредитная карта не нужна!

Получите бесплатную пробную версию на 1 месяц

Настройте переключатель языка на многоязычном веб-сайте Bubble с помощью Linguise !

Теперь вы уже понимаете, как выбрать язык многоязычного сайта Bubble.io. Чтение переключателя языка может дать различные преимущества и в дальнейшем привести к оптимизации на основе ранее упомянутых пунктов.

Эффективная оптимизация выбора языка может значительно улучшить взаимодействие с пользователем. Зарегистрируйте Linguise , интегрируйте ее со своим веб-сайтом Bubble.io и настройте переключатель языка, чтобы улучшить взаимодействие с пользователем.

Как настроить переключатель языка на Bubble.io

Почему переключатель языка важен на сайте Bubble.io?

Как настроить переключатель языка на Bubble.io

Шаг 1: Зарегистрируйте учетную запись Linguise

Шаг 2. Автоматически добавьте DNS с помощью Entri

Шаг 3. Скопируйте записи DNS

Шаг 4. Проверьте DNS

Шаг 5. Включите переключатель языка.

Шаг 5. Настройте основной дисплей

Шаг 6. Установите дизайн флага

Шаг 7. Настройте цвет и размер.

Шаг 8. Установка тени поля флажка

Лучшие практики по оптимизации переключателя языков на Bubble.io

Используйте легко узнаваемый логотип языкового флага.

Включайте названия языков рядом с флагами.

Вдумчиво расположите кнопку переключения языка

Создайте переключатель языка, чтобы он был отзывчивым

Убедитесь, что переключатель языка единообразен на всех страницах.

Настройте переключатель языка на многоязычном веб-сайте Bubble с помощью Linguise !

Вам также может быть интересно прочитать

4+ эффективных инструмента локализации для вашего сайта

Руководство по SEO Baidu: как получить трафик в крупнейшей поисковой системе Китая

Почему вам следует перевести свой веб-сайт, связанный с криптовалютой, как минимум на 5 языков

Законодательство

Поддерживать

Продукт

скидка 20%

РОЖДЕСТВЕНСКАЯ РАСПРОДАЖА