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