Made on tilda english

Made on tilda english

To copy a page, go to the Page Settings → Actions → Duplicate page. To move the page to another website, go to the Page Settings → Actions → Move page.

Unfortunately, you cannot duplicate the whole website. We are planning to add this feature in the future, however.

To create pages in three languages (Russian, English, and German, for example):

— Add EN/DE to the Russian-language website
— Add RU/DE to the English-language website
— Add RU/EN to the German-language website

This way, users coming to your Russian-language website can switch to German or English versions. If they find themselves on the English-language website, they can switch to the Russian and German versions.

It is impossible to create websites with more than three language options without a specialist’s help.

If you have a single-page website and do not need a header (i.e., elements visible across all pages), you can create different versions of the page within one website (you need to have Tilda Free Plan or Tilda Personal Plan to do this).

Create two pages in different languages and add a menu block to either. To add a menu block, go to the Block Library → Menu. You may choose a ME204 block, an adaptable menu block (ME301, ME302, ME303), or a hamburger menu block (ME401, ME402, ME304). After that, open the Content panel of the block, specify the languages, and provide the links to the pages.

Pricing: Plans for everyone

Branding and Marketing Strategist, robbyf.com & The Brand ED Podcast

1. What is the major difference between Personal and Business Plans?
Additionally to all the Personal Plan features, the Business Plan allows you to create up to 5 websites on one account and to export the source code of your project. With the Personal Plan, you can only create 1 website per account.

2. Is it possible to assign my domain to a website that was created on Tilda?
Yes, you can assign your domain! To learn how to do it, read this guide.

3. What does the «export source code» feature in the Business Plan mean?
Your website will be exported to static HTML with all the necessary files (images, css, js). The website will be stored in an archive, and you’ll get a link to download it. Just unzip the files and copy them to your server. You’ll get a website that will be hosted on your server and will not be dependent on Tilda. To learn more, read this guide.

4. What happens if I don’t renew my subscription?
The website will be unpublished, and the data will be stored on Tilda for 6 months. You can renew the subscription and continue to make changes to your project anytime. If you do not renew your subscription after this period, the data will be deleted.

5. What is the difference between a website and a page?
A website may consist of multiple pages (a portfolio, magazine, blog, etc.), or a single page (a landing page, a longform article, etc). The difference is in the settings: the style (fonts, colors) is assigned to the entire website. Also, the domain is assigned to the entire website, not to every individual page.

Therefore, if you make several landing pages or multimedia articles in the same style (fonts, colors, etc), and host them on the same domain, you can use one single website. However, if you want to make several independent pages with different styles assigned to different domains (for example, landing pages for different clients), you will need multiple websites.

6. Do Tilda websites rank well (appear high in search engine rankings)?
Websites built on Tilda are perfectly indexed by search engines by default thanks to the features of the platform: the pages consist of sequential blocks. In addition, you can improve your search results using a variety of SEO tools and settings. Read more about SEO in our Help Center.

7. What is White Label?
If you purchase our annual Personal or Business Plan, you can remove the «Made on Tilda» label that is added to all pages by default.

8. Is there any program for nonprofits?
Yes, we support nonprofit organizations around the world. Learn more about Tilda Grant for nonprofits.

Made on tilda english

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

В новом материале директор онлайн-журнала Platfor.ma Мария Фронощук рассказывает, как создать популярное медиа без инвестиций и сделать нативную рекламу интересной для читателя.

История Platfor.ma началась в 2010 году, когда команда единомышленников решила освещать нестандартные культурные события в городе. Тогда лекций, мастер-классов и курсов новой волны в Киеве становилось все больше, но о них толком негде было почитать. Фейсбук на то время еще не ввел ивенты, традиционные издания мало освещали инди-события, поэтому организаторам и посетителям было сложно друг друга найти. Решением этой проблемы и стал сайт Platfor.ma с афишей всего самого интересного для креативной аудитории.

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

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

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

Made on tilda english

Как создать сайт без кода на Tilda, который завоюет награду: Полный обзор

Аудио перевод статьи

Наличие сайтов в портфолио, отмеченных наградами — отличный способ завоевать доверие клиентов и признание в отрасли.

В этой статье мы покажем вам, как создавать уникальные сайты без кода с помощью Tilda. Это мощная и интуитивно понятная платформа для разработки сайтов для дизайнеров. Для тех, кто хочет самостоятельно делать проекты без кода и без помощи разработчиков, которые часто стоят на пути творческого самовыражения.

Сайты, сверстанные на Tilda, регулярно получают награды Awwwards, CSS Design Awards, CSS Winner и др. экспертов в области дизайна. Дизайнеры выбирают эту платформу для создания всевозможных проектов: привлекательного портфолио, лендинга, корпоративного сайта, интернет-магазина, образовательной платформы, промо-страницы мероприятия и т.д. Tilda предоставляет отличные возможности и свободу верстать первоклассные сайты без кода, которые могут претендовать на самые известные мировые награды.

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

Что нужно сделать, чтобы проект был удостоен награды?

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

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

Давайте подробнее рассмотрим эти задачи и посмотрим, как платформа без кода может помочь в их решении.

1. Разработка уникального дизайна без кода

Если бы вы решили начать рисовать, и вам пришлось бы купить альбом для этих целей, какой альбом вы бы выбрали: с пустыми страницами или разлинованный?

Понятно, что альбом с пустыми страницами, давал бы больше творческой свободы. То же самое и в веб-дизайне: уникальные макеты, скорее всего, будут созданы теми инструментами дизайна, которые не подразумевают никаких ограничений. Однако есть две проблемы: либо разработчик должен быть вовлечен в расходы, но он также является своего рода препятствием, которое стоит между дизайнером и его дизайном; или инструмент должен быть настолько сложным, что процесс его освоения займет дни, недели или даже месяцы. А кто может позволить себе потратить время на изучение одного инструмента?

Уникальные макеты, скорее всего, будут рождены инструментами дизайна, для которых не существует ограничений.

Для создания сайтов без кода Tilda решает обе эти проблемы. С одной стороны, на платформе есть мощный встроенный редактор веб-дизайна Zero Block, позволяющий реализовать любую творческую идею. С другой — у нее интуитивно понятный интерфейс с удобной структурой, поэтому вы можете сразу же приступать к работе, сэкономив огромное количество времени на просмотре учебных роликов на YouTube.

Удостоенное наград дизайнерское агентство The Branx https://thebranx.com делает свои проекты без кода на Tilda.

Tilda была тем первопроходцем среди конструкторов сайтов, который представил принцип создания страниц из блоков. Наряду с коллекцией из более чем 550 адаптивных блоков, таких как меню, онлайн-формы, контакты и т.д., Tilda предлагает инструмент, который сражает наповал — редактор Zero Block. Он обеспечивает полный контроль над контентом и макетом и позволяет создавать нестандартный дизайн сайтов. Это отличает платформу от других конструкторов.

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

«С Zero Block можно делать практически все, и мне это нравится», — Саймон Видерс, веб-дизайнер @SW Designs

📌 Совет от профессионалов: разместите сайт, созданный на Tilda, в разделе Made on Tilda («Сделано на Tilda»), чтобы номинировать его на премию. Там же посетите галерею выдающихся проектов, созданных на данной платформе, которые могут стать для вас источником вдохновения.

Выражайте свои идеи с помощью различных типов контента

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

Поскольку каждый дизайн уникален, для его создания необходим широкий набор элементов: текст, изображения, формы, кнопки, а также видео, всплывающие подсказки, HTML, онлайн-формы, галереи и др. Все они легко настраиваются в Zero Block.

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

В проекте mooosor.ru, удостоенном наград, применяются различные типы контента для того, чтобы рассказать историю бренда с помощью дизайна — Made on Tilda.

2. Превосходный UX

Подготовка первоклассного контента — это уже вызов. Обеспечение удобства для пользователя — это вызов вдвойне. К счастью, есть несколько оптимальных методов, которые могут помочь улучшить UX сайта и дать дизайнеру сверхспособности, необходимые для создания шедевра.

Убедитесь, что ваш дизайн отлично выглядит на любом экране.

Первое, что проверяет любой член жюри (и роботы-поисковики, кстати, тоже), — это то, как дизайн выглядит на различных экранах. Первоклассные сайты должны производить впечатление на пользователя в любой версии, поэтому не торопитесь и тщательно адаптируйте свой сайт.

📌 Совет от профессионалов: недостаточно адаптировать дизайн только для мобильной версии. Вам также нужно учесть планшеты и смартфоны, которые могут отображать сайт в вертикальном и горизонтальном положениях. Сделайте как минимум 5 идеальных версий сайта: десктоп, вертикальный и горизонтальный планшет, вертикальный и горизонтальный мобайл.

Процесс адаптации макета под мобильный вертикальный экран в Zero Block

В Zero Block вы можете переключаться между 5 экранами и вручную на каждом из них настраивать каждый элемент, собственную высоту макета, менять композицию. Однако 100% ручная адаптация может быть утомительной и трудоемкой. Ознакомьтесь с нашими любимыми приемами по оптимизации рабочего процесса проектирования, которые представлены ниже.

Установите положение элементов в пикселях или в процентах.

Для создания композиций с идеальной точностью до пикселя необходимо контролировать положение каждого элемента по оси X и оси Y, а также его ширину и высоту. В графических редакторах в качестве единиц измерения вы бы использовали пиксели. В Zero Block вы можете использовать как пиксели, так и проценты. Установите процент в качестве единицы измерения, чтобы определить положение элемента, которое будет меняться в зависимости от размера экрана.

Привяжите элементы к оси X и Y

Фиксация положения элемента по осям X и Y независимо от того, с какого экрана он отображается, — еще один прием, который экономит время и обеспечивает точность дизайна. Допустим, вы хотите, чтобы логотип всегда отображался в левом верхнем углу. Вы можете установить привязку элемента по оси X и оси Y, выбрав выравнивание по центру, левому, правому, верхнему или нижнему краям.

Настройте автомасштабирование макета.

Вы также можете сделать свой макет адаптируемым к ширине экрана с помощью переключателя автоматического масштабирования. Таким образом, дизайн будет растягиваться и всегда будет занимать 100% окна браузера, даже если сайт проецируется на стену (например, во время церемонии награждения 😉).

Кастомизируйте модульную сетку

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

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

Автоматически превращайте Figma-файл в реальный сайт.

Если вы работаете в Figma, то для вас есть отличная новость. Макет сайта, созданный в Figma, можно быстро превратить в реальный сайт, функционирующий на Tilda, с помощью автоматического импорта в Zero Block. Эта функция избавит от переноса каждого элемента из графического редактора на платформу и ручной настройки макета.

Процесс импорта занимает пару минут: нужно подготовить макет в Figma, получить API-токен и URL-адрес макета в Figma, вставить его в Tilda. Макет сразу же появится в Zero Block. Десктопная версия готова. Осталось настроить мобильные версии, и сайт начнет функционировать. Если вы решите отредактировать макет, его можно изменить или анимировать на свое усмотрение.

‍Как превратить дизайн Figma в сайт Tilda

3. Создание сильных визуальных решений

Типографика влияет на восприятие дизайна, поэтому используйте ее разумно.

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

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

Можно выбрать любой шрифт из встроенной библиотеки со множеством тщательно подобранных веб-шрифтов, включая всемирно известные Futura, Open Sans, Georgia, Roboto, Graphik, а также фирменный вариативный шрифт Tilda Sans. На платформе также предусмотрена возможность легко подключить любой шрифт из библиотек Google Fonts и Adobe Fonts. Кроме того, можно загружать собственные шрифты: от Thin (100) до Black (900) (всего 9 начертаний). Наконец, вы можете загрузить и использовать вариативные шрифты, которые представляют собой отдельные файлы, содержащие бесконечное количество вариаций шрифтовых начертаний.

Добавьте магии вашему сайту с помощью анимации

Анимированные сайты выглядят стильно, создают WOW-эффект и повышают вовлеченность аудитории. Поэтому они на несколько пунктов опережают те, на которых анимация отсутствует. Tilda предоставляет в распоряжение дизайнеров мощные, но простые в использовании инструменты анимации, которые не требуют ни кода, ни каких-либо предварительных знаний. Можно выбрать готовые эффекты (Basic Animation — Базовая анимация), создать собственную анимацию (Step-by-Step Animation — Пошаговая анимация) и тем самым сделать сайт интерактивным.

✨ Базовая анимация:

С помощью базовой анимации у вас есть возможность мгновенно оживить страницу и анимировать элементы по мере их появления на экране. Доступно шесть эффектов: «Появление» (Fade in), «Появление сверху» (Fade in up), «Появление снизу» (Fade in down), «Появление слева» (Fade in left), «Появление справа» (Fade in right) и «Масштабирование» (Zoom in). После того, как вы выбрали эффект из раскрывающегося списка, можно изменить его параметры, такие как Продолжительность (Duration — продолжительность действия эффекта), Расстояние (Distance — расстояние, которое проходят элементы, появляющиеся сбоку), Задержка (Delay — время, на которое можно отложить воспроизведение анимации) и т.д.

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

yinkashonibare-lisicina.site Награды: Made on Tilda, Awwwards Honorable Mention. Креативная анимация по скроллу

✨ Пошаговая анимация:

Можно сделать свой дизайн интерактивным и привлечь внимание посетителей (и жюри) путем настройки анимационных эффектов, запускаемых при нажатии, при наведении курсора, прокрутке страницы и т.д. Эффект не запустится, пока посетитель не выполнит определенное действие, так что хорошей идеей будет добавить подсказку. Например, можно импортировать стрелку в SVG-формате и написать текст: «Наведите на меня курсор».

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

✨ Руководство по веб-анимации:

Если вы хотите анимировать сайт, но не знаете, с чего начать, черпайте вдохновение и используйте некоторые идеи из бесплатного гайда Tilda по веб-анимации. Это коллекция из более чем 25 способов создания анимации с практическими видеоуроками и заранее разработанными шаблонами. Их можно добавить в свой проект и учиться на практике.

4. Знания последних тенденций в сфере дизайна

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

SEO под рукой

Все современные сайты должны быть оптимизированы. Но как оптимизировать их для SEO, не нанимая эксперта? С помощью Tilda вы легко справитесь сами.

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

Все страницы, сделанные на платформе Tilda, хорошо индексируются поисковыми системами благодаря последовательному расположению блоков в коде. Вы можете дополнительно оптимизировать свой сайт с помощью множества простых в настройке параметров: название и описание страницы, ключевые слова и теги заголовков H1, H2, H3, замещающий текст для изображений, бесплатный SSL-сертификат, перенаправления (301/HTTPS/WWW), настраиваемая страница ошибки 404 и т.д. Встроенный SEO-помощник выделит любые возможные ошибки, чтобы их можно было быстро исправить. Автоматически сгенерированные файлы robots.txt и sitemap.xml также помогают повысить рейтинг страниц, ничего для этого не делая.

Убедитесь, что страница быстро загружается

Этот параметр влияет на SEO и явно влияет на UX, поэтому это важный аспект. Он особенно актуален для «тяжелых» сайтов с большим количеством изображений и анимационных эффектов, таких как те, которые претендуют на награды. Что можно сделать, чтобы скорость загрузки страницы оставалась в зеленой зоне? Рекомендуется уменьшить размер изображений перед их загрузкой на сайт (это легко сделать с помощью онлайн-сервисов, таких как TinyPNG). Но многое зависит от платформы.

На Tilda применяются новейшие технологии для оптимизации загрузки изображений и, в конечном счете, ускорения страницы, такие как Lady load, CDN (сеть доставки контента серверов, развернутых по всему миру, которая помогает загружать изображения быстрее), WebP (изображения автоматически конвертируются в next-gen формат), технология адаптивного изменения размера изображения и др.

Защитите свой сайт

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

Кроме того, крайне важно, чтобы вы использовали протокол HTTPS для целей безопасного соединения. Все передачи данных, которые проходят через Tilda, зашифрованы и по умолчанию имеют криптографическое SSL-соединение.

Собирайте пользовательские данные и эффективно управляйте лидами

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

Для эффективного привлечения потенциальных клиентов можно настроить онлайн-формы на Tilda и интегрировать их с более чем 20 сервисами сбора данных, такими как Google Sheets, Trello, Salesforce, Notion, Monday.com и т.д. Кроме того, встроенная бесплатная Tilda CRM пригодится для управления данными потенциальных клиентов.

Принимайте платежи со всего мира.

Если вы собираетесь разработать интернет-магазин, удобство использования становится одним из ключевых факторов, отличающих высококачественный сайт электронной коммерции. На Tilda можно создать полноценный интернет-магазин благодаря встроенному каталогу товаров и корзине покупок, а также настроить способы оплаты, такие как Stripe, PayPal, 2Checkout для приема платежей по всему миру.

Создавайте сайт вместе с командой.

Независимо от того, какой тип проекта вы создаете на Tilda, можно делать это совместно с коллегами. Функция «Соавторы» (Collaborators) позволяет работать в команде: предусмотрена возможность предоставления различных уровней доступа коллегам или добавления клиента в проект в режиме редактора, если он хочет что-то изменить.

Интернет-магазин mensy.tilda.ws, удостоенный наград и сделанный на Tilda (номинант CSS Winner)

Создавайте свой следующий сайт на Tilda без кода, у которого есть все шансы завоевать награду

Tilda — это платформа для создания сайтов без кода, которая позволяет миллионам людей во всем мире разрабатывать сайты, портфолио, бизнес-порталы, лендинги, интернет-магазины, блоги и т.д. Все они имеют шанс на получение международных наград. На Tilda можно реализовывать выдающиеся сайты с помощью более, чем 550 адаптивных блоков и Zero Block, встроенного редактора для дизайнеров. Zero Block позволяет им выразить свое творческое видение проекта и создать уникальный дизайн. И все это упаковано в интуитивно понятный интерфейс.

Предисловие.

Раньше (примерно до 2019 года) эта задача решалась просто: ставишь код от Гугл Транслейт на сайт и все работает. Сейчас Google Translate прикрыл эту возможность, а другие сервисы стали делать это только за деньги.
Я начал разбираться в теме, но ответов как сделать это на Тильде я не нашел. Но нашел статью https://adminway.ru/avtomaticheskii-perevod-vashego-saita-s-pomoshchyu-js-skripta-google-translate где рассказывается как это можно сделать с помощью Ява скрипта или Кверри. Про Кверри я вообще ничего не знаю так как не программист, но с Java script работал еще с начала 2000х, когда делал собственный сайт https://pavel-lyakhov.ru/ (тогда кстати и влез в тему HTML и всего что с ним связано – сайт до сих пор работает, возможно надо перевести его на динамичную CMS, но пока не вижу необходимости)
Не буду описывать всех коллизий моего творческого поиска, пишу что в итоге, в сухом остатке.

Процесс установки авто переводчика на сайт, сделанный в Tilda конструкторе.

Итак, я взял за основу кейс от Vitalii P (https://github.com/get-web/google-translate-custom-widget ), «который написал небольшой код, умеющий переводить сайты на автомате. Используется все тот же инструмент от Google Translate. Разработчики из Google прикрыли только добавление новых сайтов в эту систему, а старые сайты все также могут пользоваться скриптом автоматического перевода сайтов. Этим и воспользовался Виталий.»

В данном примере есть одна загвоздка, не совместимая с Tilda: на Тильда нельзя выложить никакие файлы, а в нашем случае надо куда-то поместить файл google-translate.js (эта ссылка на оригинальный файл от Виталия, но я это файл в итоге переделал, ссылка на него будет дальше).

Что я делал:

1. Файл google-translate.js я выложил на другой сервер и изображения флагов тоже.

2. Изменил в файле google-translate.js одну строку: domain: «Get-Web.Site» на domain: «inpren.ru»- вы пишите туда свой домен без www как у меня в примере (воспользовался рекомендациями из подсказок оригинального файла от Vitalii P). Получилось вот что: https://pavel-lyakhov.ru/js/google-translate.js

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

3. Далее танцы с Тильдой (заходим в админку сайта на Тильде и я показываю скриншоты и пояснения).

4. Заходим в меню «Настройки сайта» и прописываем наши JS крипты в поле

В левом фрейме в низу нажимаем «ещё» и находим «HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD».

Нажимаем кнопку «Редактировать код» и вставляем туда код:

Обращаю ваше внимание, что в четвертой строке мы прописываем адрес, куда вы поместили файл со скриптом, в моем случае это https://pavel-lyakhov.ru/js/google-translate.js (см пункт 2)

5. Прописываем стили в таблице CSS. Доступ в CSS в Тильда там-же: заходим в меню «Настройки сайта» => левый фрейм «ещё» и видим справа ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ => нажимаем кнопку «Редактировать CSS»

Сюда вставляем код стиля:

.language <
position: fixed;
left: 10px;
top: 5%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index:99999999;
>

.language__img:hover,
.language__img_active <
opacity: 1;
>

/* Эта часть отвечает за то чтобы кнопки находились фиксировано на странице*/

/* Эта часть отвечает за то чтобы не было видно надписи – Переводчик Google */

Этот код стиля я изменил: так как в тильде структура сайта послойная, а кнопки смены языков мы вставляем в «Header» (об этом речь пойдет далее), я столкнулся с тем, что кнопки смены языков на некоторых боках были активными, на некоторых нет. Я догадался, что это связано со слоями и нагуглил (блин я фанат Яндекса а не Гугла, но слово «нагуглил» заменить нечем – искал в Яндексе J: https://ru.stackoverflow.com/questions/493552/css-блок-поверх-всего-контента ) что в таблице CSS можно также управлять тем на какой высоте по оси Z находится то явление, которым мы этим стилем управляем. В итоге в коде добавилась строчка:

Еще одно пояснение касательно положения кнопок по вертикали: в исходнике по умолчанию кнопки находятся в центре страницы слева. У меня меню в верху страницы + сайт работает в полосе прокрутке и мне удобнее было поставить кнопки перевода в верхнем левом углу в рамках основного меню. Для этого мен необходимо поднять кнопки по оси Y, за этот параметр отвечает оператор «Top» и отчет он ведет с верху вниз (в оригинале было « top: 50%; » ), я соответственно методом подбора остановился на « top: 5%; »

6. Все, подготовку мы сделали: поселили на свой сервер картинки флагов, файл Java Script, в админке Тильда прописали скрипты в о разделе всего сайта и списали стили которые отвечают за поведение кнопок либо текстовых надписей. Теперь нам надо поставить сами кнопки смены языка (есть вариант «флаги» или тестовый «РУС» «ENG» и тд. – я выбрал картинки флагов)

7. Вставляем кнопки смены языков в Tilda. В моем случае «Шапка» (Header) и «Подвал» (Footer) на всем сайте общие, поэтому я вставляю кнопки в шапку. Если у вас «Шапки» разные, то надо будет в каждую шапку код кнопок вставить.

Заходим в Header

Добавляем блок «HTML код» (T123), я поставил его сразу после меню, но скорее всего это не важно, так как в таблице CSS координаты расположения кнопок.

Как я писал ранее, я выбрал изображения флагов. Кстати их можно менять (берем любое изображение, присеваем ему то же имя, что прописано в коде и сохраняем в папке на вашем сервере, в моем случае в папке https://pavel-lyakhov.ru/images

В итоге мой код для трех языков с флагами стран:

8. Нажимаем «Опубликовать все страницы» в меню сайта