Что такое платформа tilda
Обзор конструктора сайтов Tilda: возможности, ограничения, советы
Руководитель и стратег в студии веб-дизайна и контент-маркетинга Svoemedia Александра Иващенко рассказала блогу Нетологии, как её команда использует Tilda в работе.
Сайты на конструкторе сайтов Tilda я начала делать ещё в 2014 году. Тогда это был настоящий прорыв по визуальной части: было ощущение, что прикоснулся к искусству, и до конца не верилось, что оно станет таким доступным. В маленькой группе на 400 человек (сейчас подписчиков 18 тысяч) мы обсуждали возможности Тильды, поддерживали команду платформы и давали советы.
Сейчас, в рамках Svoemedia, создание сайтов на Tilda стало полноценным направлением нашего бизнеса и предпочитаемой CMS. О её возможностях, функциях и об опыте нашей команды хочу рассказать в этом обзоре Тильды.
Дизайн: что можно сделать на Тильде и как это будет выглядеть
Начать дизайн сайта можно с чистого листа, используя Zero-блоки, или с готовых шаблонов и блоков, которые можно группировать по типу конструктора.
Готовые шаблоны
Шаблоны разделены на группы по тематике и назначению: Бизнес, Магазин, Событие, Контакты, Анкета.
Готовые блоки
Из библиотеки блоков можно выбрать самостоятельные дизайн-элементы: меню, текстовые блоки, изображения, видео, формы и кнопки, этапы, команда, отзывы, карты Гугл и Яндекс и так далее.
Готовые блоки автоматически подстраиваются под разные устройства — компьютер, смартфон, планшет. Для корректировки отступов или размера текста задайте режим отображения внизу настроек блока, двигая ползунок:
Подробнее о корректировке мобильной версии читайте в справочнике Тильды.
Текст и изображения
Для редактирования текста нужно кликнуть по нему. То же можно сделать из меню «Контент» (в стандартных блоках) и через «Редактировать блок» в Zero. Встроенный в редактор типограф для текстов убирает висячие предлоги, ставит правильные тире и кавычки.
Изображения можно загрузить с диска, перетащить, вставить ссылку на изображение в интернете. В стандартных блоках можно менять цвета, шрифты, иконки.
Zero-блоки
Для реализации сложных идей, мы используем Zero-блоки. В Zero-блоках все элементы создаются самостоятельно. Адаптировать сайт для разных устройств тоже нужно вручную.
Работа в Zero-блоке похожа на работу в графическом редакторе, только созданный индивидуальный дизайн можно сразу посмотреть в Тильде
Елена Сартасова, шеф-дизайнер Svoemedia
«Zero-тренды и минимализм в дизайне сайтов диктуют дизайнерам задачу больше акцентировать внимание на колористике и типографике. Главное – это контент, а дизайнер лишь создаёт атмосферу, помогающую считать его суть. Чем чище и однообразнее фоны и проще графика на сайте, тем интуитивнее и интеллектуальнее воспринимается сайт пользователем: когда ничто не мешает, сайт действительно хочется читать, а не просто рассматривать его дизайн. Простая блочная структура Тильды позволяет довольно легко создавать такой дизайн за счёт простоты компонентов: фон, текст, форма и картинка, которые есть в Zero-блоке и стандартных блоках».
С помощью Zero-блоков можно делать анимацию, но если сайт предполагает постоянную редактуру (особенно это актуально для сайтов мероприятий), нужно будет вносить правки во все разрешения.
Елена Сартасова, шеф-дизайнер Svoemedia
«Микроанимации — это возможность сделать сайт живым и говорящим. Тильда дает возможность настройки такой анимации. Сайт, дающий обратную тактильную связь, создает игру с пользователем, продлевая этим его время пребывания на сайте и упрощает знакомство с контентом».
Проанализировав задачи клиентов, мы создали библиотеку шаблонов на Тильде для типовых решений. Мы хотим, чтобы заказчики клиентов быстрее находили на сайтах то, что им нужно. А клиенты экономили деньги для развития бизнеса: такое решение позволило нам сократить стоимость разработки сайта для клиента в 12–15 раз.
Тильда позволяет делать эффектные сайты и, если овладеть её инструментами, сложно наткнуться на ограничения: немного изменив взгляд на элемент, можно адаптировать его без потерь.
Сценарии использования: для каких типов проектов подходит Тильда
Тильда — комфортная среда для создания, публикации, хранения и модификации проектов. В агентстве мы работаем преимущественно с большими проектами по классической схеме веб-разработки: схема, прототипирование, контент, дизайн, техническая оптимизация.
Тильда позволяет исключить полностью дорогостоящие этапы HTML-верстки и программирования и сократить стоимость разработки для нашей команды и клиента.
Александра Назмеева, менеджер проектов Svoemedia
«Тильда позволяет вовсе не привлекать полноценного разработчика даже для многостраничных сайтов (исключение — сложные калькуляторы и иные нетиповые задачи). По сравнению с разработкой сайтов полного цикла, сайты на Тильде сокращают время создания крупных проектов до 1,5–2 месяцев, включая этапы от прототипирования и написания контента до запуска работоспособной версии».
Сайт компании и лендинги
Если нужен сайт-презентация продукта или услуги, посадочная страница с формами обратной связи — Тильда подойдёт идеально.
Функции личного кабинета пользователя в Тильде на данный момент нет. В проекте компании UNIUP все презентационные страницы и блог сделаны на Тильде, а личный кабинет — внешняя ссылка на другой сайт:
Личный сайт или портфолио
На Тильде можно собирать сайты-портфолио, личные сайты специалистов.
Контент-проекты
На Тильде мы сделали и ведём самое большое медиа по химической промышленности в России: проект Инжинирингового химико-технологического центра в Томске.
Для этой ниши цифры очень приятные — 10 000 посетителей в месяц. По словам Ильи Мазова, директора по развитию ИХТЦ, контент-проект приносит от 15% годового оборота компании.
Максим Колташов, главный редактор SVOEMEDIA
«Я рад, что команда чаще всего использует для вёрстки статей именно Тильду: это позволяет разместить нужные блоки (подписка, ссылка на соцсети, перелинковка на другие материалы) быстро и именно там, где мне это необходимо. Результат всегда эстетически приятен, что улучшает поведенческие характеристики и в итоге положительно сказывается на ранжировании сайтов».
Полезные функции Тильды для контент-проектов:
В Тильде есть возможность дополнить текстовый контент фото- или видеоматериалами, что делает её удобным решением для публикации книг и лонгридов.
Чем хорош сайт на Тильде? И почему не надо лезть в дорогостоящие решения
Не часто приходится замечать решения предложенные на платформе Tilda, а зря. Почему так? Что такое вообще Tilda и для кого она?
Сразу отметим, что данный материал ни в коем случае не является рекламным, а представляет из себя анализ Тильды, как решение для бизнеса.
По факту в более чем 50% случаев от всех задач бизнеса в медиа пространстве, ваш сайт не нуждается в том, чтобы он был разработан кодом. Не обязательно ставить такие условия где необходимо будет привлекать верстальщика или программиста. В таких проектах обычно нуждается средний или крупный бизнес, так как к тому времени у компании сформировалось представление и сложные многоуровневые задачи, которые решаются только таким же сложными решениями.
Tilda в свою очередь тоже не является панацеей и не возведена в абсолютное значение, можно пользоваться другими решениями похожими на Тильду.
Что чаще всего приходится слышать про Тильду?
Во-вторых, скорее всего меня могут закидать тухлыми помидорами, но серьезная компания не будет стараться «выгрызать» серьезный сайт за условные 20.000 рублей. Тут 2 пути: или компания не такая серьезная, или же у директора нет понимания, что такое сайт и для чего он нужен.
2. «Не, Тильда не подойдет, у нее слишком урезанный функционал…»
Да, вы правы, Тильда имеет большое количество ограничений, но как правило если вы обращаетесь к профессионалам то выбор данного решения будет не случайным.
Отсюда вы сразу сможете понять профессионализм человека с которым обсуждаете будущий сайт еще на этапе брифинга. И насторожиться в случае если вам не задали ни одного вопроса относящегося к вашим пожеланиям, но почему-то сразу назвали тильду.
Тогда скорее всего вы общаетесь с командой, которая работает только на этой платформе или же с непрофессионалом.
Теперь, когда мы прониклись всей серьезностью данного решения. Сформулируем реальную ситуацию и ряд задач с которыми пришлось столкнуться заказчикам.
Рассмотрим параллельно 2 ситуации, которые могут показаться разными, но по факту объединены одним и тем же.
1. Заказчик не имеет серьезного бюджета, но ему срочно необходим небольшой сайт для мероприятия, которое стартует уже в конце недели.
2. Заказчик имеет серьезный бюджет, но у него отсутствуют амбициозные задачи и в целом планы на будущий сайт. Сроки не превышают 14 дней, но для простоты понимания давайте приведем также к 7 дням.
Задача
По факту перед нами стоит задача, как сделать симпатичный MVP-проект, в срок не превышающий 7 дней.
«Да, давайте здесь не будем заострять внимание и формировать представление, что вся web-разработка такая же быстрая и не затратная. В данной ситуации разбираются частные случаи, чтобы показать, что даже казалось бы в безвыходной ситуации есть решение»
День 1. Подбор референсов и обсуждение проекта
Для экономии времени и ресурсов приступаем к аналитике, но акцентируем внимание только на самых важных моментах, а именно:
какова будет общая концепция продукта;
какие есть конкуренты и что они из себя представляют;
Что нравится целевой аудитории;
что из референсов может лучше всего подойти.
Конец дня ознаменовывается обсуждением выбранных решений с заказчиками. На каждый из этапов тратим примерно по 2 часа.
День 2. Прототипирование
День 3-4. Дизайн
На данном этапе делаем акцент, выделяя под него 2 суток. Так как он является самым основным в рамках работы на Тильде. Определяемся с 3 наиболее интересными и продуманными работами в данной нише, предварительно все это согласовав с заказчиками. Первый день занимает подбор и поиск будущих элементов сайта, а именно:
иные визуальные элементы, которые нельзя отнести к чему-то конкретному, но от этого они не становятся менее важными
Все должно быть объединено общей идей, сочетаться между собой, что также отсылает нас к проработке первичной логики по которой уже идет дальнейший отбор элементов. На чем первый день удачно заканчивается. Собрав бэкграунд элементов, вспоминаем о тех исходных работах, которые мы взяли, как ориентир. После чего объединяем удачные идеи этих сайтов с теми элементами, что мы нашли, находясь в свободном плавании на ресурсах для дизайнеров.
День 5. Верстка
День 6. Подключение домена
День 7. Видео инструкции и обучение заказчика
Для этого записываем видеоинструкции:
как добавлять контент;
Как редактировать текст и менять изображения;
Как пользоваться панелью администратора
Где они уже самостоятельно сможет все настроить, повторяя шаги из видео.
Вывод
самозанятые или у вас небольшой стартап, когда нет уверенности в бизнес-модели;
Экономия на более чем половине команды разработчиков, отсекая программиста и верстальщика. Используя при этом 2-3 пары рук квалифицированных специалистов, позволяет получить продукт за весьма скромный бюджет, досягаемый для многих, кто развивает свое дело.
Tilda Publishing
Tilda помогает создавать впечатляющие сайты для бизнеса и медиа.
Публикуем новости про обновления платформы, ссылки на лучшие проекты, созданные нашими пользователями, и оригинальные статьи о дизайне и интернет-маркетинге.
Если у вас есть вопрос, связанный с работой платформы, пожалуйста, пишите на team@tilda.cc
Если вы хотите найти исполнителя сайта на Тильде или получать заказы на дизайн, пожалуйста, используйте сервис Tilda Experts http://experts.tilda.cc/ru/
Tilda Publishing запись закреплена
Бодрый, динамичный, зажигательный плейлист поднимет настроение, достанет вас из-под одеяла и заставит немного подвигаться в такт музыке. Пусть зима будет классной!
С какой музыкой и настроением вы встречаете зиму? Поделитесь в комментариях 
Tilda Publishing запись закреплена
Бесплатные мастер-классы Тильды в декабре
В декабре узнаете главные тренды #madeontilda 2021 года, как продвигать бизнес в соцсетях, научитесь создавать авторские проекты для портфолио и запускать онлайн-школу на базе Тильды и Airtable. Регистрируйтесь, чтобы получить ссылку на трансляцию перед началом:
1 декабря в 13:00
Показать полностью.
Tilda × Airtable: как запустить онлайн-школу
https://tilda.link/webinar-school
8 декабря в 13:00
Тренды в галерее #madeontilda 2021
https://tilda.link/webinar-mot
15 декабря в 13:00
Как продвигать бизнес в соцсетях
https://tilda.link/webinar-business
18 декабря в 13:00
Tilda Workshop: Создаём авторский проект для портфолио
https://tilda.link/workshop-projects
Записи всех вебинаров сохраняются на YouTube-канале Тильды. Подписывайтесь, чтобы не пропустить новые видео: https://www.youtube.com/c/TildaPublishing
▶ 1 декабря в 13:00
Tilda × Airtable: как запустить онлайн-школу
https://tilda.link/webinar-school
▶ 8 декабря в 13:00
Тренды в галерее #madeontilda 2021
https://tilda.link/webinar-mot
▶ 15 декабря в 13:00
Как продвигать бизнес в соцсетях
https://tilda.link/webinar-business
▶ 18 декабря в 13:00
Tilda Workshop: Создаём авторский проект для портфолио
https://tilda.link/workshop-projects
Tilda Publishing запись закреплена
Итоги Tilda Design Battle 2
Вчера в прямом эфире подвели итоги второй творческой битвы дизайнеров на Тильде.
Вы прислали на проверку 280 работ! Спасибо каждому за участие, активность в комментариях и классную атмосферу на стриме. Поздравляем победителей!
Показать полностью.
Работы участников можно посмотреть на странице баттла: https://blog.tilda.cc/designbattle2#winners.
Видеоразбор работ на YouTube-канале Тильды: https://youtu.be/poGLsypJYAo
До встречи в следующих баттлах!
🖤 Вы прислали на проверку 280 работ! Спасибо каждому за участие, активность в комментариях и классную атмосферу на стриме. Поздравляем победителей!
1 место: Дени CV http://guggeinheimmuseum.tilda.ws
2 место: Юлия Олефиренко http://guggenheim.org.tilda.ws
3 место: Александр Коломеец http://museum-sg.tilda.ws
4 место: Николай Геки http://guggenheimbattlenumberone.tilda.ws
5 место: RSLS THUG http://project4884103.tilda.ws
Приз зрительских симпатий: Apricot http://guggenheimuseum.tilda.ws
Работы участников можно посмотреть на странице баттла: https://blog.tilda.cc/designbattle2#winners.
Видеоразбор работ на YouTube-канале Тильды: https://youtu.be/poGLsypJYAo
Tilda Publishing запись закреплена
Открыто задание для участников Tilda Design Battle https://blog.tilda.cc/designbattle2#task.
Tilda Design Battle — это творческая битва дизайнеров на Тильде. Участвовать может любой человек, который умеет создавать сайты на платформе.
1. Выполненную работу необходимо прислать сегодня до 23:59 через форму на странице баттла.
2. Результат нужно отправить в виде ссылки на опубликованный сайт, созданный в Тильде. Ссылки на макеты из графического редактора не принимаются.
Дополнительные требования:
— страница должна быть адаптирована под разные экраны;
— нужно использовать в дизайне весь текст из ТЗ;
— уникальность решений будет учитываться особым образом.
3. После окончания приёма заявок вносить изменения в содержание или внешний вид сайта запрещено. Мы отслеживаем это по времени публикации страницы. Если страница будет переопубликована позже, организаторы имеют право дисквалифицировать участника, даже если изменения не вносились.
4. Один участник может прислать только одну работу.
5. Победителей объявим в прямом эфире на нашем YouTube-канале 29 ноября в 13:00 по московскому времени. Ссылку на трансляцию пришлем на почту.
Все условия участия и информацию о призах смотрите по ссылке: https://blog.tilda.cc/designbattle2.
Tilda Publishing запись закреплена
Tilda Design Battle 2
Уже завтра пройдёт новая творческая битва дизайнеров на Тильде! Попробуйте свои силы и вдохновитесь на создание классных сайтов в борьбе за призовые места.
Начало в 9:00 по Москве.
Подробности 
https://blog.tilda.cc/designbattle2
Начало в 9:00 по Москве.
Tilda Publishing запись закреплена
Заголовки на сайте
Заголовки позволяют человеку сканировать страницу, читать текст нелинейно и быстро находить информацию. Рассказываем, как писать и оформлять заголовки.
— Текст заголовка
Показать полностью.
Каждая новая секция сайта несёт в себе новую мысль. Кратко и чётко сформулируйте эту мысль в заголовке. Не пишите сложных фраз, человек должен считывать заголовок за миллисекунды. Вместо «Убедитесь, что курс подходит именно для вас» напишите «Для кого курс».
— Шрифт заголовка
Для заголовков можно использовать другую насыщенность шрифта или даже другой шрифт. Главное, чтобы типографика заголовка и основного текста сочетались, но заголовок сразу считывался без труда, не сливаясь с текстом.
— Размер заголовка
Заголовок, как правило, делают крупнее основного текста. Самое важное правило — все заголовки одинаковых по значению секций должны быть одинакового размера. Иначе не будет соблюдаться иерархия, и человек будет путаться на странице.
Например, если первый заголовок «О курсе» размером 62px, то заголовок следующей секции «Для кого курс» также должен быть 62px — так страница будет аккуратной, а новая секция и новая мысль будут легко считываться.
— Отступы вокруг заголовка
Отступ между заголовком и относящимся к нему текстом должен быть равен расстоянию между абзацами или быть в полтора раза больше. Отступ над заголовком лучше делать в два раза больше, чем под ним. Так заголовок не прилипнет к предыдущей секции и будет относиться к последующему тексту.
Чтобы структура страницы хорошо считывалась не только людьми, но и роботами, назначьте заголовку на обложке тег H1, а заголовкам секций — тег H2. Для поисковых систем это будет знаком хорошей разметки и правильной структуры страницы. Для добавления тега в настройках блоков с заголовками есть параметр SEO: Тег для заголовка.
Полезный пост? Расскажите в комментариях 
— Текст заголовка
Каждая новая секция сайта несёт в себе новую мысль. Кратко и чётко сформулируйте эту мысль в заголовке. Не пишите сложных фраз, человек должен считывать заголовок за миллисекунды. Вместо «Убедитесь, что курс подходит именно для вас» напишите «Для кого курс».
— Шрифт заголовка
Для заголовков можно использовать другую насыщенность шрифта или даже другой шрифт. Главное, чтобы типографика заголовка и основного текста сочетались, но заголовок сразу считывался без труда, не сливаясь с текстом.
— Размер заголовка
Заголовок, как правило, делают крупнее основного текста. Самое важное правило — все заголовки одинаковых по значению секций должны быть одинакового размера. Иначе не будет соблюдаться иерархия, и человек будет путаться на странице.
Например, если первый заголовок «О курсе» размером 62px, то заголовок следующей секции «Для кого курс» также должен быть 62px — так страница будет аккуратной, а новая секция и новая мысль будут легко считываться.
— Отступы вокруг заголовка
Отступ между заголовком и относящимся к нему текстом должен быть равен расстоянию между абзацами или быть в полтора раза больше. Отступ над заголовком лучше делать в два раза больше, чем под ним. Так заголовок не прилипнет к предыдущей секции и будет относиться к последующему тексту.
📌 Чтобы структура страницы хорошо считывалась не только людьми, но и роботами, назначьте заголовку на обложке тег H1, а заголовкам секций — тег H2. Для поисковых систем это будет знаком хорошей разметки и правильной структуры страницы. Для добавления тега в настройках блоков с заголовками есть параметр SEO: Тег для заголовка.