Начните сейчас, это просто!

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

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

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

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

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

1. Каталог спальных принадлежностей

Каталог спальных принадлежностей

Простой интернет-магазин постельного белья, подушек, одеял и домашней одежды. Аккуратный дизайн без лишних эффектов, акцент сделан на контенте. На главной странице — карусель с рекомендованными товарами, ссылка на каталог, краткое описание преимуществ.

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

После добавления товара в «Корзину» на странице появляется значок. При нажатии на него открывается форма оформления заказа. Она максимально простая — здесь можно только увеличить количество единиц товара и удалить ненужные позиции из «Корзины». Для отправки заказа необходимо указать имя, фамилию, отчество, адрес электронной почты, номер телефона, город, улицу, номер дома, корпус, квартиру. Полей очень много — видимо, для более корректного сбора данных в CRM. Поддерживается скидка с помощью промо-кода.

В мобильной версии сайта всё работает так же чётко, как на десктопе.

Общее впечатление — хороший интернет-магазин с приятным дизайном и удобным интерфейсом.

2. Онлайн-уроки английского для детей

Онлайн-уроки английского для детей

Хорошая демонстрация возможностей Tilda для создания лендингов. Видно, что при создании сайта использовался Zero BLock — среди стандартных блоков конструктора нет многих секций нет.

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

Для записи на урок используется простая форма обратной связи. В ней нужно указать имя родителя, имя и возраст ребёнка, контактный телефон. Также можно оставить комментарий для менеджера. Для связи также есть виджет — через него можно позвонить или написать в Facebook Messenger, WhatsApp, Viber, Telegram.

Внизу страницы располагается блок с лентой из Instagram. Это стандартный виджет Tilda. На фоне остальных секций, сделанных в Zero Block, он смотрится немного топорно. Но главную задачу решает — показывает, что компания публикует в Инстаграме. В десктопной версии при наведении курсора на фотографии появляется текст поста. В мобильной версии просто отображаются снимки из ленты.

Общее впечатление — хорошая дизайнерская работа с применением возможностей продвинутого редактора Zero Block.

3. Портфолио веб-дизайнера

Портфолио веб-дизайнера

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

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

Здесь же — максимальная шаблонность, неконтрастные цвета фона и текста. Вместо виджета с лентой Инстаграма — дыра в вёрстке. Складывается ощущение недоделанности, как будто на шаблон накидали контент, но так и не добрались до нормального оформления сайта.

Общее впечатление — от портфолио веб-дизайнера на Tilda ждёшь немного большего. Здесь же минимализм приближается к примитивизму. Если бы не примеры работ (и правда неплохие), то смотреть было бы вообще не на что. Примеры работ как раз отлично показывают, на что способна Tilda в руках дизайнера. Сайт-портфолио самого дизайнера не впечатляет.

4. Студия дизайна интерьеров

Студия дизайна интерьеров

Классный одностраничник студии дизайна интерьеров. Это ещё один пример того, что можно сделать в Tilda с помощью продвинутого редактора Zero Block и пошаговой анимации.

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

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

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

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

Общее впечатление — отличное применение дизайнерских инструментов Tilda, продуманная работа с пошаговой анимацией.

5. Лендинг продукта

Лендинг продукта

Небольшой и яркий одностраничник, рекламирующий батончик с высоким содержанием растительного белка.

Здесь тоже сразу бросается в глаза активное использование продвинутого редактора Zero Block. Интересное решение — прокрутка разных вкусов батончика в первом блоке. Для этого используются стрелки.

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

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

На сайте нет никаких контактных данных, кроме ссылки на Instagram. Видимо, это цель лендинга — переводить клиентов в соцсеть.

Общее впечатление — заметна хорошая работа с продвинутыми инструментами дизайнера в Zero Block. Но контента очень мало. Такой лендинг при наличии даже небольшого опыта в Tilda можно собрать за день — главное, чтобы были все графические заготовки.

6. Съёмка каталогов для fashion-бизнеса

Съёмка каталогов для fashion-бизнеса

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

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

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

Для связи с менеджером доступна форма обратной связи и форма заказа обратного звонка. Пользователи также могут написать сами — ссылки на Instagram, Facebook, Viber и Telegram размещены рядом с блоком для получения консультации.

Общее впечатление — хорошая работа со стандартными блоками Tilda и продвинутым редактором Zero Block. Разработчики явно понимали, как функционирует конструктор, и тестировали отображение страницы на разных экранах.

7. Студия дизайна и архитектуры

Студия дизайна и архитектуры

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

Здесь мы видим большой сайт, практически полностью созданный в Zero Block. В десктопной версии много пошаговой анимации. В мобильной версии её почти нет — разве что указатели на то, как полистать галерею.

На этом примере можно посмотреть, как работает блог на Tilda. Для публикации новостей используется недавно добавленная функция «Потоки». Это удобный инструмент для ежедневных публикаций. Администратор может планировать выпуск постов и гибко управлять их отображением на странице.

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

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

Выводы

Tilda предоставляет много инструментов для настройки дизайна — надо только правильно ими пользоваться. В том же редакторе Zero Block можно с нуля собрать практически любой блок и отрисовать крутую пошаговую анимацию, которая будет привлекать внимание посетителей. Главное не увлекаться и помнить, что сайт должен быть не только красивым, но ещё и удобным для пользователей.

У Tilda всё хорошо не только с дизайном, но и с функциональностью. В приведённых примерах нет сложных проектов, в основном визитки, портфолио и лендинги, но при желании на конструкторе можно разработать небольшой интернет-магазин.

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

Howard

Об авторе:

Приветствую, Я Говард Стил, владелец и главный редактор этого сайта. Имея за плечами более 10 лет опыта в сайтостроении я знаю, как порой нелегко бывает неспециалисту разобраться во всем многообразии инструментов для создания сайта. Не знаете, какой конструктор выбрать? Просто напишите мне и я подскажу лучший вариант для вашей задачи.

Главная » Примеры сайтов » Примеры сайтов созданных на Tilda

Добавить комментарий

Ваш адрес email не будет опубликован.