Как загрузить html файл на сайт тильда

Обновлено: 03.07.2024

Если вы находитесь на этой странице, то вы приняли решение попрощаться с Тильдой и дальше вести его самостоятельно на своем хостинге.

Что теряет пользователь после переноса сайта с Тильды на свой хостинг:

Правила Тильды об экспорте сайта на свой хостинг:

Итак, обо всем предупредил. Если желание не пропало, к делу.

Экспорт сайта из Тильды

Выбор хостинга

Это сравнительно недорогие хостинги с оптимальными функциональными решениями и хорошей тех. поддержкой.

Процедура экспорта с Тильды

Переходите в настройки сайта:

Сначала необходимо указать домен, который будет подключен к сайту на вашем хостинге. Заходите во вкладку Домен в левой боковой панели и введите свой домен:

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

Дальше начнется формирование файла для скачивания вашего сайта на Тильде. После того, как индикатор дойдет до 100%, появится ссылка на файл:

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

Распаковка архива сайта с Тильды на хостинге

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

Заходите в панель управления своего хостинга под своим логином и паролем.

Эта папка должна быть пустой. Если нет, то удалите все там.

Теперь приступаем непосредственно к распаковке:

Теперь вам нужно загрузить архив сайта, который вы получили из Тильды:

После закачивания архива дважды кликните по нему для распаковки:

Появится новая папка. Зайдите в нее:

Теперь найдите файл htaccess. Его нужно переименовать в .htaccess

Если вдруг остались еще вопросы, советую пересмотреть еще наше видео по этой теме:

Один отзыв для “ Перенос сайта на Тильде на свой хостинг. Пошаговое руководство ”

Открой «Библиотеку блоков» → «Другое» и добавь блок «T123. HTML-код». В режиме редактирования («Контент») сможешь добавить код.

Код будет работать на опубликованной странице.

Код в блоке T123 применяется на страницах, где размещен блок с кодом. Сам код вставляется в body страницы. Если код нужно вставить в head конкретной страницы, то размести его в настройках страницы. Если код нужно применить на всех страницах сайта, то размести его в настройках сайта в head или body.

Блок T123 с CSS (тег <style>) размещай перед блоком, к которому он применяется. Тогда во время загрузки контента пользователь не увидит, как применяется код, т. е. сразу увидит блок в задуманном дизайне.

Блок T123 с Javascript (тег <script>) размещай внизу страницы или после блока, к которому он применяется. Это нужно для оптимизации загрузки страницы. Пока скрипты грузятся, то пользователь видит пустой экран или недогруженный контент. Чтобы этого избежать, размещай скрипты после блока, а лучше внизу страницы.

Вставка кода в настройках страницы

В настройках страницы можно добавить HTML, CSS и Javascript.

Открой «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head».

Опубликуй страницу после добавления кода, чтобы он применился.

Код пропишется в head страницы и примениться только на этой странице.

Для оптимизации скорости загрузки страницы не стоит прописывать Javascript в head страницы, если этого не требует инструкция по добавлению кода.

Вставка кода в настройках сайта

В настройках сайта можно добавить HTML, CSS и Javascript.

Чтобы добавить код в head на все страницы открой: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».

Чтобы добавить CSS в body на все страницы открой: «Настройки сайта» → «Еще» → «Пользовательские CSS-стили».

Опубликуй все страницы сайта после добавления кода.

Tilda — востребованный и функциональных конструктор сайтов. Но у неё есть недостатки. Например - проблемы с работой обратной связи. Разбираемся как с этим быть.

Тильда, по сравнению с другими конструкторами сайтов, даёт простор для работы с фидбэком: 10-ки тонко настраиваемых форм, интеграции со всем: от мессенджеров и почты до сервисов по рассылке и CRM. Формы в подвале, обложках, поп-апах, отправка целей, внутренняя Tilda-CRM.

Плохо лишь одно — это изобилие развалится при экспорте Тильдо-сайта на сервер, чтобы перестать платить минимум 6 тысяч в год.

Возьмём пример: студия делает симпатичные сайты и лендинги на Тильде. На тарифе Personal (6000 руб/год) хостится максимум 1 сайт, на Bussines (12 000 руб/год) - 5. Когда количество сайтов переваливает через очередное ограничение порога, возникает потребность покупать дорогой тариф. Конец у этой гонки — тариф на 30 сайтов, который стоит 80 тысяч рублей в год.

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

перестают работать все способы обратной связи;
у вас пропадает CRM;
перестаёт работать отправка достижений целей в систему аналитики — в Тильде она реализована как просмотр отдельной страницы в её структуре.

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

Виджеты Тильды

В самой Тильде сделать обратную связь довольно просто:

выберите подходящий шаблон блока в категории «Форма и кнопка»;
в настройках задайте ширину и положение блоков формы, отступы, стили полей, кнопок и текста формы.

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

Плюсы и минусы стандартных форм ТильдыПлюсы:

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

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

Формы Яндекс и Гугл

Многие в поисках спасения обращаются к самому очевидному варианту — сервисы для создания форм от Яндекса и Гугла. Оба варианта реализуются вставкой готового кода через блок тильды «HTML-код».

Яндекс.Форма на Тильде

Создадим простой фидбэк через сервис Яндекса:

Плюсы:

бесплатно;
интерфейс простой и понятный;
лёгкая интеграция с метрикой.

Минусы:

подходит больше для анкетирования и сбора данных;
никаких интеграций — Яндекс не выпускает заявки за пределы своих сервисов. Данные можно отправлять на Я.Почту, Я.Трекер и Я.Вики.
шаблонный дизайн. Сделать что-то свое -невозможно.

Гугл Формы + Тильда

Но в этом случае данные нельзя получить даже на почту — только обрабатывать внутри сервиса.

Написать форму с нуля

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

К сожалению, в рамках этой статьи разобрать всё многообразие задач со всеми блоками форм тильды не получится точно (полная инструкция есть здесь), но поделится простым рецептом восстановления работы экспортированной формы мы можем:

Плюсы:

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

Минусы:

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

Платные и условно бесплатные сервисы

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

Плюсы бесплатных версий:

минимум времени на создание;
бесплатно;
у многих есть плагины для популярных CMS;
редко - дополнительные плюшки.

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

10 - 100 заявок в месяц, привязать к CRM невозможно;
шаблонный дизайн (вы не сможете сохранить дизайн формы);
ремарка или ссылка на сайт-сервис и т.д.

Среди всего многообразия платформ привлекает QForm24 (это мы). Во-первых, сервис полностью бесплатный, и не перестанет им быть — дополнительный платный функционал только в разработке и не будет обязательным.

Пример жёстких ограничений на популярных конструкторах форм

Плюсы:

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

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

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

Если HTML и CSS вас не пугают, вы знаете, зачем нужны классы и id, то нажмите на кнопку ниже, чтобы не отвлекаться на экскурс в вёрстку. Кнопка отправит вас сразу к месту, где разберём пару примеров того, что можно сделать в Тильде, не проходя ни одного курса по программированию.

Вёрстка страницы — это просто работа с объектами, которые на ней расположены: заголовки, текст, изображения. С помощью кода мы говорим им, что они должны содержать, как выглядеть и как вести себя. Обычно за это отвечают HTML, CSS и JavaScript.

HTML — базовый язык разметки. Обычно с помощью HTML просто задают объекты на странице, их расположение и наполнение. Размечают текст на заголовки и абзацы, расставляют ссылки в нужные места, определяют положение картинок и других объектов относительно друг друга. Например, создадим какой-нибудь текст в абзаце. Абзац в HTML — это p, paragraph
<p> Какой-то текст </p>

С помощью стилей можно менять отступы, размер, цвет, тень, размытие объектов. Иногда для удобства стили выносят в отдельный CSS файл. При этом можно оставлять их прямо внутри HTML — это нормальный способ, мы так и будем делать в примерах. Например, добавим для абзаца стиль «цвет текста — красный»:
<style> p </style>

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

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

HTML — базовый язык разметки. Обычно с помощью HTML просто задают объекты на странице, их расположение и наполнение. Текст в заголовки и абзацы, ссылки в нужные места текста, положение картинок и других объектов относительно друг друга. Например, нужно создать какой-то текст в абзаце. Абзац в HTML — это p, paragraph
<p> Какой-то текст </p>

Итого: Есть объекты, у объектов — визуальные свойства. А ещё они могут вести себя нестандартно.

Вёрстка — это просто способ задать объект (написать текст) и определить ему свойства (шрифт и размер). Например, сказать, что текст в абзацах должен быть чёрным, а заголовок первого уровня — красным. Достаточно знать, что p — обращение к тексту в абзацах, h1 — заголовок первого уровня, а color — название свойства «цвет». Получается:

Читайте также: