Автоматический переводчик для сайтов на Tilda
Данная модификация позволяет установить виджет автоматического перевода вашего сайта на другие языки
Пример использования данной модификации вы можете увидеть, выбрав язык в виджете 🠒
Пример использования данной модификации вы можете увидеть, выбрав язык в виджете
Этот блок здесь для того, чтобы вы смогли увидеть пример работы модификации
Когда вы выберет необходимый язык в виджете, вся страница автоматически будет переведена на него. Чтобы отменить перевод, выберите русский язык
Инструкция по установке модификации
1. Cкопируйте код № 1 и вставьте его внутрь <head> в настройках вашего сайта:
Код №1
<script src="https://cdn.jsdelivr.net/gh/VladislavLand/tildatranslate@27855db491c2b3385a3dc3bd4f667acb5ffb5b09/multilingualtilda.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { const translatedAccordions = new WeakSet(); function translateElement(el) { if (window.google && google.translate && google.translate.TranslateElement) { new google.translate.TranslateElement({}, el); } } function handleAccordionClick(accordionSelector, contentSelector) { document.body.addEventListener("click", function(e) { const accordionItem = e.target.closest(accordionSelector); if (!accordionItem) return; const content = accordionItem.querySelector(contentSelector); if (!content || translatedAccordions.has(content)) return; const maxWait = 1000; const transitionDuration = parseFloat(getComputedStyle(content).transitionDuration || "0") * 1000; setTimeout(() => { translateElement(content); translatedAccordions.add(content); }, transitionDuration || maxWait); }); } handleAccordionClick(".t585__accordion", ".t585__content"); handleAccordionClick(".t668__accordion", ".t668__textwrapper"); }); </script> <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 2. Создайте в нужном вам месте shape или кнопку с классом vladislavland (нажимаете правую кнопку мыши на вашем элементе и выбираете "Add CSS Class Name" и вставляете туда необходимый класс), это будет ваш виджет перевода;
Чтобы скопировать класс vladislavland, просто нажми на кнопку ниже.
vladislavland
3. Настройте внешний вид вашего виджета в генераторе кода;
4. Скопируйте получившийся код № 2 и вставьте его в шапку / подвал вашего сайта.
Генератор кода:
<style> /*Мультиязычный сайт на Tilda: https://vladislav-land.ru/multilingual*/ .vladislavland { position: relative; display: inline-block; background: none; border: none; padding: 0; } #langBtn { position: absolute; top: 0px; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; font-family: Mulish; font-size: 14px; font-weight: 500; color: #FEFEFE; padding: 0 10px; margin: 0; box-sizing: border-box; background-color: #1b1b1b !important; border: 2px solid #F9CD46 !important; border-radius: 9px !important; cursor: pointer; } #langBtn img { width: 18px; height: 18px; display: block; } #google_translate_element { position: absolute; top: 50%; right: 0; padding: 10px; z-index: 9999999; display: none; width: auto; height: 1px !important; margin-top: 0px; opacity: 0 !important; } .goog-te-gadget-simple { background: none !important; border: none !important; } .goog-te-gadget-icon, .goog-te-gadget span[style*="border-left: 1px solid rgb(187, 187, 187)"], .goog-te-gadget-simple .goog-te-menu-value, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc, .VIpgJd-suEOdc, .VIpgJd-yAWNEb-L7lbkb { display: none !important; } .goog-te-menu-frame { display: block !important; position: static !important; margin-top: 0 !important; } .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon { display: none !important; } body { top: 0px !important; } .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q{ background-color: unset !important; box-shadow: none !important; } </style> <button id="langBtn" aria-label="Выбрать язык"> <span id="langCode">RU</span> <img id="flagImg" src="https://static.tildacdn.com/tild3930-3039-4463-b536-666463383031/photo.png" alt="RU"> </button> <div id="google_translate_element"></div> ВАЖНО!
- Внутреннюю часть виджета (сам выбор языка) кастомизировать не получится, поскольку в данном решении мы привязываемся к Google Translate, в котором запрещено изменять его внешний вид;
- Поскольку в разных языках длина слов / предложений будет разной, некоторые элементы на сайте будут визуально «съезжать» в разных языках.
- В моем примере 5 языков на выбор: Русский, Английский, Французский, Китайский (упрощённый), Казахский. Если какой-то из языков вы хотите убрать, либо, наоборот, хотите добавить другие языки, вы можете связаться со мной и я помогу вам.
Дополнение к инструкции
Если для каких-то элементов на сайте вам не нужен перевод (например, промокоды, какие-то технические описания товара и т. д.), просто задайте таким элементам класс notranslate.
Это работает с элементами внутри zero-блоков. Если вы используете блоки из библиотеки, тильда сама подставит класс notranslate к текстам, которые не будут переводиться никогда (например, артикул товара).
Чтобы скопировать класс notranslate, просто нажми на кнопку ниже.
notranslate
Видеоинструкция:
YouTube
RuTube
VK
Нужна уникальная модификация?
Просто заполните форму и я свяжусь с вами
Там я делюсь полезной информацией и бесплатно учу дизайнеров продавать на высокие чеки
Подпишитесь на telegram-канал Vladislav Land, чтобы всегда быть в курсе всех обновлений
Бесплатно учу дизайнеров продавать на высокие чеки →
