Что такое zero block

Zero Block в Tilda: что это такое и как использовать

Разбираемся с настройками элементов и создаём собственный сайт-визитку.

evgeniy kornilov / shutterstock

Многие задачи в Tilda решаются с помощью набора типовых блоков, но они лишены гибкости и привязаны к конкретному расположению элементов. Это не всегда удобно, приходится искать компромисс.

Zero-блок, или нулевой блок, в Tilda — редактор, с помощью которого можно настраивать дизайн сайта, как в Figma, Sketch или Photoshop. Он не привязан к расположению элементов и позволяет реализовать любую идею.

Это инструкция о продвинутой работе в Tilda. Если вы ещё ей не пользовались, советуем прочитать предыдущие статьи об этом конструкторе сайтов:

Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.

Создание Zero-блока

Перейдите в Tilda и создайте новую страницу. Выберите шаблон « Пустая страница», и откроется стартовое рабочее пространство Tilda.

Чтобы создать Zero Block, на стартовом рабочем пространстве нажмите на кнопку Zero.

Появится Zero-блок — внешне он очень похож на типовые блоки Tilda. Единственное отличие — при наведении на него мыши в левом верхнем углу вместо кнопок « Настройки» и « Контент» будет только « Редактировать блок».

Базовые настройки Zero-блок

Нажмите на кнопку « Редактировать блок», чтобы перейти на страницу редактора. Если вы знакомы с Figma или Sketch, то в интерфейсе редактирования Zero-блока вы сразу заметите сходство с этими программами.

Чтобы вам ничего не мешало делать свою страницу, удалите все стандартные модули Zero-блока: текст и иллюстрации. Для этого зажмите правую кнопку мыши, выделите всё, нажмите по объектам правой кнопкой мыши и выберите Delete (или просто нажмите клавишу Delete).

Ширина Zero Block фиксирована, а высота ограничена контейнерами Window Container и Grid Container.

Grid Container — условное обозначение границ сайта, значение указывается в пикселях.

Window Container — условное обозначение границ экрана, указывается в процентах. Если значение не указано, его размер будет равен Grid Container.

По умолчанию ширина Window Container не указывается, поэтому Tilda берёт значение Grid Container — по умолчанию это 550 пикселей. Чтобы изменить эти значения, кликните в любое пустое место макета, и справа появится панель Artboard Settings.

Оба контейнера имеют высоту 550 пикселей — это примерно половина экрана, а нужен весь. Для этого укажите в строке Window Container height значение 100%, чтобы Window Container занял всю высоту экрана.

Если ваш Grid Container обрезается, укажите в настройках Window Container выравнивание по центру.

Иллюстрации и фон

Начать делать страницу в Zero-блоке можно с чего угодно. Но мы сначала добавим фотографию:

1. Нажмите на плюс в верхнем левом углу и в выпадающем меню нажмите Add Image.

2. Внутри Zero-блока появится серый квадрат — это плейсхолдер под иллюстрацию.

3. Кликните на серый квадрат и справа на панели настроек нажмите на кнопку Upload file. В появившееся окно перетащите фотографию со своего компьютера, и она окажется на месте плейсхолдера.

Теперь отредактируйте фотографию, чтобы она подходила под вашу будущую вёрстку:

1. Уменьшите картинку, чтобы её высота была равна 120 пикселям. Найти эту настройку можно на панели Element settings справа — она отмечена буквой W. Также вы можете изменить размер вручную, потянув за один из углов изображения.

2. На панели Element settings, нажмите на иконку , чтобы фотография выровнялась по центру.

3. На той же панели скруглите края, чтобы фотография была не квадратной, а круглой. Для этого перейдите в раздел Border и в пункте Radius укажите 180.

Теперь добавьте на страницу фоновое изображение. Для этого кликните на любое пустое место на макете и нажмите на кнопку Upload File в пункте Background Image:

Когда картинка загрузится, фон заполнит всё пространство макета.

Текстовые блоки

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

1. Нажмите на плюсик в левом верхнем углу и выберите Add Text.

2. Если фон вашей страницы тёмный, перекрасьте текст в белый цвет. Для этого в меню Element settings в пункте Color вместо #000000 напишите #FFF.

3. Перенесите текст под фотографию и выровняйте его по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center.

4. Дважды кликните по текстовому блоку и вместо рыбного текста добавьте свой. По желанию, в меню Element settings можно изменить его настройки: шрифт, кегль, интерлиньяж и межбуквенные отступы.

5. Аналогичным образом сделайте заголовок страницы и впишите в него своё имя. Заголовок должен быть больше основного текста.

Чтобы заново не настраивать все свойства текста, можно просто скопировать готовый. Для этого зажмите клавишу Alt и тащите свой текст в любую сторону.

Лайфхак — чтобы быстро убрать все панели с экрана, нажмите клавишу F. Так будет проще оценить свой макет и никакой визуальный шум мешать не будет. Чтобы скрыть только панель настроек, нажмите клавишу Tab.

Кнопка

Теперь добавьте кнопку и сделайте из неё ссылку на вашу рабочую почту:

1. Чтобы добавить кнопку, нажмите на плюсик в левом верхнем углу и выберите Add Button.

2. Перенесите кнопку под фотографию и выровняйте её по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center. При необходимости поменяйте цвет фона — например, на жёлтый.

3. Чтобы поменять текст на кнопке, кликните на неё и в меню Element settings в пункте Caption укажите, что именно на ней должно быть написано.

4. В том же меню в пункте URL укажите адрес своей почты.

Фиксированное позиционирование изображений и фигур

Если у вас есть логотип, его можно добавить на страницу и закрепить в углу:

1. Добавьте ваш логотип на страницу как обычную картинку.

2. Выделите логотип и на панели Element settings нажмите на мелкую подпись + Container: grid.

3. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis — Left и Top.

4. Если логотип «прилип» к углу, вручную перенесите его в то место, где он должен стоять. Настройки позиционирования при этом не собьются.

Логотипы и иконки желательно загружать в векторном формате SVG, чтобы на больших экранах они не размазывались. Если у вас таких нет, подойдёт и PNG в высоком разрешении, но прогружаться он будет дольше, чем SVG.

Теперь добавьте кружки, которые будут имитировать пункты меню. Для примера рассмотрим только самый первый — остальные можно сделать по этой же инструкции:

1. Нажмите на плюсик в левом верхнем углу и выберите Add Shape.

2. На макете появится квадрат — чтобы сделать его кругом, на панели Element settings укажите радиус скругления 180. В отличие от иллюстрации, у фигуры нужно указать значения и высоты, и ширины — например, по 15 пикселей. Если нужно, цвет кружка можно изменить.

3. Выделите кружок и на панели Element settings нажмите на мелкую подпись
+ Container: grid.

4. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis — Right и Top.

5. Чтобы буллет не «влип» в угол, сместите его положение так же, как и у логотипа.

По тому же принципу можно сделать остальные буллеты и полоску для слайдера.

В итоге у вас получится примерно такая страница:

Сохраните свою работу — нажмите в правом верхнем углу на кнопку Save, а затем на Close, чтобы выйти из редактора. Проверьте страницу в предпросмотре и опубликуйте её.

Посмотреть, как выглядит созданный в этом уроке сайт, можно здесь.

Источник

Zero Block: отзывчивый дизайн

По оси X Grid Container всегда позиционируется по центру.

То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.

Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.

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

Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.

У каждого элемента в рабочей области есть координаты — положение относительно начало координат по оси X и по оси Y.

Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.

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

По умолчанию все элементы привязаны к Grid контейнеру — это прямоугольник с шириной 1200 пикселей на десктопе, он всегда расположен по центру экрана и имеет одинаковый размер, независимо от размера монитора.

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

Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.

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

При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.

Высота блока будет динамической: она будет изменяться пропорционально ширине при масштабировании блока.

Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.

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

Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.

Источник

Zero Block: создание собственных блоков

Как автоматически импортировать макет из Figma в Zero Block

В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.

В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.

Размер кнопки и фигуры меняется во всех направлениях.

Ниже — координаты положения элемента. Могут быть заданы в пикселах или в процентах. Ниже мы рассмотрим этот момент подробнее.

Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.

Если вы хотите сделать фото в круге, задайте изображению радиус скругления.

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

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

У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.

Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.

Тултипу можно настроить цвет, тень, размер, задать иконку, которая будет отображаться внутри кружка, загрузить изображение, которое будет всплывать при наведении и настроить анимацию.

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

Источник

Zero Block на Tilda — что это и как работает

Можно ли создать собственный дизайн на Tilda?

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

Что касается дизайнеров, то Tilda многие просто не воспринимают всерьез.

Дизайн? Да, ну! О чем вы говорите? Какой может быть дизайн на конструкторе сайтов? Там стандартные, уже придуманные кем-то блоки, разгуляться воображению дизайнера там негде, да и инструментов подходящих нет.

Давайте попробуем разобраться, может ли этот сервис быть полезен дизайнеру.

Как оказалось, возможность создания уникального дизайна в Tilda есть, и дает эту возможность инструмент, который называется Zero Block, который появился еще в 2016 году.

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

И как-то незаметно для стороннего взгляда «из так себе» инструмента превратился в «вполне себе хороший» дизайнерский инструмент с широким функционалом и большими возможностями.

Давайте остановимся на функционале и возможностях Zero Block.

Можно ли с Zero Block создать дизайн сайта с нуля

Zero Block — это браузерный профессиональный встроенный редактор для веб-дизайна, позволяющий с нуля отрисовать любой сайт.

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

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

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

Так что же можно делать с редактором Zero Block. С этим редактором можно:

Какие задачи можно решать с помощью Zero Block

Вы можете быстро перенести ваш макет из любого графического редактора.

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

Вы можете изменить уже существующий стандартный блок Tilda. Если у вас не получится изменить стандартный блок, используя настройки, можно использовать функцию «Конвертировать в Zero Block». После этого вы легко сможете отредактировать блок, получив уникальный результат.

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

Какие дополнительные эффекты можно получить с Zero Block

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

Вывод

Создавая дизайн в Tilda, вы практически получаете уже готовый к работе сайт. Вам не нужно беспокоиться о верстке, движке для сайта, об устранении багов и др. Проект запускается во много раз быстрее.

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

В Tilda дизайнеру не надо думать о том, как будет выглядеть сайт на различных устройствах и в разных браузерах. Сайт будет адаптивным без дополнительных настроек. Причем, ничего не надо делать вручную. Адаптивный дизайн создается автоматически, подстраиваясь под устройство. Сайт будет корректно отображаться на различных устройствах, а также одинаково хорошо открываться в разных браузерах.

Наконец, в Tilda дизайнеру можно воспользоваться всем функционалом и широкими возможностями Zero Block, о которых мы рассказали выше.

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

Источник