Экспорт кода
Подключитесь через FTP к вашему серверу, на котором будет размещен сайт и скопируйте на него файлы. Переименуйте файл htaccess в .htaccess (указанный файл работает только под веб-сервером Apache, если у Вас Nginx, то для него нужно писать правила связи самостоятельно и подключать их в настройках Nginx).
Дополнительные возможности: специальные пути для файлов
Вы можете указать свои пути для файлов, если вы используете свой CDN или вам не подходят относительные пути по умолчанию для изображений, css и js файлов.
Конструктор сайтов Tilda или как самостоятельно создать сайт
Быстрый, удобный, продуманный и красивый сайт – залог не только успешного начала деятельности в интернете, но и способ обратить внимание к себе потенциальных клиентов путем естественного продвижения, контекстной рекламы или других видов их привлечения.
Раньше для создания сайта требовалось наличие следующих специалистов: веб-дизайнер, верстальщик, программист.
Сейчас, многими вещами можно и пренебречь. Произошло это немаловажное событие, благодаря стремительному развитию онлайн-конструкторов веб-сайтов, где любой человек, не владеющий специальными навыками, может создать наиболее подходящий ему сайт.
Перед тем, как начать…
Стоит обратить внимание на сетку предусмотренных «Тильдой» тарифных планов, потому что, рассмотрев различия между ними, Вам станет понятно, какой из них использовать для достижения целей. Для удобства, мы оформили данную информацию в таблицу:
Наименование/тариф
Объем данных для хранения на сервере
Полная коллекция блоков
Подключение своего домена
Аналитика и SEO
Вставка html-кода, css-стилей
Загрузка своих шрифтов
Формы сбора данных, интеграция с CRM-системами
Онлайн чат с техподдержкой
Экспорт исходного кода в архив
Оплата через расчетный счет
Стоимость ежемесячной оплаты при оплате сразу за год
Таким образом, если Вы, например, хотите реализовать на данном онлайн-конструкторе, интернет-магазин с подключением модулей оплаты или сразу предусмотреть аналитику и SEO-оптимизацию, то будьте готовы сразу перейти на платный тарифный план.
Для начала, все равно советуем опробовать бесплатную версию, чтобы оценить интерфейс и понять, на сколько он вам удобен и будет ли полезен.
Создание сайта в онлайн-конструкторе «Tilda» на примере
Для примера в этой статье мы рассмотрим создание веб-сайта на условно бесплатном конструкторе «Tilda». Увидим, какие есть инструменты, настрой ки и попробуем сделать свой сайт. Ссылка на онлайн-конструктор: https://tilda.cc/ru/.
Заходим на веб-ресурс, проходим регистрацию, входим, вводим название своего первого проекта и попадаем в личный кабинет.
Нажимаем кнопку «Создать страницу».
Далее выбираем подходящий нам шаблон сайта или выбираем пустую страницу. Для большей наглядности, в статье мы рассмотрим создание сайта с нуля, на основе PSD-макета, который был найден на просторах интернета. Вот так он выглядит:
Отображение макета в конечном варианте в конструкторе отличается от PSD-макета, так как он представлен для примера. В нем не учитывалось полное соблюдение цветов, размеров блоков, текстов, а также расстояний между ними.
После того, как выбрали страницу, видим подсказки по использованию и в конце поясняющее видео. Смотрим, знакомимся, запоминаем.
Для большего интереса, нажимаем «Создать пустой блок», затем кнопку «Редактировать».
Попадаем в окно редактора и сразу видим возможность добавить новые элементы, и возможность настройки, а также просмотр отображения вида сайта на различных устройствах.
Приступаем к созданию шапки выбранного нами макета. Картинка добавляется весьма хитро. Для начала жмем «+» и «add image», а только затем переходим в «settings» и уже в ней загружаем подготовленную картинку.
Дальнейшие операции по добавлению, редактированию и изменений текста не должны вызвать сложностей, так как принцип такой же. «+» отвечает за добавление блока, «settings» — за настройку отображения.
Чтобы добавить кнопку, жмем «add button», редактируем аналогичным образом. После 5-ти минут, шапка для ПК-версий готова!
Затем следует сразу отредактировать отображение на смартфонах и планшетах, чтобы потом об этом не забыть. Так как элементы уже есть, остается только их правильно расставить и скорректировать размеры. Если у Вас нет PSD-макета, в котором отображены расположения блоков в планшетной и мобильной версиях, то можете сами их расположить по своему усмотрению. Вот, что получилось в других отображениях:
Затем нажимаем кнопочку «save» и «close». Чтобы увидеть свой сайт, жмем «Опубликовать», соглашаемся и видим следующее всплывающее окно:
Кликаем «Открыть ссылку», смотрим результат наших трудов:
Не забываем сразу отредактировать высоту блока, иначе получится вот так после добавления меню.
Для этого, кликаем «редактировать блок», затем левой кнопкой мыши по белому «пространству» и «settings» (не забываем про «save»):
Теперь на выходе получаем:
Редактируем меню. Отметим, что некоторые виды меню доступны только на платных тарифах, но и одного из «бесплатных» нам вполне будет достаточно.
Добавляем блок отсюда.
Затем нажимаем «контент»:
и после видим следующее окно:
В разделе «логотип» стираем все, что не нужно (ссылку, текст), потому что мы его реализовали ранее. В «списке пунктов меню» пишем названия и пути к страницам. Если страниц еще нет, то добавляем url позже. Чтобы изменить цвет фона, текст и т. д., сохраняем, то, что мы проделали. После снова наводим на блок и кликаем «настройки». После приблизительно 5 минут получаем:
Теперь добавляем слайдер. Можем воспользоваться «черным плюсиком» для добавления нового блока или кнопкой внизу «галерея».
Выбираем. Для загрузки фотографий, жмем «контент», пункт «настройки» — отображение слайдера на сайте.
После манипуляций, вот что получается в итоге:
Чтобы добавить разделитель следует обратиться к одноименному пункту меню.
Чтобы сделать так, как у нас представлено на макете, можно стандартный разделитель перетащить в редактор, сделать в нём все необходимое и его сохранить. Для этого, после того как мы добавили блок, заходим в настройки, опускаемся в самый низ и видим пункт «редактировать в zero block». Жмем на него.
Затем появится предупреждение, а далее, появится возможность редактировать блок, чем мы и займемся. На выходе получаем:
Следует отметить, что операция конвертирования в режим редактора есть не только для блока «разделитель», но может применяться и для других элементов контента.
Переходим к карточкам продукта. По идее, чтобы их добавить мы можем зайти во «все блоки», затем в «магазин», но видим, что все, что там находится, требует подключения другого тарифа (платного).
Поэтому, мы можем создать раздел с нуля или… воспользоваться другим способом. Находим ту блочную структуру, которая нам может подойти. Нашли пункт «Команда». Добавляем, конвертируем в «редактор зеро» (было описано ранее, где находится), изменяем. Чтобы картинка и текст вели на необходимый товар, заходим в свойства и прописываем путь напротив команды «link» и при необходимости указываем открытие ссылки в новом окне (пункт «target»). Не забываем сразу подправить отображение на мобильных устройствах.
Фразу с разделителем «почему 1563 клиента выбрали нас» легче всего будет добавить путем копирования секции «популярная продукция». И перемещения в необходимое место с помощью предусмотренных кнопок в виде стрелок.
Следующую часть можно добавить либо заполнением пустой секции, либо копированием «популярной продукции», ее последующем изменением, либо отредактировав готовый раздел «преимущества». Выберем последний вариант, так как это наиболее легкая операция. Все так же, как и в предыдущих случаях: добавили, конвертируем в «zero block», производим изменения и сохраняем.
Для добавления партнеров (следующая часть нашей страницы), достаточно просто кликнуть по одноименному пункту меню и произвести в нем необходимые изменения через «конвертер zero». Разделитель делаем таким же образом, как описывали чуть ранее.
Способ, реализуемый с помощью слайдера, относится к платным тарифам. Но никто же не мешает при необходимости отойти от шаблона и немного сделать по-своему в силу неожиданно возникших обстоятельств.
Предпоследний экран с оффером и формой обратной связи добавляем, выбрав пункт меню «форма и кнопки» и отредактировав привычным нам способом через «zero».
Счетчик, который идет в макете, есть в платных версиях тарифа. Также его можно добавить с помощью вставки html-кода (если он имеется), но эта возможность тоже подключается, если перейти на тарифный план стоимостью 750 рублей в месяц или более.
Вследствие этого, мы его пропустим. Осталось добавить футер. Для этого следует зайти в выбор блоков и нажать на «подвал», выбрать, отредактировать.
Но, так как у нас футер повторяет абсолютно шапку сайта, то мы просто ее скопируем и переместим вниз с помощью спецкнопок в виде стрелок вверх и вниз.
Вот и готова наша быстрая наброска примерно 65-70% главной страницы сайта, спустя примерно 40-60 минут.
Другие возможные способы редактирования, не описанные при создании главной страницы в примере, можно приобрести путем улучшения практических навыков или при помощи следующих разделов:
Некоторые ответы на вопросы, возникшие в ходе создания или настройки вашего сайта, можно найти в блоке, расположенном внизу страницы.
Обзор настроек созданных страниц и сайта в онлайн-конструкторе.
Следует упомянуть эту часть, чтобы до конца ознакомиться с функционалом веб-ресурса.
В «настройках страницы» представлены следующие разделы:
«Главное» — информация о названии страницы, ее ссылке, описании;
«Бейджик» — картинка, отображающаяся в различных информационных источниках, а также в самой панели отображения страниц и сайтов;
«Facebook and SEO» — позволяет задать необходимое отображение вашего веб-ресурса, как на поиске, так и на и в соцсети;
«Экспорт» — позволяет открыть html-код страницы или сохранить исходник в архива zip (доступен только в тарифном плане «Бизнес»);
«Действия со страницей» — позволяют дублировать, перенести на другой свой веб-сайт или аккаунт созданного проекта страницы, а также ее удалить;
«Дополнительно» — функции, касающиеся анимации, ресурса страницы и т. д.
Настройки самого сайта:
«Шрифты и цвета» — задают единый стиль для всего сайта;
«Главная страница» — позволяет сделать главной любую проект-страничку;
«Домен» — делегирование или покупка необходимого вам доменного имени сайта вместо стандартной ссылки;
«Аналитика и SEO» — подключение инструментов для мониторинга посещения и активности пользователей (кроме той же «Яндекс Метрики» можно подключить такой замечательный сервис, как «Google Tag Manager» (подробнее: https://akiwa.ru/blog/obzor-google-tag-manager/ )) и SEO-оптимизация. Доступны только на платных тарифах!;
«Формы» — позволяют производить интеграцию с различными CRM-системами. При бесплатном тарифе доступна только отправка заявок на указанный e-mail;
«платежные системы» — подключение возможно только на платных тарифах!;
«Шапка и подвал» — позволяют задать единую футер и хэдер для всех страниц сайта;
«Ограничить доступ» — тут в принципе все понятно;
«Еще» — предоставляет возможность загрузки favicon, указания API карт. Также предусмотрены: отключение подписи, подгрузки 404-ой ошибки, html-код для вставки в <head>/</head>, своих ccs стилей (только на платных тарифных планах).
Рассмотренного материала в статье Вам должно вполне хватить, чтобы спокойно разобраться с онлайн-конструктором «Tilda» и предусмотреть возможные «подводные камни» (например, «SEO-оптимизация»), недоступные на бесплатной версии. Стоит отметить, что, несмотря на них, ценовая политика ресурса является одной из самых прозрачных и оптимальных с точки зрения цена/качество.
Как выглядит экспорт исходного кода на Тильде и зачем он нужен?
BY
Как выглядит экспорт исходного кода на Тильде на собственный сервер? Владельцы бизнес-тарифа могут скачать zip-архив со всеми данными: экспортировать сайт можно через настройки аккаунта. Загруженный архив легко переносится на новый сервер путем копирования.
Как выгрузить данные?
Сначала попробуем разобраться, что это за экспорт исходного кода Tilda. Это возможность скопировать все данные проекта и перенести их с серверов конструктора на собственный сервер.
Не забудьте узнать, как отслеживать статистику сайта, который создан на Тильде.
Такая опция есть только у пользователей, оплативших тариф Business. В другие тарифные планы эта возможность не включена.
Если вас интересует экспорт кода с Тильды на собственный сервер, сначала нужно скачать весь объем данных из конструктора. Приступаем!
- Откройте свой личный кабинет и авторизуйтесь;
- Найдите вкладку «Мои сайты» на верхней панели;
- Отыщите в списке нужный проект и нажмите на его название;
- Далее кликните по кнопке «Настройки сайта» справа;
- Из меню слева выберите вкладку «Экспорт» .
Чтобы осуществить экспорт исходного кода на Тильде, достаточно нажать на кнопку «Скачать .zip архив» , после этого начнется автоматическое формирование пакетов данных. Нужно немного подождать!
Когда подготовка завершится, можно приступить непосредственно к экспорту сайта с Тильды и загрузке данных на ваше устройство. Для этого кликните по ссылке, которая появится под списком переносимых файлов. И опять немного подождите, пока процесс переноса не завершится.
Важно понимать, какие именно данные будут выгружены:
- Статичный html (страницы);
- Картинки, CSS и JS.
При этом экспорт товаров с Тильды невозможен. Ваш личный кабинет, рабочие формы для обработки данных, корзина, шрифты и потоки не переносятся, они работают только в рамках конструктора. Учитывайте это!
После окончания экспорта сайта с Tilda, можно переходить к переносу данных на ваш новый сервер. Это делается так:
- Сначала распакуйте загруженный архив, чтобы увидеть его содержимое – это файлы, у каждого из которых есть определенное название;
- Теперь подключитесь к вашему серверу через FTP и перенесите все скачанные данные любым удобным способом;
- Найдите файл с названием «htaccess» и переименуйте его в «.htaccess».
Вот и все! Как видите, обладать навыками программирования не нужно, все делается достаточно просто. Главное, чтобы ваш новый сервер уже был готов к настройке, а с остальным вы справитесь!
Напоследок еще несколько простых правил, которые нужно помнить:
- Запрещено вносить какие-либо изменения в загруженный программный код – это собственность разработчиков конструктора;
- Также и по той же причине запрещено удалять из кода идентификатор разработчика;
- В настройках сайта обязательно нужно указать домен, где будет размещен экспортированный материал.
Если у вас оплачен бизнес-тариф, вам пригодится инструкция о том, как экспортировать сайт с Тильды. Если вы захотите перенести проект на собственный сервер, никаких трудностей не возникнет – все просто, доступно и бесплатно.
Перенос сайта с тильды на свой хостинг с рабочими формами
Сегодня поговорим об экспорте кода сайта сделанного с помощью конструктора Тильда, что вы потеряете, а что сможете восстановить.
В начале статьи для тех, кто еще не нашел хостинг, рекомендую покупать хостинг у проверенных хостеров, у которых нормальные тарифы и хорошие условия:
Хочу заметить сразу, что экспортировать код сайта из конструктора вы сможете только оплатив тариф Business.
Экспорт кода можно делать только при активной подписке Business
В руководстве Тильды написано, что при экспорте кода на свой хостинг часть функций отключается.
Итак, что именно отключается при экспорте кода:
- Отключатся все формы, включая корзину . Тильда выступает своего рода сервисом, который отправляет данные. Если вы скопировали код сайта на свой хостинг, указали в настройках домена в Тильде домен на своем хостинге, то отправка данных будет продолжаться. Пользователь сможет заполнить поля формы, а вы получите уведомление с данными на почту, в телеграм или другие сервисы, которые вы подключили. Как только ваша платная подписка закончится (или вы перейдете на тариф Free) формы перестанут работать). Но мы к этому еще вернемся.
- Если вы воспользовались бесплатным SSL-сертификатом от Тильды , после переноса ваш сайт не будет доступен по HTTPS .
- Отключатся шрифты от Rentafont при неактивной подписке Тильды.
- CRM от Тильды тоже отключится.
- Отключение коснется и ПОТОКА , и КАТАЛОГА . На существующие товары или новости вы сможете зайти только из общего списка публикованных постов, а прямая ссылка работать не будет. Кстати, поиск по товарам тоже перестанет работать.
- Отключение затронет и Личный кабинет . Он просто не экспортируется.
- Ну и самое ВАЖНОЕ — вам будет доступен только КОД. Приятный и интуитивно понятный интерфейс вы с собой не заберете.
И если пункты с 4 по 7 никак нельзя полечить у себя на хостинге после окончания платной подписки , то первые 3 вполне поддаются восстановлению. Шрифт вы можете купить из библиотеки Rentafont или подменить его в коде на какой-то свой. Сертификаты для HTTPS тоже можно купить на «каждом углу».
А вот самый главный и важный вопрос на миллион долларов: Как же сделать так, чтоб после экспорта сайта с Тильды формы по-прежнему передавили свои значения, и сайт снова смог собирать такие нужные лиды.
Процедура настройки форм после переноса сайта с Тильды
Ловите один лайфхак (на самом деле их несколько), который сможет сохранить работу форм после переноса сайта на свой хостинг.
Создайте на своем компьютере файл form.php . Это можно сделать с помощью, например, Sublime Text или простого встроенного текстового редактора. Внутрь этого файла вам нужно вставить следующий код:
В поле $EmailFrom вы можете вставить любую почту, чтоб вам было понятно откуда пришло письмо. А вот в поле $EmailTo вставьте свою почту или почту заказчика.
Созданный вами файл form.php перенесите на свой хостинг в корень папки с будущим сайтом.
Теперь переходим в интерфейс Тильды и идем в настройки сайта. Во вкладке «Формы» ищем сервис «Webhook» :
Вставляем в поле адрес вашего файла на вашем хостинге в формате:
https://адрес-вашего-домена.com/form.php . Как проверить, что линк рабочий: вставьте эту ссылку в браузер и перейдите по ней. Если вы увидите следующее окно и на указанную почту придет пустое письмо, значит вы все верно сделали:
Получилось? Отлично, идем дальше. Нажимаем кнопку «Добавить» в Тильде, затем подключаем сервис Webhook ко всем формам сайта и переопубликовываем все страницы сайта в Тильде.
Теперь займемся экспортом. Заходим в настройки сайта в Тильде, переходим во вкладку «Экспорт» и нажимаем кнопку «Скачать .zip архив»
Опускаемся вниз страницы и кликаем на «Начать экспорт»
В следующем окне вам нужно дождаться окончания формирования архива для вас. После чего появится ссылка на скачивание архива.
Качайте и разархивируйте. Внутри будут все файлы вашего сайта. Зайдите на свой хостинг и скопируйте все содержимое туда же, где уже лежит файл form.php. Далее вам необходимо будет переименовать файл htaccess в .htaccess — он находится в корне папки.
Дальше снова возвращаемся в настройки сайта на Тильде. Заходим во вкладку «Домен» и прописываем сюда ваш домен.
Если вы подключали Домен к Тильде и изменяли записи типа A на ip-ники Тильды, то вам нужно не забыть потом изменить эти ip на значения своего хостинга.
Вот и все. Сайт готов, пользуйтесь на здоровье! В дальнейшем расскажу вам еще о некоторых способах оживления форм поле переноса.
А это видео , где я показываю перенос сайта с Тильды и настройку форм на примере.