Установка переключателя языка на сайте 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: Настройка дизайна флага
После настройки основного отображения дополнительно настройте дизайн флагов, которые будут отображаться.
- Отображение названия языка: Вы можете выбрать отображение названия языка на основе названия страны или самого языка. Например, вы можете отобразить “Французский” или “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 и настройте селектор языка для улучшения пользовательского опыта.
