Копирование сайта на Tilda: всё, что нужно знать для успешного переноса

В статье рассмотрели способы, как скопировать сайт на «Тильде»: описали необходимые шаги от переноса контента до настройки дизайна.

«Тильда» — это сервис, который помогает создавать и публиковать небольшие сайты: лендинги, визитки и другие. Иногда нужно перенести готовый сайт на эту платформу или, наоборот, перенести веб-проект с Tilda на другой сервис. Это может вызвать затруднения. Если вам нужно перенести сайт, воспользуйтесь нашей инструкцией.

Копирование сайта из Интернета на платформу «Тильда»

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

Сайт конструктора Tilda

Сторонние сервисы

Есть платные и бесплатные ресурсы копирования.

Octopus

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

Ключевые возможности:

выгрузка HTML, CSS и JavaScript: получаем базовую модель для Zero-блока;
все картинки, медиафайлы и ресурсы сохраняются и загружаются в конструктор для последующей работы;
есть опция настройки фильтров для сбора только нужных элементов.

Недостаток в том, что после выгрузки придётся вручную корректировать полученный результат, настраивать дизайн, корректировать HTML и интегрировать CSS для работы в Zero-блоке.

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

Страница сервиса Octopus

JustCopy

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

Основные возможности:

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

Хотя JustCopy значительно упрощает процесс, после переноса всё равно требуется доработка: настройка шрифтов, кнопок, анимаций и других элементов дизайна для точной интеграции в вашу версию сайта на «Тильде».

Сайт JustCopy по ссылке

Резюме
Octopus подойдёт тем, кто готов работать с кодом и самостоятельно вносить изменения. JustCopy же предложит автоматизированный процесс с минимальной доработкой, но за плату.

Копирование своими силами

Это довольно кропотливое занятие. Вы можете пойти двумя путями:

Занимаетесь созданием аналогичных элементов, используя Zero-блоки или готовые шаблоны, благо конструктор располагает большим арсеналом средств визуальных, архитектурных, анимационных.
Импортируете код. В Zero-блоке можно использовать HTML, CSS и JavaScript для кастомизации.

1. Импорт HTML-кода

Он копируется прямо в Zero-блок, и вы переносите уникальные компоненты, которые недоступны в стандартных блоках «Тильды».

Откройте Zero-блок.
Выберите часть, которую хотите редактировать, или создайте новую.
В панели инструментов выберите «HTML-код» и вставьте его в специальное окно.

Пример:

<div class="custom-element">
<p>Hello, world!</p>
</div>

Просмотр HTML-кода копируемого сайта:

запустите страницу в браузере;
нажмите правой кнопкой мыши в нужной области;
выберите «Просмотр кода» или Inspect в списке (название может варьироваться в зависимости от браузера);
наведите курсор на HTML-код страницы, и его соответствующий фрагмент будет подсвечен в панели;
скопируйте его и вставьте в Zero-блок в разделе для HTML.

Это создаст простой вариант содержимого, который можно затем стилизовать.

2. Использование CSS

CSS позволяет управлять внешним видом компонентов. В Zero-блоке можно добавить внешний файл стилей.

Где найти CSS

Вновь обращаемся к поисковым системам.

В Google Chrome правой кнопкой мыши выбираем «Просмотр кода» или Inspect. Можно использовать F12 или Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac).

В «Яндекс Браузере» процесс аналогичен: правой кнопкой мыши выбираем любой элемент страницы, далее нажимаем «Просмотреть код». Альтернатива ― F12 и Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac). Эти сочетания клавиш откроют панель разработчика.

Поиск CSS-файлов:

в панели управления найдите Network (или «Сеть» в русской версии). Здесь отображаются все ресурсы, загружаемые страницей.
Обновите её, используя F5 или значок обновления.
В списке загружаемых файлов нужно расширение .css. Можно использовать фильтр для просмотра только CSS. Выберите нужный файл, чтобы просмотреть его содержимое и увидеть, какие стили он содержит.

После того как вы нашли и скопировали нужные CSS-стили, откройте проект в «Тильде».

Перейдите в раздел для настройки блоков или в Zero-блок для применения стилей.

В поле для пользовательского CSS вставьте скопированные стили через «Настройки» → «Дополнительные настройки» → «Кастомный CSS».

Нажмите «Сохранить» или «Применить изменения».

3. JavaScript для добавления интерактивности

JavaScript помогает сделать веб-проект «живым», обеспечивая реакцию элементов на клики или добавляя анимацию.

Источник кода

В Google Chrome или «Яндекс Браузере» выберите правой кнопкой мыши «Просмотр кода» или Inspect. Отобразится HTML-код выбранного участка. Он покажет, какой элемент выбран, но не всегда сразу даст доступ к JavaScript, который управляет анимацией или другим действием.
Иногда прямо в HTML есть ссылка на JavaScript-файл. Но чаще всего анимация и другие интерактивные действия находятся в отдельных .js файлах.
Перейдите во вкладку Sources или «Источники». В списке найдите файл с расширением .js, который управляет интерактивностью. Найдите тот, который отвечает за нужное действие (анимацию или нажатие на кнопку). Ищите код, который содержит имя класса или идентификатора нужного элемента. В HTML они показаны как class=»button» или id=»animate-box». Это важно, потому что JavaScript-код обычно «привязывается» к объектам через их классы или ID.
Часто код анимаций или интерактивных эффектов содержит ключевые слова, которые подсказывают, что он делает для:
- кликов слова вроде onclick, addEventListener(‘click’);
- анимаций слова, связанные с движением или изменением стилей ― animate, style, transform, fade.

Скопируйте код или участок кода, соответствующий нужному компоненту — Ctrl+C или Cmd+C.

Как добавить код в Tilda

В настройках Zero Block найдите раздел с названием HTML, Custom Code, JavaScript или что-то подобное. В него вставляем свой JavaScript код.

Пример запуска функциональности кнопки при нажатии:

html

Копировать код:

<script>
document.querySelector('.custom-element').onclick = function() {
alert(Элемент был нажат!);
</script>

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

Перенос сайта с другой платформы на «Тильду»

Копирование с другой платформы или из Интернета — это разные процессы. При переносе с WordPress, Wix или другой CMS можно получить доступ к исходным данным, таким как тексты, изображения, а иногда и шаблоны, что позволяет это сделать более упорядоченно и адаптировать его для «Тильды».

У клиентов хостинга AdminVPS есть бесплатный доступ к конструктору сайтов на сайте провайдера.

Перенос изображений

Следуйте по шагам:

Сохраните изображения с исходного сайта, щёлкнув на него правой кнопкой мыши и выбрав «Сохранить изображение как…».
В «Тильде» выберите блок для вставки изображения, нажмите «Загрузить» или «Добавить изображение» и загрузите файл. После загрузки можно настроить размеры, обрезку, выравнивание и другие параметры.

Формы и анимации придётся воссоздать с нуля, используя встроенные инструменты конструктора.

Копирование страницы внутри самой «Тильды»

Откройте Tilda и перейдите в раздел Pages («Страницы»).
Найдите страницу, которую нужно перенести. Наведите курсор на её название и выберите иконку с тремя точками.
Нажмите Duplicate или «Дублировать». Копия будет создана.
В настройках дубликата измените название и URL страницы.
Запустите дубликат и редактируйте его. Сохраните и опубликуйте страницу.

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

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

Читайте в блоге: