Примеры сайтов на Tilda Publishing (Тильда)

Tilda — конструктор сайтов блочного типа, в котором можно собрать лендинг, интернет-магазин, блог, портфолио, а также проекты для медиа: лонгриды, фотоистории, мультимедийные страницы.

Конструктор предлагает много способов отображения контента, поэтому иногда сложно выбрать, какие именно инструменты выбрать для реализации проекта. Если вы столкнулись с такой проблемой, то посмотрите нашу подборку сайтов на Tilda, которая может вдохновить на новые свершения в веб-дизайне и заодно покажет, как можно использовать возможности, которые предлагает сервис.

Topproekt.com – портфолио архитектурной компании, при создании которого использовано минимальное количество возможностей Tilda. Судя по домену, у разработчика был подключен тариф Personal, на котором копирайт конструктора в футере убирается. Однако лейбл Made on Tilda остался на своём месте. То же относится к значку конструктора, который отображается по умолчанию на вкладке рядом с названием сайта. Чтобы заменить его, достаточно зайти в настройки проекта и загрузить другое изображение.

При создании сайта использовались только стандартные блоки, поэтому страницы не очень интересно изучать. Всё-таки портфолио должно вызывать какие-то эмоции, а здесь представлены только четыре вида блоков: текст, врезка, отдельные изображения и галереи. Из положительных моментов отметим наличие полноценной англоязычной версии сайта. Переключатель языков находится в меню навигации, которое остаются закреплённым наверху при скроллинге. В остальном потенциал Tilda не раскрыт даже на треть — учитывая тематику, можно было сделать портфолио гораздо более привлекательным.

Myfitworld.ru – персональный лендинг тренера по фитнесу, который отлично демонстрирует возможности Tilda для создания одностраничников. В отличие от предыдущего примера, здесь вместо скучного белого листа добавлен фон. Такая функция есть среди стандартных блоков конструктора, нужно просто выбрать её и добавить изображение, которое будет оптимизировано под размер экрана. Однако разработчик лендинга не ограничился только стандартными формами и явно использовал Zero Block — мощный редактор, в котором можно создавать блоки с нуля и настраивать их отображение для разных экранов и ориентаций.

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

Kitchenceremony.com – интернет-магазин пряностей и кухонных аксессуаров, демонстрирующий продающие возможности Tilda. В каталоге перед каждым типом товаров располагается блок с коротким описанием. Из него можно узнать о составе продукта и о блюдах, к которым он подходит. У каждого товара есть отдельная страница с подробным описанием, несколькими фотографиями и кнопкой в «В корзину».

Сама корзина представлена в виде простой формы, в которой необходимо указать имя, e-mail, телефон и выбрать способ доставки. Оплаты онлайн нет, но это решение магазина, а не недостаток Tilda. Конструктор предлагает интеграцию с 12 платёжными системами, среди которых PayPal, Robokassa, «Яндекс.Деньги» и «Сбербанк». Подключаются они на одноимённой вкладке в настройках проекта. На главной странице располагаются самые популярные товары, а также ссылки на разделы каталога. На сайте есть журнал с тематическими материалами. Перейти в него можно через меню навигации или с помощью блока с последними статьями внизу главной страницы. Чистая, красивая и удобная вёрстка — на Tilda добиться этого не так уж и сложно.

Partner.tochka.com – сайт-одностраничник банка для предпринимателей, который бьёт в целевую аудиторию лаконичным и стильным дизайном без лишних эффектов. Главная цель страницы — рассказать о возможностях для бизнеса. Делается это с помощью пяти стандартных блоков Tilda и трёх основных цветов.

Правда, в некоторых случаях минимализм становится чрезмерным. На странице есть только одна кнопка «Заказать счёт». Она располагается на первом экране и не спускается вниз при скроллинге. Если, допустим, посетитель захочет сделать заказ после блока с тарифами, то ему придётся возвращаться наверх или спускаться вниз. Сама форма заявки содержит только поле для ввода номера телефона. Можно было добавить хотя бы имя, а так получается, что менеджеру приходится знакомиться с клиентом при звонке. Имя легко бы влезло на место, которое занимает номер телефона — там всё равно куча свободного пространства. Исправить этот недостаток можно стандартными инструментами Tilda, нужно лишь правильно отладить форму.

Logomachine.ru – если в предыдущем примере целевая аудитория вряд ли оценила бы большое количество эффектов, то в случае с сайтом дизайн-студии по созданию логотипов они как никогда кстати. Для создания блоков использовался редактор Zero Block с пошаговой настройкой анимации и разными триггерами. Например, на первом экране элементы реагируют на курсор, а при перечислении проектов ниже начинают движение при появлении блока на экране.

В мобильной версии сайта всё скомпоновано тоже очень круто: элементы аккуратно располагаются по вертикали, отступы везде одинаковые, блоки не давят друг на друга. Внизу постоянно висят кнопки чата и заказа обратного звонка, так что если после изучения очередного проекта у посетителя внезапно возникнет сильное желание обратиться в дизайн-студию, ему не придётся скроллить страницу в поисках контактов.

Ptichka.me – сайт сети парикмахерских, филиалы которой расположены в разных концах России. Для каждого города сделана собственная версия сайта, чтобы посетители получали корректную информацию о стоимости, которая заметно отличается. Для быстрого перехода к списку услуг в меню есть раздел «Цены», но работает он только для московской версии. Для других городов якорь не работает. Исправляется это правильной настройкой ссылки.

Новости добавляются в виде отдельных страниц и содержат много больших фотографий, так что их интересно просматривать. На сайте реализована возможность онлайн-записи, которую обеспечивает виджет от YCLIENTS. Он есть среди стандартных блоков конструктора в категории «Другое». Чтобы добавить его, достаточно создать виджет на сервисе YCLIENTS, а затем прописать в контенте блока номер формы онлайн-записи.

Blog.partiyaedi.ru – блог компании, которая занимается доставкой продуктов и рецептов. Главная страница представляет собой список записей, выведенных в хронологическом порядке. Каждая запись относится к одному из разделов: «О еде», «О вине», «О партии». Ссылки на них выведены в меню навигации, что очень удобно: если, например, вы хотите узнать только последние новости компании, то достаточно нажать на кнопку «О партии». Есть ссылка и на каталог, в котором можно заказать блюда на неделю.

Записи в блоге сделаны в виде отдельных страниц, построенных по единому макету. Свой шаблон есть у каждого раздела. Это позволяет сформировать единый стиль повествования и делает блог удобным и привлекательным. Использование шаблонов позволяет ускорить процесс подготовки страницы: фактически нужно только заменить фотографии и текст. Это одно из главных преимуществ Tilda: красиво здесь не равно долго.

Подводим итог

В подборке мы постарались показать примеры использования Tilda для создания разных типов сайтов: портфолио, лендинга, интернет-магазина, блога, сайта компании. В них были использованы стандартные блоки и элементы, созданные через Zero Block.

Надеемся, что это помогло вам лучше понять, как использовать конструктор, и теперь вы самостоятельно создадите на нём привлекательный проект.