Настройка переключателя языков на Bubble .io может упростить пользователям переключение языков. Эта функция особенно ценна для приложений с глобальной аудиторией, позволяя пользователям взаимодействовать с платформой на предпочитаемом ими языке. Bubble .io, популярная платформа для разработки без написания кода, предлагает встроенные возможности локализации, позволяющие разработчикам создавать многоязычные приложения без глубоких знаний в области программирования.
Чтобы реализовать переключатель языков в Bubble.io, разработчики обычно сначала определяют поддерживаемые языки в настройках приложения. Затем они создают раскрывающийся список или кнопку, с помощью которой пользователи могут переключать язык. В этой статье мы рассмотрим настройку переключателя языков в Bubble.io с помощью одного из сайтов сервисов автоматического перевода.
Почему переключатель языка так важен на сайте Bubble.io?
Добавление переключателя языка на сайт не случайно. Вот почему его стоит установить на сайте Bubble .
- Облегчает работу пользователей в других странах: переключатель языка позволяет международным пользователям просматривать веб-сайт на своем родном языке. Например, испанский пользователь, посещающий интернет-магазин, может переключиться на испанский язык, что упрощает понимание деталей продукта и совершение покупок. Исследования CSA показывают, что 76% онлайн-покупателей предпочитают покупать товары, когда информация доступна на их языке, что подчеркивает важность этой функции для комфорта пользователя и доступности.
- Оптимизация сайта в результатах поиска других стран: благодаря переключателю языков ваш Bubble может занять более высокие позиции в результатах поиска на иностранных языках. Например, французская версия вашего сайта с большей вероятностью будет отображаться во французском поиске Google. Это улучшение видимости может значительно увеличить международный трафик.
- Увеличение конверсии продаж. Предложение контента на нескольких языках может повысить продажи. Платформа онлайн-курсов, позволяющая пользователям переключать языки, может привлечь более широкую аудиторию и увеличить число учащихся. Этот подход эффективен, поскольку потребители с большей вероятностью будут совершать покупки на веб-сайтах, предоставляющих информацию на их родном языке, что напрямую влияет на ваши показатели конверсии.
- Улучшает взаимодействие и удержание пользователей: переключатель языка может удерживать пользователей на вашем сайте дольше. Например, пользователи, взаимодействующие на предпочитаемом им языке в приложении социальной сети, как правило, остаются вовлеченными дольше. Это увеличение вовлеченности имеет большое значение, поскольку пользователи обычно проводят в два раза больше времени на сайтах на своем родном языке, чем на сайтах на втором языке, что приводит к лучшему удержанию пользователей.
Как настроить переключатель языка в Bubble.io
Теперь, когда мы понимаем важность переключения языков на многоязычных сайтах Bubble.io, давайте обсудим, как это реализовать. Сервисы перевода веб-сайтов обычно предлагают эту функцию, которую можно настроить под нужды пользователя.
Однако не все службы перевода предлагают настраиваемые и удобные переключатели языков. Поэтому очень важно выбрать службу автоматического перевода, совместимую с различными платформами и обеспечивающую гибкие функции переключения языков.
Linguise один из сервисов автоматического перевода, отвечающий этим критериям . Linguise предлагает легко настраиваемую и простую в использовании функцию переключения языков, которая интегрируется с популярными CMS и конструкторами сайтов, такими как Bubble .
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 для каждого языка и один 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 минут до часа. После завершения вы увидите зелёные индикаторы рядом со списком 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 и настройте выбор языка для улучшения пользовательского опыта.
