Содержание:
Выкручиваем Тильду на максимум. Неожиданные тонкости, которые помогут создать топовый сайт
Подходит ли Тильда для решения всех задач веб-разработки? Очевидно, что нет, но есть способ существенно расширить её возможности. В этой статье расскажу, по каким принципам работает конструктор и поделюсь тонкостями, которые помогут вам создать эффектный и технически грамотный сайт.
На что способна Тильда? Краткий экскурс по её функционалу
Стандартные блоки — идеал для динамического контента
Zero-блоки — полная свобода действий или снова ограничения?
Как Тильда преобразует блоки в сайт?
Модификации для Тильды. Как кастомизировать сайт с помощью кода?
Плюсы и минусы Тильды за 5+ лет работы с ней
А что, если хочется большего? Разбираем более продвинутые аналоги Тильды
На что способна Тильда? Краткий экскурс по её функционалу
Тильда — это конструктор сайтов, с помощью которого можно:
У Тильды есть всё, что нужно: формы, виджеты, всплывающие окна, карточки, и даже CMS (система управления контентом). Фактически, вся клиентская и серверная часть уже настроена, остаётся только создать подходящий дизайн. Именно поэтому конструктор так популярен среди дизайнеров: им не нужно обращаться к разработчикам, чтобы превратить свои идеи в сайт.
Страницы на Тильде строятся из смысловых блоков. Так и дизайнерам, и пользователям, проще ориентироваться в информации. Они бывают двух типов:
- Создавать небольшие лендинги и лонгриды;
- Разрабатывать многостраничные сайты;
- Собирать заявки в СRM-системы;
- Подключать платёжные системы и принимать оплату;
- Верстать и отправлять email-рассылки;
- Проводить веб-аналитику и многое другое.
У Тильды есть всё, что нужно: формы, виджеты, всплывающие окна, карточки, и даже CMS (система управления контентом). Фактически, вся клиентская и серверная часть уже настроена, остаётся только создать подходящий дизайн. Именно поэтому конструктор так популярен среди дизайнеров: им не нужно обращаться к разработчикам, чтобы превратить свои идеи в сайт.
Страницы на Тильде строятся из смысловых блоков. Так и дизайнерам, и пользователям, проще ориентироваться в информации. Они бывают двух типов:
- Стандартные блокиЭто готовые решения с текстами, изображениями, кнопками и т. д. Они предоставляют базовый набор элементов для быстрого создания страниц.
- Zero-блокиЭто пустые блоки, которые дают полную свободу в создании дизайна с нуля. Они позволяют добавлять и гибко редактировать элементы интерфейса самостоятельно
У каждого из этих типов есть свои особенности и секреты. Давайте рассмотрим их подробнее.
Стандартные блоки — идеально для динамического контента
Тильда предлагает более 500 вариантов стандартных блоков, объединенных по смыслу в категории: обложки, текст, галереи, преимущества, меню и т. д. Редактировать контент и стили в таких блоках очень легко — каждый из них имеет большое количество настроек, от самого содержания до типографики и анимаций.
Библиотека стандартных блоков. Источник Tilda Publishing
Стандартные блоки очень гибкие с точки зрения адаптивов — они на 95% состоят из flex-контейнеров (дизайнеры называют это «автолэйаутом») и меняют свои размеры в зависимости от ширины экрана и элементов внутри них. Поэтому их очень удобно использовать в работе с динамическим контентом — создавать на их основе повторяющиеся карточки с описанием товаров, программы мероприятий или галереи со ссылками, которые будут отлично отображаться на всех устройствах.
С технической точки зрения у стандартных блоков есть нюансы. Каждый блок имеет определенную структуру элементов, которую нельзя изменить. Например, нельзя вынести текст за пределы карточки или добавить кнопку закрытия внутри неё. Также не получится изменить стили, не предусмотренные в настройках блока — внутренние отступы в карточках, радиус скругления отдельных элементов и так далее.
Эта особенность позволяет быстро добавлять блоки на сайт, но при этом накладывает ограничения для дизайнеров, которые хотят создать уникальный визуальный стиль. Для решения этой проблемы они прибегают к использованию Zero-блоков.
С технической точки зрения у стандартных блоков есть нюансы. Каждый блок имеет определенную структуру элементов, которую нельзя изменить. Например, нельзя вынести текст за пределы карточки или добавить кнопку закрытия внутри неё. Также не получится изменить стили, не предусмотренные в настройках блока — внутренние отступы в карточках, радиус скругления отдельных элементов и так далее.
Эта особенность позволяет быстро добавлять блоки на сайт, но при этом накладывает ограничения для дизайнеров, которые хотят создать уникальный визуальный стиль. Для решения этой проблемы они прибегают к использованию Zero-блоков.
Zero-блоки — полная свобода действий или снова ограничения?
Zero-блоки — это пустые блоки, которые наполняются элементами с нуля. Тильда позволяет добавлять туда всё необходимое: текст, кнопки, изображения, формы, видео и многое другое. Все элементы настраиваются крайне гибко, что позволяет создавать уникальные дизайны, не привязанные к шаблонам конструктора. Правда, это требует более глубоких знаний UX/UI и навыков работы с платформой.
Панель настроек в Zero-блоке
В отличие от стандартных блоков, в Zero-блоках все элементы имеют абсолютное позиционирование — координаты вычисляются относительно самого Zero-блока, поэтому задать им положение по отношению друг к другу не получится.
Эта проблема также касается и адаптивного дизайна. Так как здесь отсутствуют flex-контейнеры, автоматически меняющие свои размеры, отображение для разных устройств приходится настраивать вручную. По умолчанию Тильда предлагает 5 вариантов адаптивов, проработка которых занимает приличное количество времени.
Несмотря на это, у Zero-блоков есть и существенное преимущество — весь дизайн можно перенести из Фигмы и не тратить время на добавление каждого элемента вручную. Тем не менее, после переноса, вам всё равно придётся настраивать адаптивы — импортировать из Фигмы можно только макет для компьютерной версии сайта.
Ещё один приятный бонус — это step-by-step анимации, которые можно пошагово настраивать для каждого элемента. Это особенно полезно, так как сайты с микровзаимодействиями выглядят более выигрышно и вовлекают пользователей с первых секунд.
В итоге Zero-блоки получаются достаточно сложным, но мощным инструментом для создания страниц с уникальным дизайном. Сайты на Тильде, которые попадают в подборку лучших, состоят в основном из Zero-блоков. Стандартные же блоки используются только в местах, где планируется частое обновление контента.
Эта проблема также касается и адаптивного дизайна. Так как здесь отсутствуют flex-контейнеры, автоматически меняющие свои размеры, отображение для разных устройств приходится настраивать вручную. По умолчанию Тильда предлагает 5 вариантов адаптивов, проработка которых занимает приличное количество времени.
Несмотря на это, у Zero-блоков есть и существенное преимущество — весь дизайн можно перенести из Фигмы и не тратить время на добавление каждого элемента вручную. Тем не менее, после переноса, вам всё равно придётся настраивать адаптивы — импортировать из Фигмы можно только макет для компьютерной версии сайта.
Ещё один приятный бонус — это step-by-step анимации, которые можно пошагово настраивать для каждого элемента. Это особенно полезно, так как сайты с микровзаимодействиями выглядят более выигрышно и вовлекают пользователей с первых секунд.
В итоге Zero-блоки получаются достаточно сложным, но мощным инструментом для создания страниц с уникальным дизайном. Сайты на Тильде, которые попадают в подборку лучших, состоят в основном из Zero-блоков. Стандартные же блоки используются только в местах, где планируется частое обновление контента.
Вот яркий пример, созданный на Zero-блоках:
Как Тильда преобразует блоки в сайт?
Как из комбинации стандартных и Zero-блоков получается готовый сайт? Дизайнеры редко задумываются об этом, хотя, именно благодаря пониманию этих механик, можно создавать модификации, делающие сайты в разы более изящными.
Итак, что происходит с сайтом, когда он загружается? Как мы помним, в стандартных блоках элементы имеют гибкую вёрстку и относительное позиционирование — то есть, располагаются друг в друге и меняют свои размеры в зависимости от содержимого. Это заранее прописывается в настройках каждого блока, за счёт чего они прорисовываются очень быстро — по мере загрузки самой страницы. С этим всё просто.
С Zero-блоками ситуация немного другая. Все параметры, которые мы задаём для элементов, хранятся не в стилях, а в HTML-атрибутах. Когда сайт загружается, Тильда запускает скрипт, который достаёт из этих атрибутов параметры и только потом на их основе генерирует стили (CSS-код). На загрузку и выполнение этого скрипта уходит время, поэтому Zero-блоки грузятся дольше, чем стандартные — вплоть до 3 секунд.
После отрисовки всех блоков, Тильда загружает для них функционал — это делается с помощью скриптов, встроенных в конструктор. Так, например, при наличии на странице соответствующих элементов, Тильда может подгружать модули галерей, форм обратной связи, статистики и т. д. Для зеро-блоков у Тильды также есть отдельный модуль — в нём содержится всё необходимое для его работы.
И наконец, загружаются изображения и медиафайлы. Это происходит по принципу «lazy load», то есть грузятся только те файлы, которые попадают в поле зрения пользователей при заходе на сайт. Остальные изображения превращаются в сжатые превью и подгружаются по мере прокрутки страницы. Это ускоряет загрузку сайта и повышает его доступность с точки зрения SEO.
Еще один интересный момент заключается в том, что Тильда по-разному обрабатывает элементы в зависимости от типа устройства. Так, например, стандартные блоки могут менять свою структуру и расположение на мобильных устройствах, а в Zero-блоках в зависимости от операционной системы и браузера по-разному генерируется CSS-код.
Понимание этих механизмов позволяет перейти к следующему уровню сложности — созданию и использованию модификаций для Тильды.
Итак, что происходит с сайтом, когда он загружается? Как мы помним, в стандартных блоках элементы имеют гибкую вёрстку и относительное позиционирование — то есть, располагаются друг в друге и меняют свои размеры в зависимости от содержимого. Это заранее прописывается в настройках каждого блока, за счёт чего они прорисовываются очень быстро — по мере загрузки самой страницы. С этим всё просто.
С Zero-блоками ситуация немного другая. Все параметры, которые мы задаём для элементов, хранятся не в стилях, а в HTML-атрибутах. Когда сайт загружается, Тильда запускает скрипт, который достаёт из этих атрибутов параметры и только потом на их основе генерирует стили (CSS-код). На загрузку и выполнение этого скрипта уходит время, поэтому Zero-блоки грузятся дольше, чем стандартные — вплоть до 3 секунд.
После отрисовки всех блоков, Тильда загружает для них функционал — это делается с помощью скриптов, встроенных в конструктор. Так, например, при наличии на странице соответствующих элементов, Тильда может подгружать модули галерей, форм обратной связи, статистики и т. д. Для зеро-блоков у Тильды также есть отдельный модуль — в нём содержится всё необходимое для его работы.
И наконец, загружаются изображения и медиафайлы. Это происходит по принципу «lazy load», то есть грузятся только те файлы, которые попадают в поле зрения пользователей при заходе на сайт. Остальные изображения превращаются в сжатые превью и подгружаются по мере прокрутки страницы. Это ускоряет загрузку сайта и повышает его доступность с точки зрения SEO.
Еще один интересный момент заключается в том, что Тильда по-разному обрабатывает элементы в зависимости от типа устройства. Так, например, стандартные блоки могут менять свою структуру и расположение на мобильных устройствах, а в Zero-блоках в зависимости от операционной системы и браузера по-разному генерируется CSS-код.
Понимание этих механизмов позволяет перейти к следующему уровню сложности — созданию и использованию модификаций для Тильды.
Модификации для Тильды. Как кастомизировать сайт с помощью дополнительного кода?
Как показывает практика, пользователи быстро привыкают к Zero-блокам, и со временем, их использования становится недостаточно для создания конкурентоспособного сайта. Дизайнерам часто не хватает «изюминки», чтобы выделить сайт среди сотен других. Эту проблему помогают решить модификации — сторонний код, который расширяет возможности конструктора.
Благодаря таким модификациям можно:
Благодаря таким модификациям можно:
- Сделать дизайн стандартных блоков уникальным, сохранив при этом гибкую вёрстку и адаптацию под размеры экрана
- Расширить функционал Zero-блоков и добавить в них возможности стандартных блоков: всплывающие окна, меню, раскрывающиеся списки и др.
- Добавить на сайт уникальные «фишки», например, 3D-анимации, эффекты появления, необычные прелоадеры и многое другое
- Создать свой алгоритм поведения элементов и блоков, недоступный через step-by-step анимацию
- Подключить полезные сервисы или базы данных, у которых нет прямой интеграции с Тильдой
- И даже автоматизировать проработку адаптивов для разных устройств, ускорив тем самым процесс создания страниц
Модификации делают из Тильды настоящего «монстра» веб-дизайна, способного практически на всё. Они представляют из себя HTML-код, который может содержать как сами элементы, так и скрипты и стили для них. Его можно без проблем вставить на сайт — с помощью стандартных блоков с поддержкой кода или отдельных HTML-элементов внутри Zero-блоков. Стили, добавленные через свой CSS-код, загружаются сразу, а скрипты — после полной загрузки документа, чтобы избежать ошибок во время рендеринга.
Примеры модификаций, которые я использую в своих проектах:
Примеры модификаций, которые я использую в своих проектах:
Autoscale для планшетов
Автоматическое масштабирование страниц, которое позволяет прорабатывать только 2 версии адаптивов вместо 5
Zero-слайдеры
Настраиваемые галереи из зеро-блоков с возможностью переключения слайдов
Поп-апы из Zero-блоков
Всплывающие окна с возможностью переключения слайдов и отправки заявок
Zero-вкладки
Настраиваемые вкладки из зеро-блоков с возможностью переключения по слайдам
Шапка и меню из Zero-блоков
Навигация и бургер с подсветкой текущей страницы и анимацией по скроллу.
Кнопка «Вернуться назад»
Механизм, возвращающий пользователя на предыдущую страницу или главный экран, если такой не обнаружилось
Также существуют сервисы, которые предоставляют целые библиотеки таких модификаций по подписке. Самые популярные — Nolim и Annexx. Если платить за них не хочется, на просторах интернета можно найти бесплатный код, но он, скорее всего, не будет адаптирован для конкретного сайта и его придётся настраивать вручную.
Другой вариант — написать модификацию самостоятельно или заказать её разработку «под ключ». Так вы получите производительный код, максимально подходящий запросам вашего сайта и её целевой аудитории.
Другой вариант — написать модификацию самостоятельно или заказать её разработку «под ключ». Так вы получите производительный код, максимально подходящий запросам вашего сайта и её целевой аудитории.
Модификации делают Тильду намного мощнее. Они превращают её в профессиональный инструмент, с помощью которого создаются передовые сайты по меркам российского рынка и стран СНГ. В руках профессионалов Тильда имеет практически безграничные возможности, если её правильно настроить.
Посмотрите, как эффектно может выглядеть сайт с модификациями:
Посмотрите, как эффектно может выглядеть сайт с модификациями:
Плюсы и минусы Тильды за 5+ лет работы с ней
Изучив практически весь функционал Тильды и поработав с её альтернативами, могу сказать, что она является одним из лучших конструкторов сайтов. Если максимально раскрыть её потенциал, Тильды хватит для реализации большинства проектов малого и среднего бизнеса.
Её плюсы:
- Интуитивный визуальный редактор с блочной структурой
- Быстрота разработки и низкая стоимость владения сайтом
- Большая библиотека стандартных блоков с готовым функционалом
- Возможность создавать уникальный дизайн в Zero-блоках с нуля или импортировать его из Фигмы
- Гибкая настройка блоков и страниц сайта, возможность подключения собственного кода и удобная панель управления
- Интеграции с большим количеством сервисов — от приёма заявок до сквозной аналитики и CRM
- Хорошие возможности для SEO-оптимизации
Тем не менее, минусы тоже есть:
- Ограничения по функционалу решаются только кодом
- Технически сложная адаптация под разные устройства
- Длительная загрузка страниц из-за нагруженности Zero-блоков
- Максимальный объём сайта — 500 страниц
- Отсутствует возможность работать с файлами сайта
- Нет возможности связывать сущности в CMS
- Масштабировать страницы сайта можно только вручную
Тильда отлично справляется с задачами, в которых не требуется технически сложный функционал и масштабная архитектура — с её помощью можно быстро создавать эффектные лендинги и многостраничные сайты. В то же время для более сложных проектов, она скорее станет «узким горлышком» из-за ограничений по количеству страниц, отсутствия управляемого хостинга и продвинутой CMS.
А что, если хочется большего?
Разбираем более продвинутые аналоги Тильды
Если проект сложный, и возможностей Тильды становится недостаточно, на помощь приходят более продвинутые инструменты.
Webflow
No-code платформа, которая почти полностью повторяет функционал Фигмы, только используется для создания сайтов. У неё так же, как и у Тильды, есть интуитивно понятный визуальный редактор, но сама начинка гораздо серьёзнее: можно настраивать абсолютно любые параметры, использовать компоненты и привязывать элементы к CMS. Также здесь нет проблем с адаптивностью и гибкой вёрсткой, сайты отлично оптимизированы, и у них есть своя файловая система.
Интерфейс Webflow при разработке страницы о мероприятии
На Webflow можно создавать действительно сложные и многокомпонентные проекты. Хотя это и требует сильных навыков в дизайне и разработке, полученный результат солидно окупается. Единственный существенный минус платформы — в России её будущее пока стоит под вопросом. Webflow — американский сервис, у которого нет локальных дата-центров, из-за чего есть риск его блокировки Роскомнадзором. Тем не менее, если компания не ведёт деятельность в России, этот риск автоматически нивелируется. Остаются только плюсы.
Сайты, созданные на Webflow, выходят не менее привлекательными, чем на Тильде:
Сайты, созданные на Webflow, выходят не менее привлекательными, чем на Тильде:
1С-Битрикс
На этот раз уже российская платформа для создания корпоративных сайтов и веб-приложений. Она предлагает широкий функционал — управление контентом, аналитику, интеграцию с внешними системами, защиту данных и многое другое.
Страница мероприятия на 1С-Битриксе — не так интуитивно, как в Webflow
На Битриксе создаётся практически всё: от небольших сайтов до крупных интернет-магазинов с тысячами активных пользователей в день. Единственное ограничение здесь — бюджет. С этой платформой, как правило, работают целые команды разработчиков и дизайнеров из-за её технической сложности и непростого интерфейса. Поэтому сайты на этой системе будут стоить дорого.
Или очень дорого. Например:
Или очень дорого. Например:
Всё же, несмотря на все недостатки и ограничения Тильды, а также её альтернативы, считаю её лучшим инструментом для решения задач малого и среднего бизнеса. Возможно, те, кто не так её любит, просто не раскрыли весь потенциал этой платформы.
Максим Постников
Все права на данный материал принадлежат Постникову Максиму Дмитриевичу. Статью можно свободно распространять, сохраняя авторство. Присвоение материалов или использование без указания источника запрещено и может повлечь ответственность согласно законодательству РФ.
Расскажите о своём проекте в короткой форме или свяжитесь со мной в мессенджере.
Есть задача? Давайте обсудим!
Также можно написать мне на почту hello@postnikovmd.com
Расскажите о своём проекте здесь или свяжитесь со мной в мессенджере.
Другие статьи
© 2024 Максим Постников. Все права защищены.