Леонид Рудык
Тильда Паблишинг. Честный обзор конструктора сайтов
За последние 3 месяца мы с командой создали более 400 страниц на Тильде и около 30 писем.
Прочувствовали все прелести и глупости конструктора. Еще мы записали короткий видеообзор, если вы больше любите смотреть, а не читать
Интерфейс
Интуитивно понятный и максимально простой. Даже если вы никогда не работали в конструкторах сайтов – вы с лёгкостью во всем разберетесь.
Работа с текстом и изображениями
Текст редактируется очень просто. Для этого надо по нему кликнуть и написать то, что необходимо. С такой же простотой вы сможете работать с изображениями.
Есть несколько вариантов его загрузки:
- Классика, загрузите картинку с жесткого диска.
- Просто перетащите его в место для загрузки или в саму кнопку.
- CTRL+V работает! Копируйте с компьютера, браузера или откуда возможно. Удобно, если нужно вставить скриншот.
- Вставить ссылку на изображение (если оно находится в интернете)
Глючит
К сожалению, это так. Самое частое, что вы можете встретить, – это крутящийся кружочек загрузки, который появляется после нажатия на кнопку «Сохранить». Но есть небольшой лайфхак. Если в этот момент перезагрузить страницу, то все данные сохранятся, и вы сможете продолжить работу.
Конфликтующие блоки
Например, вкладки внутри вкладок не работают.
Кастомный 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
Типографика и шрифты
Возможности очень широкие. Начнем с того, что тут более 25 шрифтов. Причём помимо стандартного «Arial» и пр., есть очень даже красивые. Также есть функция загрузки своих шрифтов в формате WOFF.
Для каждого шрифта есть 5 настроек жирности, это позволяет очень круто оформлять и грамотно расставлять акценты:
1. Light 2. Normal 3. Medium 4. Semi bold 5. Bold
12-колоночная сетка
Число 12 делится на много других чисел, поэтому им очень удобно оперировать.
Анимация обложек и заголовков
Можно анимировать заголовок, подзаголовок и описание.
Быстрая публикация
Изменения публикуются мгновенно, но если что-то пошло не так, очистите кэш (Ctrl+Shift+R) или откройте в режиме «инкогнито» ( Ctrl+Shift+N)
Видео и гифки на фон
Оптимальный размер фона 1680х900px
Гифки работают на месте картинок.
Видео можно вставить ссылкой:
- на YouTube или ID ролика
- на видео-файл в формате .MP4
- на видео-файл в формате .WEBM
Наличие слайдера
Многие любят :-) Если стандартного слайдера недостаточно, всегда можно написать свой.
Иконки и Фотосток
Иконки и картинки можно добавить из интерфейса Тильды.
Адаптив под размер экрана (viewport height)
Если задать размер не в пикселях (px), а в viewport height (vh), то обложка адаптируется под размер области просмотра, то есть под окно браузера.
Негибкие попапы
Это просто ад. По сравнению со всеми настройками стандартных блоков и возможностью создавать в Zero Block, попапы – это просто ужас. Их почти нельзя настроить. Крестик не перенесёшь. Расположение полей не поменяешь. Короче, с этим придётся смириться. Попапы стрёмные.
Размытые картинки
При загрузке картинок с ними что-то происходит. То ли сжимаются, то ли ещё что-нибудь. В общем, они становятся нечёткими. Причём не всегда. Такое происходит, когда мы «уменьшаем» картинки. Советы техподдержки не помогали в этом случае. Плохое качество картинок особенно сильно заметно на Retina-дисплеях с высоким разрешением, а также на изображениях таблиц. Но скорее всего это нормально и мы делаем что-то неправильно.
Медленная загрузка шрифтов
Это не проблема Тильды, а проблема медленного интернета, но это нужно учитывать. Так как используются подключаемые шрифты, то сначала прогружаются дефолтные шрифты, а только после этого загружаются «наши». В результате загрузка страницы выглядит так:Такое происходит при медленном интернете, но об этом важно помнить.
Есть три решения:
- Забить
- Использовать стандартные шрифты
- Использовать прелоадер
Если много пунктов в меню залезают друг на друга
Хотелось бы, конечно, чтобы они сами там красивенько выстраивались, но приходится либо шрифт слишком сильно уменьшать, либо количество пунктов сокращать.
Баг с обложками при наличии шапки
Если есть меню или что-то еще в шапке сайта, а высота обложки задана в 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)
- Получить рекомендации по улучшению индексации
Приколюхи
Конструктор писем
Отличный инструмент для того, чтобы сделать хорошее письмо – коммерческое предложение для отправки своим клиентами.
Вставка html-кода
Вы можете добавить любой код для того, чтобы добавить свой слайдер или прелоадер. Прелоадер пригодится вам, чтобы не видеть страшные шрифты, пока страница загружается.
Превращение в презентацию
Надоел Power Point? Не вопрос. Любую страницу можно превратить в презентацию всего в несколько кликов.
Типограф
Он сделает правильные переносы предлогов на новую строку, заменит дефисы (-) на длинные тире (–)/(—) и сделает еще что-то.
Экспорт сайта
Для того чтобы залить сайт на свой хостинг, его можно экспортировать. Правда, для этого необходимо оплатить тариф Business. Если же вы перестанете оплачивать подписку, то перестанут работать формы отправки данных.
Заключение
Тильда это явно удобная штуковина, на которой получаются сайты с красивым дизайном. Пользоваться ею крайне удобно.
Занимаемся разработкой сайтов на Тильде: