Тильда два языка сайта

Видео:Как сделать мультиязычный сайт, сайт на нескольких языках | Тильда Конструктор для Создания СайтовСкачать

Тильда два языка сайта

И так у нас есть мультиязычный сайт (три одинаковые страницы на разных языках) созданный на платформе тильда. Нам требуется настроить цель на отправку формы и отслеживать на какой именно странице пользователь оставил заявку.

Казалось бы все просто

Есть сайт с тремя страницами:

И форма на сайте, которая передает данные о конверсии в виде виртуальной страницы /tilda/form33952556/submitted

Кажется, все что нужно сделать это три представления под каждую станицу и прописать эту цель.

О настройке целей на тильде Вы можете прочитать в этой статье.

Так как тильда передает данные в системы аналитики с помощью виртуальных страниц кажется все просто.

Но есть небольшая проблема

Тильда по умолчанию передает данные в GA только через просмотр страниц, не учитывая мультиязычность сайта.

То есть при передачи части url, который отображает мультиязычность ( /ru, /pt … ) нет.

А когда мы создаем новое представление и ставим там фильтр к примеру (трафик только по test.io/ru)

Части /ru в передачи нет. И цель соответственно работать не будет.

Для того, что бы решить задачу нам нужно немного подкорректировать тег, который отвечает за отправку виртуальных страниц в google analytics

при оправке данных должна передаваться не только переменная виртуальной страницы, но и переменная части url

Проверяем в режиме предварительного просмотра и если все передается корректно отправляем на публикацию.

Теперь в google analytics мы увидим виртуальную станицу с частью url на которую и будем настраивать цель.

Переходим поведение /// Все страницы

Теперь можно настроить представления с фильтрами и одно обязательно «общее» а также цель на отправку формы.

Создадим представление «RU» и там создадим фильтр

Тип фильтра: встроенный /// включить только траффик в подкаталоги содержащие /ru

В данное представление будет попадать траффик только с test.io/ru

Создадим цель

Тип цели переход /// Регулярное выражение ru/.*tilda/form33952556/submitted

Обратите внимание! У вас соответственно будут ваши идентификаторы форм

Также по аналогии создайте представления для каждого языка отдельно и настройте цели.

Источник

Видео:Мультиязычный сайт на Тильде: мастер-классСкачать

Как сделать мультиязычный сайт

Но, если выбрать удобный инструмент и набраться решимости, то мультиязычный сайт можно сделать самостоятельно. Без мега-опыта и огромных вложений.

Самый распространённый способ – создание нескольких языковых копий сайта на поддоменах или в папках с названиями вроде ru, en, ua, de. Такой способ хорошо подходит для использования во связке с CMS и хостингом. То есть создается нужное количество почти одинаковых сайтов на поддоменах или в отдельных папках основного домена. Это самый надёжный способ, никакой путаницы, но он технически сложен в реализации, особенно в рамках CMS.

Создать нормальный мультиязычный сайт позволит далеко не каждый сервис. Мы отобрали несколько сайтбилдеров, которые способны хорошо решить эту задачу: uCoz, Wix, uKit, SITE123, Tilda, Ucraft. Это не рейтинг по убыванию или возрастанию. Мы хотим показать особенности реализации мультиязычных сайтов в облачных конструкторах. Также для полноты картины мы покажем две CMS – WordPress и Joomla. Завершим сравнение подходов к созданию мультиязычных проектов сайтами, написанными на чистом HTML5.

Видео:Как сделать мультиязычный сайт на тильде | Сайт на разных языках | Тильда конструктор сайтовСкачать

Создание мультиязычного сайта в uCoz

uCoz – самый популярный конструктор на просторах Рунета. Обладает мощным функционалом, позволяет воплотить в жизнь проект любой сложности – от сайта-визитки до огромного интернет-гипермакрета. Фактически это полноценная облачная CMS идущая в комплекте с хостингом и конструктором. Есть полный доступ к исходному коду, FTP, PHP, SEO инструментам и средствам поискового продвижения.

Для создания двуязычного сайта-визитки, состоящего всего из нескольких статичных страниц, наиболее простым и быстрым вариантом будет дублирование всех страниц сайта на втором языке используя «Редактор страниц». Если языков больше двух, в файловом менеджере лучше создать отдельные папки en, fr, de и загрузить в них языковые копии страниц в html формате.

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

Коротко опишем схему создания сайта на нескольких языках:

В целом, решение с несколькими отдельными сайтами несёт в себе больше удобств. На каждый из них можно добавлять статьи асинхронно по мере перевода, материалы могут отличаться. Даже дизайн может отличаться немного для большего соответствия культуре Интернета страны, под которую сделана локализация.

Видео:🌏 КАК СДЕЛАТЬ МУЛЬТИЯЗЫЧНОСТЬ НА САЙТЕ | КАК ДОБАВИТЬ НЕСКОЛЬКО ЯЗЫКОВ НА САЙТ? | POLYLANGСкачать

Создание мультиязычного сайта в Wix

Wix – международный конструктор для создания стильных сайтов-визиток, портфолио и блогов (см. примеры). Базируется на визуальном редакторе, не требует знаний программирования. Функционал рассчитан на неопытных новичков, платформа предлагает более 500 дизайнерских шаблонов различной тематики.

В этом сервисе реализация мультиязычности завязана на использовании приложения Wix Multilingual. Для начала придётся продублировать все страницы сайта столько раз, сколько планируется локализаций сайта. Далее нужно подготовить переводы всех страниц, после чего удалить штатное меню с сайта.

На следующем шаге создаем меню из кнопок и зашиваем в него ссылки на страницы сайта. Опция показа хедера (закрепления) на всех страницах должна быть отключена, поскольку при смене языка меню может исчезнуть со всех страниц кроме главной.

Теперь необходимо из App Market добавить на сайт приложение Wix Multilingual, перейти в его настройки и:

Если всё сделано верно, получится весьма удобный мультиязычный сайт. Главное – качественный перевод страниц. Каждый раз после добавления новой страницы нужно будет создать её дубль с переводом и в приложении Wix Multilingual подключать её, используя первые 4 пункта инструкции.

Да, не очень удобно, но и несложно. Стоит 1 раз сделать, и для следующего уже инструкция не понадобится. Вполне нормальный вариант. В код, по крайней мере, лезть необходимости нет. Для корпоративной визитки – самое то.

Видео:Как сделать мультиязычный сайт на двух языках легко за 10 минут от новичка, новичкамСкачать

Создание мультиязычного сайта в uKit

uKit крайне комфортный вариант для создания мультиязычного сайта компании. Все заботы по техническому обеспечению мультиязычности берёт на себя техподдержка. Бесплатно. Для новичков – идеально.

Когда у вас будет готов сайт на основном языке и переводы его страниц, нужно написать в службу поддержки через обратную связь в личном кабинете. В рамках вашего аккаунта саппорт сделает копию сайта на поддомене основного домена. Локализации будут выглядеть как en.site.org, de.site.org и т.д. Их может быть сколько угодно.

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

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

Видео:Создание мультиязычного сайта на Тильде | Способ копирования сайтаСкачать

Создание мультиязычного сайта в SITE123

SITE123 обладает встроенным функционалом для создания мультиязычных сайтов. Перейдя в общие настройки и выбрав раздел «Языки сайта», нужно обозначить регион и язык сайта по умолчанию и добавить новые в любом количестве.

При добавлении нового языка можно выбрать под него флаг для отображения в шапке сайта и регион для корректного отображения контента для разной аудитории. Можно также разделить поддоменами языковые версии сайта – всё удобно и просто.

В настройках каждого языка нужно ввести переводы страниц. Меню и служебные надписи будут переведены автоматически, но при желании можно будет поправить вручную их локализацию. Интерфейс для перевода удобный: слева размещены оригинальные материалы, справа – поля для вставки переведённых. Вставляем переводы напротив соответствующих полей, сохраняем и всё, локализация окончена.

В общем, у SITE123 всё просто с мультиязычностью. По мере добавления страниц или статей они будут отображаться в разделе для перевода. Хорошая реализация функционала, пользоваться сравнительно легко.

Видео:Какие меню поддерживают переключение языка? | Тильда Бесплатный Конструктор для Создания СайтовСкачать

Создание мультиязычного сайта в Tilda

Tilda позволяет создавать сайты, поддерживающие до 2-х локализаций. Например, английскую и немецкую для русскоязычного сайта. Можно сделать их в виде разных сайтов, а можно объединить 3 языка в рамках одного сайта. Второй вариант подходит только для одностраничных сайтов.

Для создания, скажем, двуязычного сайта, нужно добавить 2 проекта. Сперва, нужно оформить версию на основном языке, а потом скопировать страницы (Настройки страницы → Действия → Дублировать) по одной, перенести их на второй сайт (Настройки страницы → Действия → Перенести страницу на другой сайт) и перевести их. Полностью клонировать сайт на данный момент нельзя. В содержании блока меню к сайтам необходимо указать языки, а также ссылки на сайты.

Одностраничный сайт может обойтись и без шапки (части сайта, которая будут видна на каждой странице, и тоже требует перевода). Можно создать 2-3 языковые версии одностраничника и в содержании блока меню указать ссылки на странице и языки – так же, как и в 1 случае.

В Tilda локализация организована не очень удобно из-за необходимости постраничного дублирования сайтов. В остальном – вполне рабочий вариант.

Видео:КАК СДЕЛАТЬ САЙТ НА ДВУХ И БОЛЕЕ ЯЗЫКАХ В ВОРДПРЕСС?Скачать

Создание мультиязычного сайта в Ucraft

В Ucraft Мультиязычность реализована из коробки. В «Дашборде» есть пункт «Языки», английский язык сайта активирован по умолчанию. Можно добавить любой язык из огромного списка, код, название и приставка для URL будут сгенерированы автоматически. Все служебные надписи сайта получат перевод на выбранный язык автоматически.

Теперь нужно перевести контент и добавить его в дубликаты страниц на разных языках. После добавления языка система автоматически создаёт копии страниц. Переводы можно добавить в разделе «Страницы». Внизу отобразится переключатель языков, а в основной рабочей области – все страницы данной версии сайта. Выбираем нужный язык и добавляем переводы для соответствующих страниц.

После добавления новой страницы на языковую версию сайта по умолчанию, копии страницы будут автоматически добавлены и в остальные версии. Конечно, их можно удалить или скрыть, если, скажем, в английской версии сайта нет какого-нибудь раздела. Или наоборот – добавить вручную в одну из копий страницы, которых нет в других версиях. В общем, языковые версии сайта могут отличаться по содержанию, если нужно. Этим удобно управлять.

Переключатель языков на сайт нужно добавить отдельно в качестве виджета в редакторе сайта. В целом, в Ucraft создание мультиязычного сайта организовано крайне удобно.

Видео:Обучение на Тильда. Урок 2. (Настройки сайта)Скачать

Создание мультиязычного сайта в WordPress

CMS WordPress предоставляет огромное количество вариантов организации мультиязычного сайта. Подходы разные, отличаются по сложности реализации, удобству и стоимости. Если у вас есть какой-нибудь опыт работы с этим движком, то проблем возникнуть не должно. А даже если и нет, то всегда можно разобраться с нуля – инструкций в Сети полно, WP далеко не самая сложная CMS.

Для движка создано много готовых шаблонов, в которые из коробки вшиты многоязычные системы. То есть темы оформления, содержащие несколько вариантов перевода интерфейса. Как правило, список языков указан в документации. В некоторых переведён только фронтэнд, в других – ещё и админка, хотя это не обязательно, поскольку в стандартных настройках WP и так можно менять языки панели управления. Русский, английский, немецкий, французский – какой угодно, поддерживаются десятки языков.

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

Приведём несколько примеров хороших вариантов для машинного перевода сайтов:

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

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

Многие плагины бесплатные в базовом варианте, но за допфункции придётся доплачивать – обращайте внимание на этот момент. Конечно, платные плагины, в среднем, удобнее и мощнее бесплатных. Если позволяет бюджет, лучше купить один из них. При выборе обращайте внимание на рейтинг и отзывы. Плагины имеют разные интерфейсы и схожую логику использования, по любому из них нетрудно найти мануалы – проблем с освоением не возникнет.

У Вордпресса таже есть встроенный инструмент для создания мультиязычных сайтов – Multisite. То есть можно решить задачу без плагинов. Система создаёт указанное количество копий сайта, которые не имеют собственных директорий на хостинге, зато создаёт свои таблицы в базе данных и обладают индивидуальные каталоги для загрузки картинок, видео и прочих файлов.

Можно использовать поддомены или отдельные домены, но при они должны быть расположены на одном хостинг-сервере, кроме того, потребуется установка одного дополнительного плагина – WordPress MU Domain Mapping. Минус подхода в сложности управления, интерфейс довольно сложный, есть риск запутаться, особенно при работе с большим количеством контента и локализаций. Тем не менее, способ надёжный, имеет право на жизнь.

В целом, WordPress отлично подходит для разработки мультиязычных сайтов любой сложности и типа – блоги, визитки, магазины – без разницы. Способов реализации задумок море, главное – выбрать оптимальный. Также не стоит забывать о качестве хостинга – мультиязычные сайты создают большую нагрузку на сервер по сравнению с обычными ввиду увеличенного объёма базы данных, да и сами плагины потребляют ресурсы. Итого, вам потребуется: хороший шаблон с поддержкой нужных плагинов, мультиязычный плагин, домен и надёжный хостинг.

Источник

Видео:Делаем два красивых блока для сайта на ТильдеСкачать

Кейс веб-студии: Фирменный стиль и имиджевый мультиязычный сайт исполнителя поп-музыки на Тильде

Мы — веб-студия «Quadro». Рассказываем о том, как проходил творческий процесс, какие фишки использовали и делимся секретами

Перед нами стояла задача: создать стиль и имиджевый мультиязычный сайт для певицы Стеллы Серебрянниковой. На данном этапе нужен простой ресурс, где пользователи могут послушать музыку, посмотреть видеоклипы и при необходимости связаться с певицей.

Самое сложное было — понять и отразить японский стиль смешанный с киберпанком и техно-ретро, который соответсвует сценическому образу Стеллы.

Мы разработали фирменный стиль для Стеллы, а также разработали мультиязычный имиджевый сайт с прикольной визуализацией

Она простая девушка из Евпатории (Крым) — именно там начинала свою карьеру. Но уже несколько лет живет и работает в Японии. И сейчас ее песни популярны на нескольких континентах, а их стиль близок к современной поп-музыке, но с особым изяществом.

Мы разделили работу на несколько этапов: анализ, творческая часть и техническая. И прежде чем перейти к технической части — мы сделали брендбук, оформили YouTube и SoundCloud. Заложили фундамент для дальнейшей работы других PR-служб.

Мы проанализировали рынок: посмотрели сайты всех популярных исполнителей и музыкантов, чтобы найти интересные решения и понять, как они себя позиционируют. Получилась вот такая большая карта в Miro с скриншотами сайтов

В итоге мы остановились на трех певицах Зиверт, Сюзанна и Лобода. У Зиверт подсмотрели использование шрифтов, с Сюзанной совпала японская тематика, а у Лободы нам понравилось использование цветов.

Анализ конкурентов помог посмотреть на рынок со стороны и понять, в каком направлении двигаться дальше.

Так мы начали разработку собственного стиля Стеллы. Мы обратились к синтезаторной музыке Японии 80-х годов и сразу определили, что будем использовать холодный и теплый цвета. Решили, что сделаем в стиле техно-ретро. Тем более образ Стеллы близок к этой «киберпанковской» тематике.

Когда думали, какие оттенки цветов будем использовать, нам попались кадры из фильма «Призрак в доспехах». Там и урбан тематика, и стимпанк, и японское техно в современном прочтении.

Получилось четыре цвета: черный, прозрачно-белый, красный и мятный.

Стимпанковский-японско-платье-синтезаторно-красный и кинематографично-зелено-призрачно-утопически-циановый

Нашу палитру сверили с цветами Светланы Лободы, чтобы не было совпадений.

Примерили новые цвета на фотографию Стеллы, чтобы посмотреть, как она будет выглядеть в новом стиле с этими цветами. Взяли главное изображение и спроецировали цвета на него.

Так получилось 4 основных цвета и свой отличительный стиль.

Для одного за пример взяли начертание как у Зиверт, а второй сделали в Японском стиле.

Фирменные цвета, размеры шрифтов и все, что нужно для создания сайта упаковали в небольшой брендбук.

Для YouTube мы сделали фон канала, логотип и обложку для видео. Основная задача состояла в том, чтобы обложка хорошо выглядела в любом формате: через телефон, ноутбук, планшет. У нас получилось.

Так как мы собирались загрузить музыку Стеллы в SoundCloud, чтобы встроить виджет на сайт, нам было необходимо визуально оформить аккаунт и в этом сервисе.

Анализ, который мы делали в начале, помог определиться со структурой сайта: главная страница, о певице, музыка, видео, контакты. Мы составили чек-лист со списком материалов, которые нам нужны, и отправили клиенту. Как получали материалы — добавляли их на сайт.

Нам повезло, что Стелла – натура творческая. У нее в портфеле оказалось много интересных фотографий с фотосессиий.

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

Полученный в конструкторе код разместили на сайте и с помощью скрипта вставили в Zero Block.

Мы хотели, чтобы пользователи могли прослушивать музыку, не уходя с сайта, поэтому на страницу с музыкой мы встроили виджеты SoundCloud.

Загрузили аудиофайлы в SoundCloud, заполнили название и описание, в меню «share», если выбрать вариант «embed», то появится код, который можно вставить на сайт.

На странице с видео мы вставили видео из YouTube, чтобы пользователи могли смотреть клипы, не уходя с сайта. А чтобы страница выглядела интересно, добавили превью видео в качестве анимации. Это стандартная триггерная анимация: по наведению верхний элемент становится прозрачным, поэтому становится видно заранее загруженную гифку.

Многие считают, что в сайтах на Тильде как-то плохо работает SEO, но это не так. Или не совсем так. В данном случае, действительно сайт можно оптимизировать под поисковики, если вручную прописать мета-теги. Тогда роботы будут различать, какие страницы и к каким языкам относятся.

Так как мы делали сайт на трех языках: русский, японский и английский — прописывали теги alternate и hreflang для всех страниц.

Пример кода для главной страницы:

Основная сложность была в том, что Стелла постоянно в перелетах, так что бывало приходилось созваниваться ночью.

С клиентом мы общаемся по скайпу, демонстрируем экран и обсуждаем результат работ в реальном времени. Так процесс согласования идет быстрее, обсуждаются все нюансы и позволяет быть на одной волне.

У нас было три презентации: стиль, главная страница сайта и проект в целом.

Пишите в комментариях что думаете о проекте, о Тильде или другие вопросы!

Источник

Видео:Делаем мультиязычный сайт c JavaScriptСкачать

Чем хорош сайт на Тильде? И почему не надо лезть в дорогостоящие решения

Не часто приходится замечать решения предложенные на платформе Tilda, а зря. Почему так? Что такое вообще Tilda и для кого она?

Публикация составлена совместно с командой Годунова.

Сразу отметим, что данный материал ни в коем случае не является рекламным, а представляет из себя анализ Тильды, как решение для бизнеса.

По факту в более чем 50% случаев от всех задач бизнеса в медиа пространстве, ваш сайт не нуждается в том, чтобы он был разработан кодом. Не обязательно ставить такие условия где необходимо будет привлекать верстальщика или программиста. В таких проектах обычно нуждается средний или крупный бизнес, так как к тому времени у компании сформировалось представление и сложные многоуровневые задачи, которые решаются только таким же сложными решениями.

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

Во-вторых, скорее всего меня могут закидать тухлыми помидорами, но серьезная компания не будет стараться «выгрызать» серьезный сайт за условные 20.000 рублей. Тут 2 пути: или компания не такая серьезная, или же у директора нет понимания, что такое сайт и для чего он нужен.

2. «Не, Тильда не подойдет, у нее слишком урезанный функционал. »

Отсюда вы сразу сможете понять профессионализм человека с которым обсуждаете будущий сайт еще на этапе брифинга. И насторожиться в случае если вам не задали ни одного вопроса относящегося к вашим пожеланиям, но почему-то сразу назвали тильду.

Тогда скорее всего вы общаетесь с командой, которая работает только на этой платформе или же с непрофессионалом.

Теперь, когда мы прониклись всей серьезностью данного решения. Сформулируем реальную ситуацию и ряд задач с которыми пришлось столкнуться заказчикам.

Рассмотрим параллельно 2 ситуации, которые могут показаться разными, но по факту объединены одним и тем же.
1. Заказчик не имеет серьезного бюджет, но ему срочно необходим небольшой сайт для мероприятия, которое стартует уже в конце недели.
2. Заказчик имеет серьезный бюджет, но у него отсутствуют амбициозные задачи и в целом планы на будущий сайт. Сроки не превышают 14 дней, но для простоты понимания давайте приведем также к 7 дням.

Задача
По факту перед нами стоит задача, как сделать симпатичный MVP-проект, в срок не превышающий 7 дней.

«Да, давайте здесь не будем заострять внимание и формировать представление, что вся web-разработка такая же быстрая и не затратная. В данной ситуации разбираются частные случаи, чтобы показать, что даже казалось бы в безвыходной ситуации есть решение»

День 1. Подбор референсов и обсуждение проекта
Для экономии времени и ресурсов приступаем к аналитике, но акцентируем внимание только на самых важных моментах, а именно:

Конец дня ознаменовывается обсуждением выбранных решений с заказчиками. На каждый из этапом тратим примерно по 2 часа.

День 3-4. Дизайн
На данном этапе делаем акцент, выделяя под него 2 суток. Так как он является самым основным в рамках работы на Тильде. Определяемся с 3 наиболее интересными и продуманными работами в данной нише, предварительно все это согласовав с заказчиками. Первый день занимает подбор и поиск будущих элементов сайта, а именно:

Все должно быть объединено общей идей, сочетаться между собой, что также отсылает нас к проработке первичной логики по которой уже идет дальнейший отбор элементов. На чем первый день удачно заканчивается. Собрав бэкграунд элементов, вспоминаем о тех исходных работах, которые мы взяли, как ориентир. После чего объединяем удачные идеи этих сайтов с теми элементами, что мы нашли, находясь в свободном плавании на ресурсах для дизайнеров.

Источник

🔥 Видео 🎦

Ваши сайты на Tilda №2 | Тильда конструктор сайтовСкачать

Мультиязычный одностраничник (Landing Page), страницу на нескольких языках | Конструктор ТильдаСкачать

Мультиязычный сайт на WordPress за пол часа 📍Polylang - Обзор плагинов Wordpress 5.3Скачать

Как сделать сайт мультиязычным за 5 минут?Скачать

Не делайте так! Мультиязычность на сайтеСкачать

Как самому сделать сайт без программирования с нуля?Скачать

Как сделать меню второго уровня в Tilda?Скачать

10 сайтов на Тильде для вдохновения. Выпуск #2Скачать

Tilda. 2/4 Переключатели, вкладки тильда. ИНТЕРНЕТ МАГАЗИН В ТИЛЬДЕ.Скачать