Примеры сайтов, созданных в Tilda - обзор от site-builders.ru

Примеры сайтов, созданных в Tilda

Дата:
Просмотров:
Автор:
Сергей Гаврилов

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

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

Пример 1: Экзотические фрукты с доставкой

Tilda.cc - пример сайта одностраничника

Ji-fruits.ru – пример того, как на Tilda можно создать одностраничный сайт с функциональностью интернет-магазина. Есть возможность посмотреть состав набора или сразу добавить товар в корзину. Поддерживается использование промокодов, которые можно получить, например, за отзыв. Не хватает только оплаты онлайн — рассчитаться можно с курьером, наличными или банковской картой.

Ответы на частые вопросы реализованы с помощью стандартного блока — их не так много, но выглядят они красиво. Для общения с клиентами есть форма обратной связи, форма обратного звонка и виджет поддержки ВКонтакте — всё это сделано штатными инструментами конструктора.


Пример 2: Морские Экспедиции

Marinexp.ru – многостраничный сайт о морской экспедиции. Подробно рассказывает о том, как команда организует кругосветное путешествие. Есть карты, большие фотографии и галереи. Для отправки сообщений добавлена форма обратной связи и e-mail, при нажатии на который открывается почтовый клиент.

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


Пример 3: Вечеринки с искусством

Painty.ru – сайт про организацию арт-вечеринок, который погружает в их атмосферу с первого взгляда благодаря блоку с видео. Пример того, как можно организовать многостраничный сайт на Tilda, чтобы навигация была удобной.Есть возможность выбрать город, чтобы увидеть ближайшие вечеринки. На главную страницу добавлен виджет Instagram, который выводит ленту с фотографиями. Это стандартный блок Tilda, который обновляется при загрузке фотографий в профиль.

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


Пример 4: Продакшн-студия

Выбор первого блока для сайта продакшн-студии Vaderstudio.com очевиден — обложка с логотипом и видео. Дальше можно ничего не рассказывать, кроме того, как заказать такую же штуку.

Страница получилась очень короткой, но информативной: несколько лучших примеров работ с коротким описанием задачи, которую нужно было выполнить; эмблемы клиентов, чтобы показать значимость на рынке; форма обратной связи и контакты. Хотите подробностей? В меню есть ссылка на отдельную страницу с проектами, где есть описание и видео, спрятанное под катом. Информации очень много, но она не выглядит как нагромождение благодаря грамотному использованию инструментов конструктора.


Пример 5: Официальный сайт GANT

Gant.ru – сайт торговой марки Gant, который работает как каталог одежды и блог. Можно было организовать и онлайн-продажи, на Tilda есть необходимые для этого инструменты, но, видимо, такой цели у разработчиков не было.

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


Пример 6: Бухгалтерия и банк для бизнеса

Elbabank.ru – отличный пример одностраничника, созданного на Tilda. При открытии на десктопе есть меню для быстрой навигации по страницу. На мобайле меню уменьшается до двух разделов — «Тарифы» и «Акции», плюс рядом появляется кнопка звонка.

Для визуального разделения блоков используется заливка фона. При нажатии на кнопки «Выбрать», «Попробовать», «Подключить» появляется форма, в которой можно оставить контакты. Раздел с часто задаваемыми вопросами спрятан под кнопками «Узнать больше» — ещё один пример грамотного использования инструментов для экономии место на одностраничнике.


Пример 7: Кепки ручной работы

Special.radkecaps.com – пример одного из сценариев использования Tilda, когда на конструкторе создаётся специальный проект, который привязывается к основному сайту через поддомен. Ещё один важный момент — интеграция с ВК. Для поддержки используется виджет Вконтакте, который пересылает вопросы посетителей в сообщения сообщества в соцсети.

Основной упор сделан на демонстрацию кепок, но галерея реализована не самым удачным образом. Слишком много примеров, непонятно, зачем они нужны. Если хочется добавить все работы, можно выбрать блок с обычной галерей, которая листается в сторону — это сэкономит место на странице.

Внизу остался логотип Tilda, что странно: если на страницу подключен поддомен, значит, она работает минимум на тарифе Personal, на котором можно убрать рекламу конструктора.


Пример 8: Разработка мобильных приложений

65apps.com – сайт разработчиков мобильных приложений, который начинает с главного — презентации кейсов. Двойная навигация (точки и стрелки) кажется чрезмерной, но в целом блок выполняет задачу. Возможности конструктора позволяют реализовать его иначе: например, сделать автоматическую смену слайдов и оставить для навигации только точки.

Удобно, что меню прилипает к верхней части экрана на десктопе. Есть переключение на английскую версию — это очень круто. На главной странице отображается превью работы, при нажатии открываются — это позволяет сэкономить место, сохранив информативность.

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


Выводы

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

Ни у одного из рассмотренных сайтов нет проблем с адаптивностью. Некоторые проекты построены с учётом отображения разных блоков в зависимости от разрешения экрана. Всё это — стандартные возможности Tilda. От веб-мастера требуется только научиться ими пользоваться.


Примеры сайтов в других конструкторах

Посмотрите реальные примеры сайтов, лендингов или интернет-магазинов, которые были созданы руками пользователей в других популярных конструкторах.

Автор: Сергей Гаврилов
Редактор Site-Builders.ru