Сделайте заказ
Нажимая на кнопку «Жду звонка» вы соглашаетесь с политикой конфиденциальности

Тильда. Честный обзор конструктора сайтов

Чтобы сделать некрасивый сайт нужно постараться.
Хотите сделать сайт, но нет возможности потратить деньги на дизайнера и разработчика? Понимаете, что вам подойдёт конструктор сайтов, но не знаете, какой выбрать? Тогда вы нашли то, что искали. В этой статье мы рассмотрим конструктор «Tilda Publishing» от Никиты Обухова. Сделаем это честно и с упоминанием всех плюсов и минусов.

За последние 3 месяца мы с командой создали более 400 страниц на Тильде и около 30 писем.

Прочувствовали все прелести и глупости конструктора. Еще мы записали короткий видеообзор, если вы больше любите смотреть, а не читать

Интерфейс
Интуитивно понятный и максимально простой. Даже если вы никогда не работали в конструкторах сайтов – вы с лёгкостью во всем разберетесь.
Хорошо
Работа с текстом и изображениями

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

Есть несколько вариантов его загрузки:

  1. Классика, загрузите картинку с жесткого диска.
  2. Просто перетащите его в место для загрузки или в саму кнопку.
  3. CTRL+V работает! Копируйте с компьютера, браузера или откуда возможно. Удобно, если нужно вставить скриншот.
  4. Вставить ссылку на изображение (если оно находится в интернете)
Плохо
Глючит

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


Слетающая авторизация


UPD: проблема устранена
А вот эта вещь будет вас бесить просто неимоверно, если вы решите поработать на Тильде более двух недель. Вы идёте в туалет, по пути назад решаете заварить себе чай. Возвращаетесь к ноутбуку и видите такой экран:
Тут стоит сделать пометку. Слетает она не по системной ошибке, а в случае если вы не работали в личном кабинете какое-то время. Какое конкретно - неизвестно.
Ещё минусы
Конфликтующие блоки

Например, вкладки внутри вкладок не работают.


Кастомный CSS только для Zero Block


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

Дизайн

И сейчас о том, какие сайты получаются на Тильде. Это кайф. По крайней мере по сравнению со всеми остальными конструкторами. Тут любой человек (не дизайнер) может создать нечто красивое и приятное для глаз. Ведь для того чтобы сделать некрасиво, придется реально потрудиться. И на то есть несколько причин.

Есть масса заранее созданных шаблонов, но вот зачем они - не совсем понятно. Всё-таки, если вы собрались сделать сайт, то лучше всего делать это «с чистого листа»
Хорошо
Стандартные блоки

Работает все очень просто. Вы добавляете новый блок и редактируете его под себя: меняете фото, видео, текст, иконки, цвета и т.д. Таких «типовых блоков» достаточно много. Причем разных. Обложки, цитаты, тарифы, этапы работ – всё, что необходимо. Стандартные блоки выглядят очень достойно.
Zero block

С помощью него можно создавать новые блоки и элементы сайта. Это для тех, кому мало стандартных блоков. Zero Block похож на Sketch, только всё сразу работает после публикации. Нарисовали - сразу опубликовали.

Воспользуйтесь Zeplin, чтобы перенести PSD-макет в Тильду с точностью до пикселя. Есть настройка контейнера – Grid или Window, которая позволяет правильно расставлять элементы внутри Zero Block.

Недавно Тильда обновила Zero Block и сделала его бомбическим
Подробнее: http://newsletter-ru.tilda.cc/zero-block-big-update
Каждый элемент Zero Block уникален, оживляются они с помощью CSS. Например, можно добавить такую заливку (ховер) на кнопку.
Типографика и шрифты

Возможности очень широкие. Начнем с того, что тут более 25 шрифтов. Причём помимо стандартного «Arial» и пр., есть очень даже красивые. Также есть функция загрузки своих шрифтов в формате WOFF.
Для каждого шрифта есть 5 настроек жирности, это позволяет очень круто оформлять и грамотно расставлять акценты:

1. Light
2. Normal
3. Medium
4. Semi bold
5. Bold
Ещё плюсы
12-колоночная сетка
Число 12 делится на много других чисел, поэтому им очень удобно оперировать.
Анимация обложек и заголовков
Можно анимировать заголовок, подзаголовок и описание.
Быстрая публикация
Изменения публикуются мгновенно, но если что-то пошло не так, проверьте кэш. Откройте в режиме «инкогнито» ( Ctrl+Shift+N)
Видео и гифки на фон
Оптимальный размер фона 1680х900px

Гифки работают на месте картинок.

Видео можно вставить ссылкой:
  • на YouTube или ID ролика
  • на видео-файл в формате .MP4
  • на видео-файл в формате .WEBM
Наличие слайдера
Многие любят :-) Если стандартного слайдера недостаточно, всегда можно написать свой.
Иконки и Фотосток
Иконки и картинки можно добавить из интерфейса Тильды.
Адаптив под размер экрана (viewport height)
Если задать размер не в пикселях (px), а в viewport height (vh), то обложка адаптируется под размер области просмотра, то есть под окно браузера.
Плохо
Негибкие попапы

Это просто ад. По сравнению со всеми настройками стандартных блоков и возможностью создавать в Zero Block, попапы – это просто ужас. Их почти нельзя настроить. Крестик не перенесёшь. Расположение полей не поменяешь. Короче, с этим придётся смириться. Попапы стрёмные.
*Если вы умеете делать красивые попапы – пришлите скриншот в комментарий.
Размытые картинки

При загрузке картинок с ними что-то происходит. То ли сжимаются, то ли ещё что-нибудь. В общем, они становятся нечёткими. Причём не всегда. Такое происходит, когда мы «уменьшаем» картинки. Советы техподдержки не помогали в этом случае. Плохое качество картинок особенно сильно заметно на Retina-дисплеях с высоким разрешением, а также на изображениях таблиц. *Может мы что-то делаем не так? Яндекс не помог, если знаете ответ, напишите в комментарии.
Медленная загрузка шрифтов

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

Есть три решения:
  1. Забить
  2. Использовать стандартные шрифты
  3. Использовать прелоадер

Ещё минусы
Если много пунктов в меню залезают друг на друга
Хотелось бы, конечно, чтобы они сами там красивенько выстраивались, но приходится либо шрифт слишком сильно уменьшать, либо количество пунктов сокращать.
Баг с обложками при наличии шапки
Если есть меню или что-то еще в шапке сайта, а высота обложки задана в viewport, то обложка не влезает в экран ровно на размер шапки.

В обычной верстке мы можем высчитывать размер:
height: calc(100vh - 70px);
Тильда пока так не умеет.
Не работает поиск Unsplash
Во встроенной библиотеке не работает подбор картинок через поиск, можно выбрать только из выпадающего списка. Так себе баг, конечно, для ленивых))

Адаптация под мобильные и планшеты

Половина людей шарятся по интернету с мобильного, поэтому невероятно важно, чтобы сайт нормально отображался на всех устройствах, будь то iPhone 4 или Galaxy S8.

Большинство стандартных блоков в Тильде адаптированы под мобильные устройства (за исключением таблиц - они выглядят неважно).
Хорошо
Отступы

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

Есть такая фишка. Все элементы (когда работаешь в Zero Block) «расставляются» от определенных точек на экране (от верха и низа, от левой и правой стороны и от центра). То есть вы вставляете элемент, например кнопку, и задаёте ей параметр местонахождения «на 40 % выше центра экрана». Но косяк в том, что высота экрана мобильного телефона в браузере плохо считается, и для того чтобы рассчитать её, необходимо прокрутить страницу до самого низа). В итоге получается такая лабуда, что элементы заползают друг на друга. Поэтому при расстановке элементов по высоте приходится высчитывать их не по процентам, а по пикселям. Выходит больше мороки.

SEO оптимизация

Это необходимо, если вы хотите, чтобы Яндекс и Google правильно индексировали вашу страницу и показывали её в поисковой выдаче.
Хорошо
Теги H1, H2, H3 и Div
Настраиваются для заголовков в стандартных блоках и к любому тексту в Zero Block.
Настройка title, description, keyword и сниппета
Настройте то, как ваш сайт будет показываться в поисковиках.
Настройка Open Graph
Настройте то, как будет выглядеть ссылка, если попадет в социальные сети.
Настройка alt для изображений
Работает не во всех блоках, не ко всем изображениям. Но разработчики Тильды работают над такими улучшениями.
Тильда — панель вебмастера
В панели вебмастера вы сможете добавить сайт в поисковые системы Яндекс и Google, увидеть ошибки, влияющие на индексацию сайта, а также протестировать сайт на соответствие основным рекомендациям от поисковых систем. А именно:
  • Подключить Google Search Console
  • Подключить Яндекс Вебмастер
  • Контролировать важные метатеги для страниц
  • Настроить редиректы страниц (with code 301)
  • Получить рекомендации по улучшению индексации

Техподдержка

Хорошо
Этому стоит уделить особое внимание, потому что парни здесь особенно постарались.
Справочный центр

Тут вы найдёте ответ практически на любой вопрос. Всё, начиная от подключения счётчика Яндекс.Метрика до подключения платёжных систем.
Лояльная техподдержка

Если вы не нашли ответа в справочном центре или просто любите общаться с живыми людьми, то вам быстро ответят. Правда, график работы ТП 9-18 часов. Но нам иногда отвечали и ночью, и утром.
Плохо
Скучные вебинары

Они есть и их достаточно много. Но смотреть эти вебинары просто невозможно.

Приколюхи

Конструктор писем

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

Посмотреть пример
Вставка html-кода

Вы можете добавить любой код для того, чтобы добавить свой слайдер или прелоадер. Прелоадер пригодится вам, чтобы не видеть страшные шрифты, пока страница загружается.
<!-- HelloPreload http://hello-site.ru/preloader/ -->

<style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #C0392B url(http://hello-site.ru//main/images/preloads/oval.svg) center center no-repeat;background-size:76px;}</style>

<div id="hellopreloader">
<div id="hellopreloader_preload">
</div>
</div>
<script type="text/javascript">var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},1000);};</script>

<!-- HelloPreload http://hello-site.ru/preloader/ -->
|

Это забавная штука, которая привлекает внимание к вашему сайту.
Превращение в презентацию

Надоел Power Point? Не вопрос. Любую страницу можно превратить в презентацию всего в несколько кликов.
Типограф

Он сделает правильные переносы предлогов на новую строку, заменит дефисы (-) на длинные тире (–)/(—) и сделает еще что-то.
Экспорт сайта

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

Видеообзор

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

Заключение

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

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

Возможно, мы что-то упустили или о чём-то не рассказали. Обязательно напишите об этом в комментариях. А также напишите, что ВЫ думаете о Тильде.

Промокод Тильда в конце статьи

Месяц в подарок за регистрацию по ссылке
Мы ничего не продаём. Просто иногда стараемся делать полезный контент.
Если вы хотите создать сайт на Тильде — регистрируйтесь по ссылке ниже.
Вы получите 1 месяц в подарок. И мы тоже
Промокод Tilda
https://tilda.cc/?r=1480129
Оставьте комментарий
Мы пишем новую статью
Оставьте свой e-mail, мы отправим новую статью,
как только допишем.
Нажимая на кнопку «Жду статью» вы соглашаетесь с политикой конфиденциальности
Мы уже пишем новую статью
Оставьте свой e-mail, мы отправим новую статью, как только допишем. А еще это вдохновляет нас писать еще больше, лучше и интересней.
Нажимая на кнопку «Жду статью» вы соглашаетесь с политикой конфиденциальности
Made on
Tilda