Лайфхакер
Лайфхакер
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Куда поехать на выходные
✍️ Написать
Добрые новости
Есть мнение
Норм или стрём
Личный опыт
Объясняем за минуту
Веб-сервисы
16 августа 2016

Zero Block от команды Tilda Publishing — редактор для веб-дизайна онлайн

Zero Block — это профессиональный редактор, который позволяет реализовать любую идею, создавая уникальный адаптивный дизайн сайта. Всё как в популярных графических программах, только теперь в конструкторе сайтов. Почему это круто и как пользоваться новым инструментом, рассказывают наши друзья из Tilda Publishing.
Фото автора Лера Мерзлякова
Лера Мерзлякова

Zero Block от команды Tilda Publishing — редактор для веб-дизайна онлайн

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

✍️ Скоро читатели смогут публиковать свои тексты на Лайфхакере. Станьте первыми!

Почему это круто

В редакторе Zero Block можно нарисовать что угодно и тут же опубликовать результат без участия верстальщика и программиста.

Любые элементы, произвольное расположение — никаких ограничений.

Так, как будто вы рисуете на бумаге. Только в вебе и очень быстро.

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

interface-1

Для кого этот инструмент

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

Специалистам, работающим с графическими редакторами, будут знакомы стандартные горячие клавиши и основные приёмы работы с объектами.

interface

Как это работает

  1. Создаёте страницу в Tilda.
  2. Добавляете «нулевой блок».
  3. Создаёте дизайн.
  4. Настраиваете адаптивность.
  5. Сайт готов.

С чем можно работать

В редакторе можно добавлять и редактировать текст, картинки, в том числе фоновые изображения, простые фигуры (прямоугольник, круг, линию), видео, кнопки, формы захвата, всплывающие подсказки и HTML-код. Поддерживаются слои, поэтому объекты можно накладывать друг на друга.

elements

Можно настраивать типографику (размер шрифта, его тип, насыщенность, межстрочное и межбуквенное расстояние), цвет, прозрачность элементов, добавлять тени и обводки, создавать эффект наведения для кнопок.

ezgif.com-resize

Внутри редактора есть стандартная для веба сетка из 12 колонок и 2 рабочие области: внутри сетки и внутри условного окна браузера. Все элементы могут быть привязаны либо к контейнеру сетки, либо к окну.

ezgif.com-resize (1)

Адаптивность и отзывчивый дизайн

Zero Block позволяет адаптировать дизайн для всех типов экранов так, чтобы сайт хорошо отображался и на мониторе с диагональю 27 дюймов, и на iPhone 5.

В редакторе Zero Block можно настроить анимацию элементов разной сложности. С её помощью можно управлять вниманием пользователя, расставив акценты на странице.

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

Примеры дизайна, созданного с помощью редактора Zero Block

Лендинг редактора Zero Block:

ex0-0

Другие примеры:

1 / 0
2 / 0
3 / 0
4 / 0
Сделать сайт на Tilda
Если нашли ошибку, выделите текст и нажмите Ctrl + Enter
Это интересно
Давайте посчитаем. Как эффективно вести семейный бюджет

Давайте посчитаем. Как эффективно вести семейный бюджет

Как выбрать кухонный нож: 3 совета от Samura

Как выбрать кухонный нож: 3 совета от Samura

Учебный год под контролем!

Учебный год под контролем!

3 причины, почему с дачи мы всегда возвращаемся с полным багажником

3 причины, почему с дачи мы всегда возвращаемся с полным багажником

Комментарии
Авторизуйтесь, чтобы оставить комментарий

Станьте первым, кто оставит комментарий

Что вы могли пропустить
10 устройств Honor с лучшими ценами на распродаже 11.11 от AliExpress
10 устройств Honor с лучшими ценами на распродаже 11.11 от AliExpress
0
Вчера
Покупки
Устройства
Motorola показала часы Watch 2 Fit, которые считают расход жиров во время тренировок
Motorola показала часы Watch 2 Fit, которые считают расход жиров во время тренировок
0
Вчера
Новости
Устройства
Как iPhone mini, но на Android 17: анонсирован миниатюрный Enough Phone
Как iPhone mini, но на Android 17: анонсирован миниатюрный Enough Phone
0
Вчера
Новости
Устройства
Назад в 1979-й: Sony перевыпустила культовые наушники от первого Walkman
Назад в 1979-й: Sony перевыпустила культовые наушники от первого Walkman
0
Вчера
Новости
Устройства
Bluetooth станет в 4 раза быстрее и позволит слушать музыку без потери качества
Bluetooth станет в 4 раза быстрее и позволит слушать музыку без потери качества
0
5 ноября
Новости
Технологии
Baseus выпустила плоскую колонку для сна SK1, которая кладётся под подушку
Baseus выпустила плоскую колонку для сна SK1, которая кладётся под подушку
0
5 ноября
Новости
Устройства
Объясняем за минуту: нужно ли выключать компьютер на ночь
Объясняем за минуту: нужно ли выключать компьютер на ночь
0
5 ноября
Технологии
Технологии
Китайский конкурент Neuralink готовит «электронный „Оземпик“» — гаджет для похудения без лекарств
Китайский конкурент Neuralink готовит «электронный „Оземпик“» — гаджет для похудения без лекарств
0
5 ноября
Новости
Устройства
ChatGPT научился создавать гифки — можно оживить даже собственный рисунок
ChatGPT научился создавать гифки — можно оживить даже собственный рисунок
0
5 ноября
Веб-сервисы
Новости
11 дофаминовых гаджетов с распродажи 11.11 на AliExpress
11 дофаминовых гаджетов с распродажи 11.11 на AliExpress
0
4 ноября
Покупки
Устройства
Шагай до Мордора, корми пингвина, сажай деревья: 10 трекеров привычек с игровыми механиками
Шагай до Мордора, корми пингвина, сажай деревья: 10 трекеров привычек с игровыми механиками
0
3 ноября
Технологии
Технологии
Google запустила автосохранение фото с Android на ПК через Quick Share
Google запустила автосохранение фото с Android на ПК через Quick Share
0
3 ноября
Android
Новости
Apple готовит домашнего робота с экраном, который сможет прогонять кота со стола
Apple готовит домашнего робота с экраном, который сможет прогонять кота со стола
0
3 ноября
Новости
Устройства
Один из лучших графических редакторов Affinity вышел на iPad — он доступен бесплатно
Один из лучших графических редакторов Affinity вышел на iPad — он доступен бесплатно
0
3 ноября
iOS
Новости
25 гаджетов и устройств для дома, которые было бы приятно получить в подарок
25 гаджетов и устройств для дома, которые было бы приятно получить в подарок
0
2 ноября
Покупки
Праздники

Новые комментарии

Аватар автора комментария
Олег Залялов2 часа назад

0 / 0

В сепарабельном евклидовом пространстве всякая полная ортонормированная система замкнута и наоборот
«Кто написал марш Радецкого?»: почему не стоит считать глупыми людей из уличных опросов
Аватар автора комментария
D.V.5 часов назад

0 / 0

Жуть...
Придёт серенький волчок: почему наши предки пели страшные колыбельные
Аватар автора комментария
KapSuRioN5 часов назад

0 / 0

"Премьера «Дюны: Часть третья» запланирована на 15 декабря 2026 года. На следующий день после этого выйдут «Мстители: Доктор Дум». Ожидается, что противостояние двух блокбастеров обеспечит самый кассовый уик-энд в истории кино." Это будет жаркий кино-декабрь.
«Дюна-3» будет заметно отличаться от книг — Роберт Паттинсон призвал фанатов не придираться
Аватар автора комментария
8 часов назад

0 / 0

Кому не нравится, что @gmailbot просит доступ ко всему ящику: я сделал бота, который работает через обычную пересылку: https://t.me/email2telegram_bot. Он выдаёт адрес, а в Gmail вы ставите пересылку на него, можно через фильтр и только для нужных писем. Доступа к почте у бота нет вообще, он видит только то, что вы переслали.
Как получать письма из Gmail прямо в Telegram
Давайте посчитаем. Как эффективно вести семейный бюджет

Давайте посчитаем. Как эффективно вести семейный бюджет

Лайфхакер
Информация
О проектеРубрикиРекламаРедакцияВакансииО компании
Подписка
TelegramВКонтактеTwitter (X)PinterestYouTubeИнициалRSS
Правила
Пользовательское соглашениеПолитика обработки персональных данныхПравила применения рекомендательных технологийПравила сообществаСогласие на обработку персональных данныхСогласие для рекламных рассылокСогласие для информационной программы
18+Копирование материалов запрещено.
Издание может получать комиссию от покупки товаров, представленных в публикациях