Главное Свежее Вакансии   Проекты
Рекомендуем
Нарративы и всё самое интересное
Перейти
Продвинуть свой проект
564 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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

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

Интерфейс

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

orig

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

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

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

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

orig

orig

orig

orig

Глючит

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

orig

Конфликтующие блоки

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

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

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

Дизайн

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

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

orig

orig

Стандартные блоки

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

Zero block

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

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

Недавно Тильда обновила Zero Block и сделала его бомбическим Подробнее: http://newsletter-ru.tilda.cc/zero-block-big-update

orig

Типографика и шрифты

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

Для каждого шрифта есть 5 настроек жирности, это позволяет очень круто оформлять и грамотно расставлять акценты:

1. Light 2. Normal 3. Medium 4. Semi bold 5. Bold

orig

12-колоночная сетка

orig

Число 12 делится на много других чисел, поэтому им очень удобно оперировать.

Анимация обложек и заголовков

orig

Можно анимировать заголовок, подзаголовок и описание.

Быстрая публикация

orig

Изменения публикуются мгновенно, но если что-то пошло не так, очистите кэш (Ctrl+Shift+R) или откройте в режиме «инкогнито» ( Ctrl+Shift+N)

Видео и гифки на фон

orig

Оптимальный размер фона 1680х900px

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

Видео можно вставить ссылкой:

  • на YouTube или ID ролика
  • на видео-файл в формате .MP4
  • на видео-файл в формате .WEBM

Наличие слайдера

orig

Многие любят :-) Если стандартного слайдера недостаточно, всегда можно написать свой.

Иконки и Фотосток

orig

Иконки и картинки можно добавить из интерфейса Тильды.

Адаптив под размер экрана (viewport height)

orig

Если задать размер не в пикселях (px), а в viewport height (vh), то обложка адаптируется под размер области просмотра, то есть под окно браузера.

orig

Негибкие попапы

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

Размытые картинки

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

Медленная загрузка шрифтов

orig

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

Есть три решения:

  • Забить
  • Использовать стандартные шрифты
  • Использовать прелоадер

orig

Если много пунктов в меню залезают друг на друга

Хотелось бы, конечно, чтобы они сами там красивенько выстраивались, но приходится либо шрифт слишком сильно уменьшать, либо количество пунктов сокращать.

Баг с обложками при наличии шапки

Если есть меню или что-то еще в шапке сайта, а высота обложки задана в viewport, то обложка не влезает в экран ровно на размер шапки.

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

Не работает поиск Unsplash

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

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

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

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

orig

Отступы

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

orig

orig

Косяк с Zero Block

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

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

Это необходимо, если вы хотите, чтобы Яндекс и Google правильно индексировали вашу страницу и показывали её в поисковой выдаче.

Теги H1, H2, H3 и Div

orig

Настраиваются для заголовков в стандартных блоках и к любому тексту в Zero Block.

Настройка title, description, keyword и сниппета

orig

Настройте то, как ваш сайт будет показываться в поисковиках.

Настройка Open Graph

orig

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

Настройка alt для изображений

orig

Работает не во всех блоках, не ко всем изображениям. Но разработчики Тильды работают над такими улучшениями.

Тильда — панель вебмастера

orig

В панели вебмастера вы сможете добавить сайт в поисковые системы Яндекс и Google, увидеть ошибки, влияющие на индексацию сайта, а также протестировать сайт на соответствие основным рекомендациям от поисковых систем. А именно:

  • Подключить Google Search Console
  • Подключить Яндекс Вебмастер
  • Контролировать важные метатеги для страниц
  • Настроить редиректы страниц (with code 301)
  • Получить рекомендации по улучшению индексации

Приколюхи

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

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

Посмотреть пример

Вставка html-кода

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

orig

Превращение в презентацию

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

Типограф

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

orig

Экспорт сайта

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

Заключение

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

Занимаемся разработкой сайтов на Тильде:

https://qu4dro.ru/case/sajty-na-tilda

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Популярные за неделю
Показать следующие
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
Прямой эфир