Что можно и нельзя делать в конструкторе сайтов Tilda17.08.2018 16:04

Руководитель и стратег в студии веб-дизайна и контент-маркетинга Svoemedia Александра Иващенко рассказала блогу Нетологии, как её команда использует Tilda в работе.

Сайты на конструкторе сайтов Tilda я начала делать ещё в 2014 году. Тогда это был настоящий прорыв по визуальной части: было ощущение, что прикоснулся к искусству, и до конца не верилось, что оно станет таким доступным. В маленькой группе на 400 человек (сейчас подписчиков 18 тысяч) мы обсуждали возможности Тильды, поддерживали команду платформы и давали советы.

Программа обучения: «Landing Page: построение эффективных посадочных страниц»

Сейчас, в рамках Svoemedia, создание сайтов на Tilda стало полноценным направлением нашего бизнеса и предпочитаемой CMS. О её возможностях, функциях и об опыте нашей команды хочу рассказать в этом обзоре Тильды.

Дизайн: что можно сделать на Тильде и как это будет выглядеть

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

Готовые шаблоны

Шаблоны разделены на группы по тематике и назначению: Бизнес, Магазин, Событие, Контакты, Анкета.

Готовые блоки

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

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


Режим для мобильной версии

Подробнее о корректировке мобильной версии читайте в справочнике Тильды.

Текст и изображения

Для редактирования текста нужно кликнуть по нему. То же можно сделать из меню «Контент» (в стандартных блоках) и через «Редактировать блок» в Zero. Встроенный в редактор типограф для текстов убирает висячие предлоги, ставит правильные тире и кавычки.

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

Zero-блоки

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


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

Елена Сартасова, шеф-дизайнер Svoemedia
​Zero-тренды и минимализм в дизайне сайтов диктуют дизайнерам задачу больше акцентировать внимание на колористике и типографике. Главное — это контент, а дизайнер лишь создаёт атмосферу, помогающую считать его суть. Чем чище и однообразнее фоны и проще графика на сайте, тем интуитивнее и интеллектуальнее воспринимается сайт пользователем: когда ничто не мешает, сайт действительно хочется читать, а не просто рассматривать его дизайн. Простая блочная структура Тильды позволяет довольно легко создавать такой дизайн за счёт простоты компонентов: фон, текст, форма и картинка, которые есть в Zero-блоке и стандартных блоках.

С помощью Zero-блоков можно делать анимацию, но если сайт предполагает постоянную редактуру (особенно это актуально для сайтов мероприятий), нужно будет вносить правки во все разрешения.


Шаблон агентства, разработанный на Тильде

Елена Сартасова, шеф-дизайнер Svoemedia
​Микроанимации — это возможность сделать сайт живым и говорящим. Тильда дает возможность настройки такой анимации. Сайт, дающий обратную тактильную связь, создает игру с пользователем, продлевая этим его время пребывания на сайте и упрощает знакомство с контентом.

Проанализировав задачи клиентов, мы создали библиотеку шаблонов на Тильде для типовых решений. Мы хотим, чтобы заказчики клиентов быстрее находили на сайтах то, что им нужно. А клиенты экономили деньги для развития бизнеса: такое решение позволило нам сократить стоимость разработки сайта для клиента в 12–15 раз.


Шаблон агентства, разработанный на Тильде

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

Сценарии использования: для каких типов проектов подходит Тильда

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

Тильда позволяет исключить полностью дорогостоящие этапы HTML-верстки и программирования и сократить стоимость разработки для нашей команды и клиента.

Александра Назмеева, менеджер проектов Svoemedia
​Тильда позволяет вовсе не привлекать полноценного разработчика даже для многостраничных сайтов (исключение — сложные калькуляторы и иные нетиповые задачи). По сравнению с разработкой сайтов полного цикла, сайты на Тильде сокращают время создания крупных проектов до 1,5–2 месяцев, включая этапы от прототипирования и написания контента до запуска работоспособной версии.

Сайт компании и лендинги

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


Сайт студии ландшафтного дизайна LOOG — презентация проектов и описание услуг

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

Личный сайт или портфолио

На Тильде можно собирать сайты-портфолио, личные сайты специалистов.


Сайт бизнес-тренера Бориса Тунникова: рассказывает об эксперте и его методе, содержит статейные материалы, публикации

Контент-проекты

На Тильде мы сделали и ведём самое большое медиа по химической промышленности в России: проект Инжинирингового химико-технологического центра в Томске.

Для этой ниши цифры очень приятные — 10 000 посетителей в месяц. По словам Ильи Мазова, директора по развитию ИХТЦ, контент-проект приносит от 15% годового оборота компании.

Максим Колташов, главный редактор SVOEMEDIA ​
Я рад, что команда чаще всего использует для вёрстки статей именно Тильду: это позволяет разместить нужные блоки (подписка, ссылка на соцсети, перелинковка на другие материалы) быстро и именно там, где мне это необходимо. Результат всегда эстетически приятен, что улучшает поведенческие характеристики и в итоге положительно сказывается на ранжировании сайтов.

Полезные функции Тильды для контент-проектов:

  • Метатеги H1-H3, title, description, Alt для изображений.
  • Разный контент (текст и бейджик) для отображения в поисковой выдаче и соцсетях.
  • Генерирование тегов для Facebook Open Graph.
  • Кнопки расшаривания статей в соцсетях.
  • Формы подписки.
  • Настраиваемые адреса страниц.
  • Генерация RSS-ленты.
  • Возможность на время закрыть статью для блога от индексации.

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


Сборник научных статей «Ольга Cедакова: Стихи, смыслы, прочтения»


40 тысяч знаков про положение дел в современной инноватике — лонгрид «Innovation Go: Как хипстерам доверили инновации и что из этого вышло»


Микромедиа агентства Svoemedia.Mag

Сайты для мероприятий и промостраницы

Для мероприятий мы делаем связку Тильды с платформой по продаже билетов Ticketscloud.


Архивный проект ISM: Тильда + HTML-код + интеграция с Ticketscloud и Carrotquest


Пример промостраницы — московский «Ящик Местной Еды»

Сайты обучающих проектов

Советуем использовать Тильду, если:

  • Курс / продукт приходит пользователю на электронную почту после покупки.
  • Нужна посадочная страница для продажи уроков.

В Тильде есть возможность закрытия одной страницы проекта по паролю.


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

Выстроить систему с хранением уроков, домашними заданиями, используя только Тильду, к сожалению, не удастся (для этого есть другие CMS), зато на ней можно эффектно презентовать продукт.

Например, для проекта «Местной eды» в коллаборации с KraftHeinz Foodservice мы создали и помогаем вести «Школу гастрономического бизнеса». Школа живёт на двух доменах (на основном домене расположена контентная часть проекта и лидогенератор, на другом — самописной CMS — маркетплейс и хранилище курсов «Школы»). При этом экосистема для пользователя — общая. Ссылки, ведущие на другое доменное имя, открываются в том же окне.


Регистрация на офлайн-мероприятия — через Таймпад или прямую покупку через Яндекс.Кассу с сайта. Онлайн-мероприятия — на другом домене

В проекты «Местной eды» мы интегрировали сервис Carrotquest. В контексте образовательных сайтов он заменил нам админку. Все данные о пользователях, их покупках, коммуникациях, попадают в единый рабочий кабинет:

Небольшие интернет-магазины

Советуем использовать Тильду, если:

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

Например, магазин гастрономических наборов из разных стран FUNTAN BOX — немного товаров, интеграция с Яндекс Кассой и онлайн-кассой ЕКАМ:

Тильда не подходит, если:

  • Нужна интеграция с 1С, синхронизация витрины и складских остатков.
  • Логистика осуществляется сторонней компанией, есть несколько способов доставки, доставка возможна не только в одном регионе (сложная тарифная сетка доставки).

Первая версия магазина для функционального напитка Octa была сделана в связке Тильды с Ecwid. Эквид выполнял только одну функцию — корзина (сейчас в Тильде появилась встроенная). Интеграции со службами доставки и прочие плюсы их решения оказались номинальными или работающими некорректно. Сейчас сайт перенесён на Инсейлс.


Первая версия магазина для функционального напитка Octa

Другие возможности Tilda

Теги статей

На данный момент в Тильде нельзя задавать теги статьям и фильтровать по ним материалы. Теги можно заменить на вкладки меню ME602 или ME603, но только если их не более пяти. По такому принципу организован наш магазин:

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

Калькулятор и тесты

Недавно в Тильде появились тесты и калькулятор. Ранее мы создавали тесты сами, вставляя в Тильду код. Пример можно посмотреть в проекте PROVEDENIE (тест на уровень ведущего):

Где посмотреть примеры проектов на Tilda

Разнообразие проектов на Тильде как по форме, так и по содержанию впечатляет и вдохновляет. Примеры проектов есть на сайте. Можно вдохновиться подборками, опубликованными Тильдой в своих соцсетях и по хештегу #madeontilda.

Возможности SEO

По опыту работы с Тильдой, нет никаких сложностей с ранжированием сайтов. Автоматическая проверка Google показывает предупреждение «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы». Нельзя повлиять на код и убрать предупреждение, и это влияет на скорость загрузки. Однако, специалисты Тильды провели анализ и выяснили, что удаление скриптов даст незначительный выигрыш в 0,3 секунды. В любом случае из-за приоритета поведенческих характеристик для поисковой выдачи, страницы получают достойную долю трафика.

Что можно сделать внутри Тильды для поисковой оптимизации сайта

  • Добавить фавиконы для сайта. Фавикон можно загрузить на сайт только в формате .ico (например, воспользовавшись конвертером).
  • Добавить страницу ошибки.
  • Настроить HTTPS.
  • Задать понятные адреса страниц (URL).
  • Прописать метатеги страниц.
  • Задать теги для заголовков и подзаголовков.
  • Задать Alt для изображений.
  • Открыть страницы для индексации.
  • Проверить на ошибки в «Панели вебмастера» Тильды.
  • Подключить Яндекс.Метрику, Google Analytics, Яндекс.Вебмастер и Google Search Console.
  • Подключить свой домен.

Остановимся на важных особенностях.

Получение SSL-сертификата

Тильда предлагает бесплатный сертификат Let’s Encrypt — это цифровой SSL-сертификат, который необходим для настройки HTTPS. В справочном центре Тильды можно найти инструкцию по подключению сертификата.

Мы не рекомендуем пользоваться вторым вариантом получения SSL — сервисом CloudFlare, если вы ведёте свою деятельность преимущественно в России. Сама по себе процедура получения их сертификата несложная, но ваш сайт получит IP от CloudFlare, а он, скорее всего, окажется заблокированным Роскомнадзором у многих российских провайдеров (например, Ростелекома). То есть большая часть посетителей из России попросту не сможет увидеть ваш сайт.

Панель вебмастера Tilda

После того, как вы настроили метатеги, перейдите в Настройки сайта Аналитика и SEO Оптимизация для поисковых систем (SEO) Перейти в раздел. В разделе «Критические ошибки и рекомендации» видим выделенные красным рекомендации. Достаточно нажать на подчёркнутый заголовок, чтобы быстро переходить к нужной странице и устранять ошибки.

В Панели вебмастера вы сможете:

  • Подключить Google Search Console и Яндекс.Вебмастер.
  • Настроить редиректы страниц.
  • Подключить HTTPS.
  • Получить доступ к расширенному загрузчику фавиконов.

Подключение Яндекс.Метрики, Google Analytics, Яндекс.Вебмастер и Google Search Console

Первым делом создайте счётчики в Яндексе и Гугле (предварительно создав личный кабинет). После переходите в Аналитика и SEO Настройки сайта, выберите необходимые счётчики, сохраните изменения и переопубликуйте все страницы сайта.

Ключевые показатели статистики сайта можно отслеживать из панели Тильды, на данный момент в очень усечённом виде: Настройки сайта Аналитика и SEO Статистика сайта.


Ключевые данные сайта из панели Тильды

Замечу, что Тильда обновляет этот раздел: на момент написания статьи доступен просмотр сессий с мобильных устройств, количество посещений по дням и месяцам, популярные страницы.

Полезные инструкции для настройки Яндекс.Метрики и Google Analytics.

Подключение своего домена

К сайту на Тильде можно подключить свой домен — уникальный адрес вашего сайта.

На бесплатном аккаунте можно опубликовать свой проект только на домене вида [название сайта].tilda.ws. Функция доступна начиная с тарифного плана Personal.

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

Не поручайте регистрацию домена разработчику, делайте это сами! Имя сайта — один из самых важных активов, и у вас должен быть к нему доступ.

Об интеграциях с сервисами приёма данных из форм и платёжными системами

Приём данных

Сайт на Тильде позволяет эффективно работать с входящими заявками. Мы пользуемся встроенным конструктором форм, потом собираем данные на почту и в гугл-таблицы (в качестве CRM мы используем нестандартную интеграцию с Carrotquest). Данные можно скачать и использовать, например, как базу для ретаргетинга или поиска похожей аудитории в Facebook. Чтобы заявки можно было быстро идентифицировать, мы задаём всем формам тип «Скрытое поле» (Контент) и имя переменной formname.

С помощью Тильды можно собирать заявки от посетителей сайта и получать информацию в Телеграм, Trello, Slack. Можно составлять списки рассылок для сервисов GetResponse, MailChimp, MailerLite, SendinBlue, UniSender или отправлять лиды в CRM (AmoCRM, Bitrix24, Megaplan, Piperdrive).

Подробнее о формах приёма данных.

Платёжные системы

Чтобы принимать платежи, по закону вы должны иметь статус ИП или юридическое лицо (Яндекс.Деньги подходят только для некоммерческих организаций и благотворительности).


Наша статья про ФЗ-54

Не забудьте также озаботиться подключением онлайн-кассы и размещением Публичной оферты. Всё серьёзно.

К сайтам на Тильде можно подключить платёжные сервисы:

  • Paypal,
  • Яндекс.Касса,
  • Робокасса,
  • CloudPayments,
  • Яндекс.Деньги,
  • LiqPay,
  • Тинькофф Банк,
  • Альфа-банк,
  • Сбербанк,
  • AB pay,
  • Stripe,
  • Наличные,
  • Безналичный расчёт,
  • Промокоды.

К каждому методу есть понятная инструкция по интеграции.

О поддержке, справочной документации и стоимости

Поддержка, справочный центр и Tilda Education


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

Поддержка работает не всегда на скорость, но очень дружелюбно.

В 2016 или 2017 году Тильда противостояла DDOS-атакам, как раз тогда у нас стартовала продажа билетов на крупное мероприятие в Крокусе. Но команда поддержки решила эту проблему и IP-адрес был изменён. Сейчас Тильда использует специальное оборудование для защиты сайтов от атак злоумышленников.

Команда Тильды создала большой справочный центр и образовательный журнал Tilda.Education. Они полезны не только при разработке сайтов на Тильде, но и при возникновении технических или маркетинговых вопросов: «как настроить почту», «как создать лендинг», «как создать политику обработки персональных данных для сайта» и многое другое.

Наша команда проходила несколько платных курсов Тильды — информация полезная, без воды, написана понятным языком и проиллюстрирована разнообразными примерами.

Также у Тильды есть телеграм-канал, где публикуются новости об обновлениях сервиса:


Анонс поиска по сайту в телеграм-канале Тильды

Стоимость

Самый дешёвый тариф у Тильды для одного сайта стоит 750 рублей в месяц (и 500 рублей при оплате за год). Можно сократить расходы: в Тильде есть функция экспорта кода (на тарифе Business и выше) — при этом платить нужно будет только за ваш хостинг.

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

Кроме того, страницы, созданные на Тильде, можно подгружать к уже существующим сайтам: взаимодействие с API доступно для тарифа Business. Есть готовые плагины для WordPress и Битрикс. Подробнее про API по ссылке.

Мы рекомендуем хостоваться на Тильде, а не переносить куда-то созданные сайты. Возможно, это покажется дорого, но у вас появляются безграничные возможности редактирования / дублирования страниц, что cэкономит время, нервы и, в конечном счёте, — деньги.

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

Читать ещё: «Вёрстка статьи в Тильде: разбор ошибок»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Полный текст статьи читайте на Нетология прочитано 306868 раз