Установка переключателя языка на сайте 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 и настройте селектор языка для улучшения пользовательского опыта.
