Zero Block в Tilda: что это такое и как использовать
Разбираемся с настройками элементов и создаём собственный сайт-визитку.
![](https://248006.selcdn.ru/main/iblock/613/61326266a65f7c3838c4b1c2e97c86ed/2cc22069b4a2894b49d0d432837ff12b.png)
![](https://248006.selcdn.ru/main/iblock/613/61326266a65f7c3838c4b1c2e97c86ed/2cc22069b4a2894b49d0d432837ff12b.png)
Иллюстрация: Оля Ежак для Skillbox Media
Многие задачи в Tilda решаются с помощью набора типовых блоков, но они лишены гибкости и привязаны к конкретному расположению элементов. Это не всегда удобно, приходится искать компромисс.
Zero-блок, или нулевой блок, в Tilda — редактор, с помощью которого можно настраивать дизайн сайта, как в Figma, Sketch или Photoshop. Он не привязан к расположению элементов и позволяет реализовать любую идею.
Это инструкция о продвинутой работе в Tilda. Если вы ещё ей не пользовались, советуем прочитать предыдущие статьи об этом конструкторе сайтов:
Создание Zero-блока
Перейдите в Tilda и создайте новую страницу. Выберите шаблон «Пустая страница», и откроется стартовое рабочее пространство Tilda.
![](/upload/setka_images/11033107072022_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Чтобы создать Zero Block, на стартовом рабочем пространстве нажмите на кнопку Zero.
![](/upload/setka_images/14192210112021_1c076733da30d01108464d85a8ffad1517acec59.jpg)
Появится Zero-блок — внешне он очень похож на типовые блоки Tilda. Единственное отличие — при наведении на него мыши в левом верхнем углу вместо кнопок «Настройки» и «Контент» будет только «Редактировать блок».
![](/upload/setka_images/14194810112021_c276ca8d399eee73a1c079a8558d4d7cc1304846.jpg)
Базовые настройки Zero-блок
Нажмите на кнопку «Редактировать блок», чтобы перейти на страницу редактора. Если вы знакомы с Figma или Sketch, то в интерфейсе редактирования Zero-блока вы сразу заметите сходство с этими программами.
![](/upload/setka_images/14210110112021_2c5403f1cd9ee1933cf532496fafb2ce478e0387.jpg)
Чтобы вам ничего не мешало делать свою страницу, удалите все стандартные модули Zero-блока: текст и иллюстрации. Для этого зажмите правую кнопку мыши, выделите всё, нажмите по объектам правой кнопкой мыши и выберите Delete (или просто нажмите клавишу Delete).
![](/upload/setka_images/14213210112021_f622bbba013d150bb02a32dc0c82a22b1a5101f6.gif)
Ширина Zero Block фиксирована, а высота ограничена контейнерами Window Container и Grid Container.
![](/upload/setka_images/14220110112021_7b6ae682f40573d2c3c9364d21893c206fdb58bd.jpg)
Grid Container — условное обозначение границ сайта, значение указывается в пикселях.
Window Container — условное обозначение границ экрана, указывается в процентах. Если значение не указано, его размер будет равен Grid Container.
По умолчанию ширина Window Container не указывается, поэтому Tilda берёт значение Grid Container — по умолчанию это 550 пикселей. Чтобы изменить эти значения, кликните в любое пустое место макета, и справа появится панель Artboard Settings.
![](/upload/setka_images/14355210112021_174dab7e39076657c683b5ce7334147bbc186e9b.jpg)
Оба контейнера имеют высоту 550 пикселей — это примерно половина экрана, а нужен весь. Для этого укажите в строке Window Container height значение 100%, чтобы Window Container занял всю высоту экрана.
Если ваш Grid Container обрезается, укажите в настройках Window Container выравнивание по центру.
![](/upload/setka_images/14360910112021_3a951572a2150028f8727110976985967433bc44.jpg)
Иллюстрации и фон
Начать делать страницу в Zero-блоке можно с чего угодно. Но мы сначала добавим фотографию:
1. Нажмите на плюс в верхнем левом углу и в выпадающем меню нажмите Add Image.
![](/upload/setka_images/14372610112021_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
2. Внутри Zero-блока появится серый квадрат — это плейсхолдер под иллюстрацию.
![](/upload/setka_images/14374010112021_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
3. Кликните на серый квадрат и справа на панели настроек нажмите на кнопку Upload file. В появившееся окно перетащите фотографию со своего компьютера, и она окажется на месте плейсхолдера.
![](/upload/setka_images/14381910112021_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
Теперь отредактируйте фотографию, чтобы она подходила под вашу будущую вёрстку:
1. Уменьшите картинку, чтобы её высота была равна 120 пикселям. Найти эту настройку можно на панели Element settings справа — она отмечена буквой W. Также вы можете изменить размер вручную, потянув за один из углов изображения.
![](/upload/setka_images/18131310112021_9522fdc40ae6af89e656f791871eef26d8984b23.gif)
2. На панели Element settings, нажмите на иконку , чтобы фотография выровнялась по центру.
![](/upload/setka_images/18132210112021_31840bd62dbb65c377fae696d0d0c1367bfb49df.gif)
3. На той же панели скруглите края, чтобы фотография была не квадратной, а круглой. Для этого перейдите в раздел Border и в пункте Radius укажите 180.
![](/upload/setka_images/18132410112021_0021efaf747ebe0a0ac487e35636485459e67212.jpg)
Теперь добавьте на страницу фоновое изображение. Для этого кликните на любое пустое место на макете и нажмите на кнопку Upload File в пункте Background Image:
![](/upload/setka_images/14494610112021_aac8ad733053ee9cbb56d28ab610f6284be1959b.jpg)
Когда картинка загрузится, фон заполнит всё пространство макета.
![](/upload/setka_images/14501410112021_acb3891951eada938d821fe8c18ea10c2884033f.jpg)
Текстовые блоки
На сайте-визитке нужно написать о себе, чтобы клиенты знали, с какими задачами к вам можно обратиться. Для этого добавьте текстовый блок:
1. Нажмите на плюсик в левом верхнем углу и выберите Add Text.
![](/upload/setka_images/14510210112021_4befbbf7beb24b094ca5962098ccd429e6e324f3.jpg)
2. Если фон вашей страницы тёмный, перекрасьте текст в белый цвет. Для этого в меню Element settings в пункте Color вместо #000000 напишите #FFF.
![](/upload/setka_images/14510310112021_5d2552f3c147808bd3c9149b748f69964400c85d.jpg)
3. Перенесите текст под фотографию и выровняйте его по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center.
![](/upload/setka_images/14514010112021_52eafccd16e9048f83d504b8282d10b06d864aba.gif)
4. Дважды кликните по текстовому блоку и вместо рыбного текста добавьте свой. По желанию, в меню Element settings можно изменить его настройки: шрифт, кегль, интерлиньяж и межбуквенные отступы.
![](/upload/setka_images/14520210112021_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
5. Аналогичным образом сделайте заголовок страницы и впишите в него своё имя. Заголовок должен быть больше основного текста.
Чтобы заново не настраивать все свойства текста, можно просто скопировать готовый. Для этого зажмите клавишу Alt и тащите свой текст в любую сторону.
![](/upload/setka_images/14523010112021_600c921c37135fd9f269be82e65e11f5f1acd6d8.gif)
Лайфхак — чтобы быстро убрать все панели с экрана, нажмите клавишу F. Так будет проще оценить свой макет и никакой визуальный шум мешать не будет. Чтобы скрыть только панель настроек, нажмите клавишу Tab.
Кнопка
Теперь добавьте кнопку и сделайте из неё ссылку на вашу рабочую почту:
1. Чтобы добавить кнопку, нажмите на плюсик в левом верхнем углу и выберите Add Button.
![](/upload/setka_images/14534510112021_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg)
2. Перенесите кнопку под фотографию и выровняйте её по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center. При необходимости поменяйте цвет фона — например, на жёлтый.
![](/upload/setka_images/14541310112021_a7f41f7e241a23287e43cf7b32196328f3ee98f4.jpg)
3. Чтобы поменять текст на кнопке, кликните на неё и в меню Element settings в пункте Caption укажите, что именно на ней должно быть написано.
![](/upload/setka_images/14544010112021_d81689b9daafeb4e05f4e50806f8a0badeb35b86.jpg)
4. В том же меню в пункте URL укажите адрес своей почты.
Фиксированное позиционирование изображений и фигур
Если у вас есть логотип, его можно добавить на страницу и закрепить в углу:
1. Добавьте ваш логотип на страницу как обычную картинку.
2. Выделите логотип и на панели Element settings нажмите на мелкую подпись + Container: grid.
3. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis — Left и Top.
![](/upload/setka_images/14552610112021_11a1d33ad10be24be98dc84cf3f4c2293103c450.gif)
4. Если логотип «прилип» к углу, вручную перенесите его в то место, где он должен стоять. Настройки позиционирования при этом не собьются.
![](/upload/setka_images/15000610112021_3b7708faf9e65ed911a092d713c25e363002f0d0.jpg)
Логотипы и иконки желательно загружать в векторном формате SVG, чтобы на больших экранах они не размазывались. Если у вас таких нет, подойдёт и PNG в высоком разрешении, но прогружаться он будет дольше, чем SVG.
Теперь добавьте кружки, которые будут имитировать пункты меню. Для примера рассмотрим только самый первый — остальные можно сделать по этой же инструкции:
1. Нажмите на плюсик в левом верхнем углу и выберите Add Shape.
2. На макете появится квадрат — чтобы сделать его кругом, на панели Element settings укажите радиус скругления 180. В отличие от иллюстрации, у фигуры нужно указать значения и высоты, и ширины — например, по 15 пикселей. Если нужно, цвет кружка можно изменить.
![](/upload/setka_images/14572010112021_fd5a51ea6b4095c9eab0a5065d7ce3f8f46f2b6f.gif)
3. Выделите кружок и на панели Element settings нажмите на мелкую подпись
+ Container: grid.
4. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis — Right и Top.
![](/upload/setka_images/14575310112021_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg)
5. Чтобы буллет не «влип» в угол, сместите его положение так же, как и у логотипа.
По тому же принципу можно сделать остальные буллеты и полоску для слайдера.
![](/upload/setka_images/14580910112021_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
В итоге у вас получится примерно такая страница:
![](/upload/setka_images/14561010112021_00ef4ecbef33723c9293d85ddb5e396ecc049496.jpg)
Сохраните свою работу — нажмите в правом верхнем углу на кнопку Save, а затем на Close, чтобы выйти из редактора. Проверьте страницу в предпросмотре и опубликуйте её.
Посмотреть, как выглядит созданный в этом уроке сайт, можно здесь.