меню тильда zero block код

Учимся работать с Tilda: создание отзывчивого дизайна в Zero-блоках

Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 6d0b06cad37cff7d96c537a4c57b672a. меню тильда zero block код фото. меню тильда zero block код-6d0b06cad37cff7d96c537a4c57b672a. картинка меню тильда zero block код. картинка 6d0b06cad37cff7d96c537a4c57b672a. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. fe232c4278a5ed3ad3fe1fdcdc329cbe. меню тильда zero block код фото. меню тильда zero block код-fe232c4278a5ed3ad3fe1fdcdc329cbe. картинка меню тильда zero block код. картинка fe232c4278a5ed3ad3fe1fdcdc329cbe. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Типовые блоки «Тильды» сами подстраиваются под разные экраны — будь то телефон или Mac Pro. Но как только собираешь свой сайт на Zero-блоках, вёрстка плывёт. В этом уроке мы сверстаем несколько простых и красивых страниц сайта, которые будут одинаково хорошо выглядеть на всех устройствах.

меню тильда zero block код. 15101423032021 8eade49e3e9855c545facb583cc75361d0c85654. меню тильда zero block код фото. меню тильда zero block код-15101423032021 8eade49e3e9855c545facb583cc75361d0c85654. картинка меню тильда zero block код. картинка 15101423032021 8eade49e3e9855c545facb583cc75361d0c85654. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Что такое отзывчивый дизайн

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

меню тильда zero block код. 07552523032021 92f1ea8728e540fc8755fd53db40ac04f8685900. меню тильда zero block код фото. меню тильда zero block код-07552523032021 92f1ea8728e540fc8755fd53db40ac04f8685900. картинка меню тильда zero block код. картинка 07552523032021 92f1ea8728e540fc8755fd53db40ac04f8685900. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Сделать отзывчивый дизайн в «Тильде» можно двумя способами:

Создаём учебный Zero-блок

Для работы над проектом надо создать Zero-блок.

В настройках блока выставляем параметры как на картинке.

меню тильда zero block код. 07565923032021 fccf437ca742fde4461c31e59718d0c5de9ffc82. меню тильда zero block код фото. меню тильда zero block код-07565923032021 fccf437ca742fde4461c31e59718d0c5de9ffc82. картинка меню тильда zero block код. картинка 07565923032021 fccf437ca742fde4461c31e59718d0c5de9ffc82. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Когда вы создаёте Zero-блок, «Тильда» по умолчанию делает проект для десктопной версии экрана — он считается основным, поэтому вёрстку логичнее начать с него. Поменять экран можно на панели устройств.

Расположение элементов в десктопной версии

Теперь нам надо разместить в Zero-блоке макет — можете использовать свои заготовки или взять за основу проект Moon Tutorial, сайт астрофотографии.

меню тильда zero block код. 07585823032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. меню тильда zero block код фото. меню тильда zero block код-07585823032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. картинка меню тильда zero block код. картинка 07585823032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Макет состоит из простых элементов:

Настройки для десктопной версии:

меню тильда zero block код. 08082023032021 cece785eb92cd643f5e788e5f37e3d933a76f56c. меню тильда zero block код фото. меню тильда zero block код-08082023032021 cece785eb92cd643f5e788e5f37e3d933a76f56c. картинка меню тильда zero block код. картинка 08082023032021 cece785eb92cd643f5e788e5f37e3d933a76f56c. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Используйте комбинации клавиш, чтобы перемещаться по рабочей области (а не всему экрану) «Тильды»:

меню тильда zero block код. 08223723032021 854fa72de0766409718db86e01c75d20e3f60268. меню тильда zero block код фото. меню тильда zero block код-08223723032021 854fa72de0766409718db86e01c75d20e3f60268. картинка меню тильда zero block код. картинка 08223723032021 854fa72de0766409718db86e01c75d20e3f60268. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Макет может занимать много больше места, чем ожидалось, панели будут мешать увидеть и оценить его общий вид. Нажмите Ctrl+ или Ctrl− несколько раз, чтобы уменьшить или увеличить зону рабочей области. При этом элементы окна браузера останутся на своих местах — то есть изменения произойдут только в рабочей области. Это особенность «Тильды». Изменение масштаба в процентах отображается в верхнем левом углу.

меню тильда zero block код. 08251923032021 507bafd5b04cd8f37ac6d780959cad6ba2797228. меню тильда zero block код фото. меню тильда zero block код-08251923032021 507bafd5b04cd8f37ac6d780959cad6ba2797228. картинка меню тильда zero block код. картинка 08251923032021 507bafd5b04cd8f37ac6d780959cad6ba2797228. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Собираем макет для планшета с горизонтальной ориентацией

Горизонтальная версия для планшета почти не отличается от десктопной, поэтому изменений будет немного. Основное отличие — фотография Луны растянется на весь экран. В результате получится вот такой макет.

меню тильда zero block код. 08262023032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. меню тильда zero block код фото. меню тильда zero block код-08262023032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. картинка меню тильда zero block код. картинка 08262023032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 08265623032021 bd07ebf0cbab23142e5cd808d5dfd56dacaaa246. меню тильда zero block код фото. меню тильда zero block код-08265623032021 bd07ebf0cbab23142e5cd808d5dfd56dacaaa246. картинка меню тильда zero block код. картинка 08265623032021 bd07ebf0cbab23142e5cd808d5dfd56dacaaa246. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Разрешение экрана можно посмотреть на этой же панели — просто наведите курсор на нужную иконку.

меню тильда zero block код. 08282723032021 4ef9af9c0a76855c8e5ffcfb188650f576dd75d2. меню тильда zero block код фото. меню тильда zero block код-08282723032021 4ef9af9c0a76855c8e5ffcfb188650f576dd75d2. картинка меню тильда zero block код. картинка 08282723032021 4ef9af9c0a76855c8e5ffcfb188650f576dd75d2. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 08294023032021 3e56b4d6c2ade309ed57cf709adc5de2c7fdc22d. меню тильда zero block код фото. меню тильда zero block код-08294023032021 3e56b4d6c2ade309ed57cf709adc5de2c7fdc22d. картинка меню тильда zero block код. картинка 08294023032021 3e56b4d6c2ade309ed57cf709adc5de2c7fdc22d. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Начинаем исправлять. Для этого задаём глобальные параметры GRID Container Height 640 px. Высоту окна не трогаем, оставляем 100%.

Следующим шагом масштабируем изображение Луны по высоте рабочей области и располагаем по центру.

меню тильда zero block код. 08312023032021 1c268adcc76f0822608460c62d7afe7d51467887. меню тильда zero block код фото. меню тильда zero block код-08312023032021 1c268adcc76f0822608460c62d7afe7d51467887. картинка меню тильда zero block код. картинка 08312023032021 1c268adcc76f0822608460c62d7afe7d51467887. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 08320623032021 5f91c89d1cae7f190e602c104e9983a0bda1d775. меню тильда zero block код фото. меню тильда zero block код-08320623032021 5f91c89d1cae7f190e602c104e9983a0bda1d775. картинка меню тильда zero block код. картинка 08320623032021 5f91c89d1cae7f190e602c104e9983a0bda1d775. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Сиреневая рамка вокруг элемента означает, что объект позиционируется относительно контейнера окна, а синяя рамка — что относительно грид-контейнера.

Переходим к блоку описания изображения.

меню тильда zero block код. 08343823032021 d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d. меню тильда zero block код фото. меню тильда zero block код-08343823032021 d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d. картинка меню тильда zero block код. картинка 08343823032021 d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

По идее, текст не должен был сместиться относительно блока. Поэтому заглянем в десктопную версию и посмотрим, почему так произошло. За смещение элементов относительно друг друга и экрана отвечает настройка позиционирования ( Container) на панели Settings. Ищем решение проблемы там.

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

меню тильда zero block код. 08391223032021 b76bc71fa80c20942ed01e19c21ead7b69ad6b89. меню тильда zero block код фото. меню тильда zero block код-08391223032021 b76bc71fa80c20942ed01e19c21ead7b69ad6b89. картинка меню тильда zero block код. картинка 08391223032021 b76bc71fa80c20942ed01e19c21ead7b69ad6b89. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 08403423032021 0055ab3809c172a044b874c71deb7a3b5ac47e56. меню тильда zero block код фото. меню тильда zero block код-08403423032021 0055ab3809c172a044b874c71deb7a3b5ac47e56. картинка меню тильда zero block код. картинка 08403423032021 0055ab3809c172a044b874c71deb7a3b5ac47e56. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Сразу видим несоответствие: текст позиционируется по оси X слева, в то время как подложка блока — справа. Меняем значение и проверяем: блоки текста автоматически выравниваются по правому краю.

меню тильда zero block код. 08430023032021 67577da4d8977ebae7bbc26fe09eaca85147b425. меню тильда zero block код фото. меню тильда zero block код-08430023032021 67577da4d8977ebae7bbc26fe09eaca85147b425. картинка меню тильда zero block код. картинка 08430023032021 67577da4d8977ebae7bbc26fe09eaca85147b425. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 08412223032021 c384d3e418c1562c1bbf0adfaf71efc497b93ffd. меню тильда zero block код фото. меню тильда zero block код-08412223032021 c384d3e418c1562c1bbf0adfaf71efc497b93ffd. картинка меню тильда zero block код. картинка 08412223032021 c384d3e418c1562c1bbf0adfaf71efc497b93ffd. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 08502623032021 ffebe2a82dc8e6fe44dd1098ed118bcb4ca63719. меню тильда zero block код фото. меню тильда zero block код-08502623032021 ffebe2a82dc8e6fe44dd1098ed118bcb4ca63719. картинка меню тильда zero block код. картинка 08502623032021 ffebe2a82dc8e6fe44dd1098ed118bcb4ca63719. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09042123032021 bdb72db8123b1004a1ea40658146f283bbe6d5cc. меню тильда zero block код фото. меню тильда zero block код-09042123032021 bdb72db8123b1004a1ea40658146f283bbe6d5cc. картинка меню тильда zero block код. картинка 09042123032021 bdb72db8123b1004a1ea40658146f283bbe6d5cc. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

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

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

меню тильда zero block код. 09060623032021 d5f448b1d45447906b1518b24eb2cf2b32fb1aed. меню тильда zero block код фото. меню тильда zero block код-09060623032021 d5f448b1d45447906b1518b24eb2cf2b32fb1aed. картинка меню тильда zero block код. картинка 09060623032021 d5f448b1d45447906b1518b24eb2cf2b32fb1aed. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09071723032021 f622bbba013d150bb02a32dc0c82a22b1a5101f6. меню тильда zero block код фото. меню тильда zero block код-09071723032021 f622bbba013d150bb02a32dc0c82a22b1a5101f6. картинка меню тильда zero block код. картинка 09071723032021 f622bbba013d150bb02a32dc0c82a22b1a5101f6. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09080923032021 68b10686c7e5f4fd21d786a1986bab9736ebf362. меню тильда zero block код фото. меню тильда zero block код-09080923032021 68b10686c7e5f4fd21d786a1986bab9736ebf362. картинка меню тильда zero block код. картинка 09080923032021 68b10686c7e5f4fd21d786a1986bab9736ebf362. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09092923032021 11c535a81148df46fd31a221d83fcc32d657cdb5. меню тильда zero block код фото. меню тильда zero block код-09092923032021 11c535a81148df46fd31a221d83fcc32d657cdb5. картинка меню тильда zero block код. картинка 09092923032021 11c535a81148df46fd31a221d83fcc32d657cdb5. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

После всех корректировок и выравниваний элементов относительно друг друга получаем такую картинку.

меню тильда zero block код. 09113523032021 b9dafc91b118f4cf12c203bb20f84be4ba57aad5. меню тильда zero block код фото. меню тильда zero block код-09113523032021 b9dafc91b118f4cf12c203bb20f84be4ba57aad5. картинка меню тильда zero block код. картинка 09113523032021 b9dafc91b118f4cf12c203bb20f84be4ba57aad5. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Закрываем редактор Zero-блока, публикуем и просматриваем страницу.

меню тильда zero block код. 09102223032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. меню тильда zero block код фото. меню тильда zero block код-09102223032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. картинка меню тильда zero block код. картинка 09102223032021 c55402b64e43a7be0be0b90a07d8c73d4e85a0c9. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09130823032021 c059a2af229fba3bd6c583faa6f605cea8af2f9d. меню тильда zero block код фото. меню тильда zero block код-09130823032021 c059a2af229fba3bd6c583faa6f605cea8af2f9d. картинка меню тильда zero block код. картинка 09130823032021 c059a2af229fba3bd6c583faa6f605cea8af2f9d. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Внизу появится панель разработчика. Я обычно перетаскиваю её слева или справа — так удобнее тестировать вёрстку. Для этого нажмите на троеточие в правой части панели и выберите нужное расположение.

меню тильда zero block код. 09135223032021 03cf79135f4779127c709c3f53c2bad793496501. меню тильда zero block код фото. меню тильда zero block код-09135223032021 03cf79135f4779127c709c3f53c2bad793496501. картинка меню тильда zero block код. картинка 09135223032021 03cf79135f4779127c709c3f53c2bad793496501. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Далее нажмите на иконку экранов и введите нужное разрешение экрана ( 960×640) в центральной панели.

меню тильда zero block код. 09150323032021 1b9538555bc8b6bb16a0625a682661edb953ea1c. меню тильда zero block код фото. меню тильда zero block код-09150323032021 1b9538555bc8b6bb16a0625a682661edb953ea1c. картинка меню тильда zero block код. картинка 09150323032021 1b9538555bc8b6bb16a0625a682661edb953ea1c. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Собираем макет для планшета с вертикальной ориентацией

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

меню тильда zero block код. 09162923032021 db1d00c070e6bfe7b03adea86604a37f834a8066. меню тильда zero block код фото. меню тильда zero block код-09162923032021 db1d00c070e6bfe7b03adea86604a37f834a8066. картинка меню тильда zero block код. картинка 09162923032021 db1d00c070e6bfe7b03adea86604a37f834a8066. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Возвращаемся в редактор Zero-блока и переходим на версию для планшета с вертикальной ориентацией.

меню тильда zero block код. 09165723032021 999812ce5fd1de4b615414bafbd93db5772fddd1. меню тильда zero block код фото. меню тильда zero block код-09165723032021 999812ce5fd1de4b615414bafbd93db5772fddd1. картинка меню тильда zero block код. картинка 09165723032021 999812ce5fd1de4b615414bafbd93db5772fddd1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 09180823032021 7b6ae682f40573d2c3c9364d21893c206fdb58bd. меню тильда zero block код фото. меню тильда zero block код-09180823032021 7b6ae682f40573d2c3c9364d21893c206fdb58bd. картинка меню тильда zero block код. картинка 09180823032021 7b6ae682f40573d2c3c9364d21893c206fdb58bd. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Могло быть и хуже. Вот что мы сделаем:

Первым делом выставляем нужную высоту в панели настроек. Рекомендую всегда начинать с этого действия — так удобнее работать.

меню тильда zero block код. 09191023032021 d6905b1da291803f91b79e3ad59b4f33a6558d85. меню тильда zero block код фото. меню тильда zero block код-09191023032021 d6905b1da291803f91b79e3ad59b4f33a6558d85. картинка меню тильда zero block код. картинка 09191023032021 d6905b1da291803f91b79e3ad59b4f33a6558d85. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09201323032021 3b7708faf9e65ed911a092d713c25e363002f0d0. меню тильда zero block код фото. меню тильда zero block код-09201323032021 3b7708faf9e65ed911a092d713c25e363002f0d0. картинка меню тильда zero block код. картинка 09201323032021 3b7708faf9e65ed911a092d713c25e363002f0d0. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09210823032021 1f995b601aba92748690c952130d3d6669d3fcca. меню тильда zero block код фото. меню тильда zero block код-09210823032021 1f995b601aba92748690c952130d3d6669d3fcca. картинка меню тильда zero block код. картинка 09210823032021 1f995b601aba92748690c952130d3d6669d3fcca. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Сейчас текст маловат относительно блока — увеличим его. Начинаем с заголовка — Photo Moon. Кликните по нему и перейдите к панели настроек. Напротив Size (размер шрифта) задайте значение 70.

меню тильда zero block код. 09224323032021 370beaa7181ee574da259b39275b6952cac6dccd. меню тильда zero block код фото. меню тильда zero block код-09224323032021 370beaa7181ee574da259b39275b6952cac6dccd. картинка меню тильда zero block код. картинка 09224323032021 370beaa7181ee574da259b39275b6952cac6dccd. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

1. Переходим в режим редактирования текста и переносим слово Moon на вторую строку.

меню тильда zero block код. 09242423032021 00903f0eb2f4965b97ed6280c816f008714a036b. меню тильда zero block код фото. меню тильда zero block код-09242423032021 00903f0eb2f4965b97ed6280c816f008714a036b. картинка меню тильда zero block код. картинка 09242423032021 00903f0eb2f4965b97ed6280c816f008714a036b. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Правда, теперь заголовок разобьётся на две строки на всех экранах. Это особенность «Тильды». Но есть второй способ.

2. Меняем размер контейнера текста вручную или с помощью настройки ширины контейнера.

меню тильда zero block код. 09253523032021 600c921c37135fd9f269be82e65e11f5f1acd6d8. меню тильда zero block код фото. меню тильда zero block код-09253523032021 600c921c37135fd9f269be82e65e11f5f1acd6d8. картинка меню тильда zero block код. картинка 09253523032021 600c921c37135fd9f269be82e65e11f5f1acd6d8. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 09265723032021 174dab7e39076657c683b5ce7334147bbc186e9b. меню тильда zero block код фото. меню тильда zero block код-09265723032021 174dab7e39076657c683b5ce7334147bbc186e9b. картинка меню тильда zero block код. картинка 09265723032021 174dab7e39076657c683b5ce7334147bbc186e9b. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Теперь с помощью контейнера текста переносим слово Moon на вторую строку и уменьшаем параметр Spacing (межстрочный интервал) до единицы.

меню тильда zero block код. 09553923032021 790edd14d1fa2e38e50c5cdd522d1c613ba8dda8. меню тильда zero block код фото. меню тильда zero block код-09553923032021 790edd14d1fa2e38e50c5cdd522d1c613ba8dda8. картинка меню тильда zero block код. картинка 09553923032021 790edd14d1fa2e38e50c5cdd522d1c613ba8dda8. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

С заголовком разобрались, теперь то же самое проделываем с текстом описания. Но для начала передвинем его под заголовок. Размер гарнитуры шрифта описания — 18, размер ссылки — 14, размер номеров в слайдере — 40, размер шрифта строки копирайта менять не надо.

меню тильда zero block код. 09561523032021 630ebb99b605df8553fdab4b7cdc3e86fb4cb259. меню тильда zero block код фото. меню тильда zero block код-09561523032021 630ebb99b605df8553fdab4b7cdc3e86fb4cb259. картинка меню тильда zero block код. картинка 09561523032021 630ebb99b605df8553fdab4b7cdc3e86fb4cb259. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Макет для вертикального экрана планшета собран. Осталось увеличить логотип и немного поправить его по сетке.

меню тильда zero block код. 09564523032021 26a6e19b490e01af1c53f40698c91a643f0c986f. меню тильда zero block код фото. меню тильда zero block код-09564523032021 26a6e19b490e01af1c53f40698c91a643f0c986f. картинка меню тильда zero block код. картинка 09564523032021 26a6e19b490e01af1c53f40698c91a643f0c986f. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Готовый макет в «Тильде».

меню тильда zero block код. 09574823032021 f3f8f120fc7170f2c49b7dbd8b1f5f3d42b8795b. меню тильда zero block код фото. меню тильда zero block код-09574823032021 f3f8f120fc7170f2c49b7dbd8b1f5f3d42b8795b. картинка меню тильда zero block код. картинка 09574823032021 f3f8f120fc7170f2c49b7dbd8b1f5f3d42b8795b. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Закрываем редактор Zero-блока, публикуем и просматриваем страницу.

меню тильда zero block код. 09581223032021 88eef000bae38ca69140ee3add942b9e27512fb5. меню тильда zero block код фото. меню тильда zero block код-09581223032021 88eef000bae38ca69140ee3add942b9e27512fb5. картинка меню тильда zero block код. картинка 09581223032021 88eef000bae38ca69140ee3add942b9e27512fb5. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Собираем макет для смартфона

Макет для смартфона будет существенно отличаться от предыдущих версий: мы уберём плашку, увеличим заголовок, покрасим его в белый цвет, описание перекрасим в серый, приглушим фотографию Луны, чтобы яркая картинка не перебивала восприятие текста, а потом немного увеличим логотип и меню. У нас получится такой макет. Годнота.

меню тильда zero block код. 09591923032021 1f380dfc1f445b1528e2980d331eeefe8c8a2983. меню тильда zero block код фото. меню тильда zero block код-09591923032021 1f380dfc1f445b1528e2980d331eeefe8c8a2983. картинка меню тильда zero block код. картинка 09591923032021 1f380dfc1f445b1528e2980d331eeefe8c8a2983. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Переходим в редактор Zero-блока в режим редактирования макета для вертикально ориентированного смартфона.

меню тильда zero block код. 09595423032021 88b521f5a9cf8a283c41a04c9818011c30860cdf. меню тильда zero block код фото. меню тильда zero block код-09595423032021 88b521f5a9cf8a283c41a04c9818011c30860cdf. картинка меню тильда zero block код. картинка 09595423032021 88b521f5a9cf8a283c41a04c9818011c30860cdf. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Смотрим, как отображается макет по умолчанию.

меню тильда zero block код. 10004723032021 1df76a4fc6c31c6a6711f160e73ca03dbe05d16e. меню тильда zero block код фото. меню тильда zero block код-10004723032021 1df76a4fc6c31c6a6711f160e73ca03dbe05d16e. картинка меню тильда zero block код. картинка 10004723032021 1df76a4fc6c31c6a6711f160e73ca03dbe05d16e. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Можно просто поправить обозначенные места на скриншоте, и работа будет завершена. Но мы же перфекционисты, а восприятие информации со смартфона отличается от восприятия с планшета или десктопа, так что внесём больше правок:

Начнём стандартно — выставим высоту экрана рабочей области.

меню тильда zero block код. 10013023032021 a05b0a246d94ca49cd63912b54f76d25cd17bc3c. меню тильда zero block код фото. меню тильда zero block код-10013023032021 a05b0a246d94ca49cd63912b54f76d25cd17bc3c. картинка меню тильда zero block код. картинка 10013023032021 a05b0a246d94ca49cd63912b54f76d25cd17bc3c. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 10025623032021 48e955bcaa6ce26801c4639bf77f723f030656e1. меню тильда zero block код фото. меню тильда zero block код-10025623032021 48e955bcaa6ce26801c4639bf77f723f030656e1. картинка меню тильда zero block код. картинка 10025623032021 48e955bcaa6ce26801c4639bf77f723f030656e1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

На этом этапе у вас должно получиться что-то подобное:

меню тильда zero block код. 10035423032021 0183a8eb3d28a61335d1b32362fefa6eacfb6c89. меню тильда zero block код фото. меню тильда zero block код-10035423032021 0183a8eb3d28a61335d1b32362fefa6eacfb6c89. картинка меню тильда zero block код. картинка 10035423032021 0183a8eb3d28a61335d1b32362fefa6eacfb6c89. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 10053823032021 01c985b720c9d485c3202f0fd3f67804db43c17c. меню тильда zero block код фото. меню тильда zero block код-10053823032021 01c985b720c9d485c3202f0fd3f67804db43c17c. картинка меню тильда zero block код. картинка 10053823032021 01c985b720c9d485c3202f0fd3f67804db43c17c. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Меняем цвет текста описания с помощью панели настроек.

Источник

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

меню тильда zero block код. here. меню тильда zero block код фото. меню тильда zero block код-here. картинка меню тильда zero block код. картинка here. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 1. меню тильда zero block код фото. меню тильда zero block код-1. картинка меню тильда zero block код. картинка 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 2. меню тильда zero block код фото. меню тильда zero block код-2. картинка меню тильда zero block код. картинка 2. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 39. меню тильда zero block код фото. меню тильда zero block код-39. картинка меню тильда zero block код. картинка 39. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

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

меню тильда zero block код. 40. меню тильда zero block код фото. меню тильда zero block код-40. картинка меню тильда zero block код. картинка 40. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 5. меню тильда zero block код фото. меню тильда zero block код-5. картинка меню тильда zero block код. картинка 5. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 6. меню тильда zero block код фото. меню тильда zero block код-6. картинка меню тильда zero block код. картинка 6. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 3. меню тильда zero block код фото. меню тильда zero block код-3. картинка меню тильда zero block код. картинка 3. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 4. меню тильда zero block код фото. меню тильда zero block код-4. картинка меню тильда zero block код. картинка 4. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 18. меню тильда zero block код фото. меню тильда zero block код-18. картинка меню тильда zero block код. картинка 18. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

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

меню тильда zero block код. . меню тильда zero block код фото. меню тильда zero block код-. картинка меню тильда zero block код. картинка . Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 10. меню тильда zero block код фото. меню тильда zero block код-10. картинка меню тильда zero block код. картинка 10. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 10a. меню тильда zero block код фото. меню тильда zero block код-10a. картинка меню тильда zero block код. картинка 10a. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 10b. меню тильда zero block код фото. меню тильда zero block код-10b. картинка меню тильда zero block код. картинка 10b. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 3. меню тильда zero block код фото. меню тильда zero block код-3. картинка меню тильда zero block код. картинка 3. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 41. меню тильда zero block код фото. меню тильда zero block код-41. картинка меню тильда zero block код. картинка 41. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 42. меню тильда zero block код фото. меню тильда zero block код-42. картинка меню тильда zero block код. картинка 42. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 43. меню тильда zero block код фото. меню тильда zero block код-43. картинка меню тильда zero block код. картинка 43. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

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

меню тильда zero block код. 4. меню тильда zero block код фото. меню тильда zero block код-4. картинка меню тильда zero block код. картинка 4. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 12. меню тильда zero block код фото. меню тильда zero block код-12. картинка меню тильда zero block код. картинка 12. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. blob. меню тильда zero block код фото. меню тильда zero block код-blob. картинка меню тильда zero block код. картинка blob. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 12b. меню тильда zero block код фото. меню тильда zero block код-12b. картинка меню тильда zero block код. картинка 12b. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 12g. меню тильда zero block код фото. меню тильда zero block код-12g. картинка меню тильда zero block код. картинка 12g. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 45. меню тильда zero block код фото. меню тильда zero block код-45. картинка меню тильда zero block код. картинка 45. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

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

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

Источник

Инструкция: создаем лендинг на Tilda через Zero Block

Лендинг – идеальный инструмент для быстрого запуска новых товаров, услуг и акций. Теперь вовсе необязательно привлекать сторонних подрядчиков, чтобы создать свою посадочную страницу: достаточно будет конструктора сайтов на Tilda в Zero Block. Вместе создадим первый экран лендинга, адаптированный под все распространенные устройства.

Интерфейс Zero-редактора

Чтобы приступить к работе, переходим на уже созданный ранее лендинг либо создаем новый и нажимаем на кнопку «Создать новую страницу»:

меню тильда zero block код. 1 1. меню тильда zero block код фото. меню тильда zero block код-1 1. картинка меню тильда zero block код. картинка 1 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 2 1. меню тильда zero block код фото. меню тильда zero block код-2 1. картинка меню тильда zero block код. картинка 2 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 3 1. меню тильда zero block код фото. меню тильда zero block код-3 1. картинка меню тильда zero block код. картинка 3 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Нажимаем на плюс и прокручиваем боковое меню в самый низ. Нажимаем по кнопке «Нулевой блок»:

меню тильда zero block код. 4 1. меню тильда zero block код фото. меню тильда zero block код-4 1. картинка меню тильда zero block код. картинка 4 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Для редактирования содержимого нажимаем по кнопке «Редактировать блок»:

меню тильда zero block код. 5 1. меню тильда zero block код фото. меню тильда zero block код-5 1. картинка меню тильда zero block код. картинка 5 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Чтобы удалить содержимое, достаточно выделить курсором все элементы и нажать на кнопку del на клавиатуре. Алгоритм такой же, как в Photoshop, Paint или любой другой офисной программе.

Многие элементы в Zero Block выполнены по аналогии с привычными программами, и, если у вас есть опыт работы в Photoshop, Word и похожем софте, вы увидите знакомые элементы.

Артборд

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

Ширина блока составляет 1200 px – это максимально возможная ширина лендинга. Большинство ноутбуков имеют ширину экрана 1344 px, и с большей шириной сайт рискует просто не поместиться на экран. Появится горизонтальная прокрутка, что негативно скажется на пользовательском опыте и, как следствие, на конверсии. Адаптировать сайт под меньшее разрешение мы можем (вплоть до 320 px), но об этом чуть дальше в статье.

В отличие от ширины, высоту мы можем менять. Достаточно навести курсор на нижний край и с зажатой мышкой потянуть его вверх или вниз.

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

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

За это отвечает параметр Overflow в настройках артборда. Доступно 3 параметра:

Модульная сетка

Обратите внимание на вертикальные полосы в артборде. Это направляющие линии, которые используются для позиционирования элементов. Их отображение можно включать и выключать – достаточно нажать на клавиатуре G. Мы ориентируемся на них, когда размещаем элементы, чтобы они выглядели органично и привычно для пользователя. Таким образом, нам не придется вручную считать пиксели.

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

Для создания горизонтальных направляющих нужно нажать комбинацию клавиш Ctrl+H (⌘+H для Mac), а для вертикальных – Ctrl+Shift+H (⌘+Shift+H).

Также это можно сделать через меню в правом верхнем углу:

меню тильда zero block код. 6 1. меню тильда zero block код фото. меню тильда zero block код-6 1. картинка меню тильда zero block код. картинка 6 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Направляющие не отображаются на сайте, а только служат для более точного позиционирования элементов. Удалять их не обязательно – можно просто временно скрыть через то же меню (пункт Guides: Hide/Show). Если все-таки собираетесь удалять, наведите курсор на направляющую и нажмите крестик.

Настройки блока

По умолчанию настройки скрыты. Чтобы они появились, нажмите Tab на клавиатуре.

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

меню тильда zero block код. 7 1. меню тильда zero block код фото. меню тильда zero block код-7 1. картинка меню тильда zero block код. картинка 7 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Не советуем устанавливать слишком большое значение. Берите максимум 700 px, иначе блок не поместится на одном экране ноутбука и ухудшит пользовательский опыт. Например, ваш оффер не будет видно, и пользователь уйдет с сайта.

Значение высоты мы можем установить как в пикелях (Grid Container Height, px), так и в процентах (Window Container Height, %). С помощью параметра Grid Container Align in window можно установить, из какой точки будет идти отчет пикселей: из центра, верней или нижней границы.

Присутствует также возможность изменить цвет фона или добавить изображение:

меню тильда zero block код. 8 1. меню тильда zero block код фото. меню тильда zero block код-8 1. картинка меню тильда zero block код. картинка 8 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 9 1. меню тильда zero block код фото. меню тильда zero block код-9 1. картинка меню тильда zero block код. картинка 9 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Сравните оригинальное фото и получившийся результат.

меню тильда zero block код. 10 1. меню тильда zero block код фото. меню тильда zero block код-10 1. картинка меню тильда zero block код. картинка 10 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

меню тильда zero block код. 11 1. меню тильда zero block код фото. меню тильда zero block код-11 1. картинка меню тильда zero block код. картинка 11 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Как и настройки артборда, слои по умолчанию не отображаются. Для начала работы с ними нужно нажать комбинацию клавиш Ctrl+L (либо ⌘+L для MacOS). Этот инструмент позволяет нам схематично посмотреть на элементы, из которых состоит Zero Block.

меню тильда zero block код. 12 1. меню тильда zero block код фото. меню тильда zero block код-12 1. картинка меню тильда zero block код. картинка 12 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Учитывайте, что слои имеют приоритет по высоте. Если фон будет выше слоя с текстом, то пользователь увидит только фон – он закроет собой текст. Менять слои можно, перетаскивая их мышкой в меню слоев.

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

Доступные элементы

Для добавления элементов на артборд необходимо нажать в левом верхнем углу на плюс, после этого появится выпадающий список с доступными элементами:

меню тильда zero block код. 13 1. меню тильда zero block код фото. меню тильда zero block код-13 1. картинка меню тильда zero block код. картинка 13 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

После создания и размещения элемента в артборде доступны отдельные настройки. По умолчанию они скрыты. Для их отображения нужно нажать Tab или кнопку Settings справа внизу экрана.

Настройки всех элементов начинаются с настроек позиционирования.

меню тильда zero block код. 14 1. меню тильда zero block код фото. меню тильда zero block код-14 1. картинка меню тильда zero block код. картинка 14 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

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

Text – самый понятный элемент. Создает обычный текст.

меню тильда zero block код. 15 1. меню тильда zero block код фото. меню тильда zero block код-15 1. картинка меню тильда zero block код. картинка 15 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Текст

В первую очередь это выравнивание (слева, по центру, справа), цвет, кегль, шрифт и отступы. Учитывайте, что выравнивание по ширине выполняется относительно текстового блока, а не всей страницы.

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

меню тильда zero block код. 16 1. меню тильда zero block код фото. меню тильда zero block код-16 1. картинка меню тильда zero block код. картинка 16 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Для основного текста лучше не выбирать значения кегля меньше 14 px.

Есть 2 значения отступов (spacing): интерлиньяж (расстояние между строками) и кернинг (между символами). Рекомендую первое значение выбирать между 1,2–1,5, а второе не менять. В любом случае, в первую очередь ориентируйтесь на визуальное восприятие текста.

Нам также доступна прозрачность, изменение угла наклона и слоя текста.

меню тильда zero block код. 17 1. меню тильда zero block код фото. меню тильда zero block код-17 1. картинка меню тильда zero block код. картинка 17 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Первые 2 параметра могут пригодиться для реализации нестандартного решения с текстом:

меню тильда zero block код. 18 1. меню тильда zero block код фото. меню тильда zero block код-18 1. картинка меню тильда zero block код. картинка 18 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Для управления слоем с текстом мы можем воспользоваться четырьмя командами (слева направо):

меню тильда zero block код. 19 1. меню тильда zero block код фото. меню тильда zero block код-19 1. картинка меню тильда zero block код. картинка 19 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

При этом есть возможность через параметр Target выбрать, в каком окне откроется ссылка: в том же самом (Same window) или в новой вкладке (New window).

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

Чтобы добавить меню сайта, используем инструмент «Текст». Создаем первый элемент. Пусть это будет ссылка «Главная». Задаем ей основные параметры:

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

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

Теперь мы можем просто скопировать получившийся элемент и поменять текст.

Скопировать можно двумя способами: нажатием на клавиатуре Ctrl+C (⌘+C для MacOS) и Ctrl+V (⌘+V для MacOS) или через боковое меню, нажав на Copy.

меню тильда zero block код. 20 1. меню тильда zero block код фото. меню тильда zero block код-20 1. картинка меню тильда zero block код. картинка 20 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Советую приучить себя использовать именно горячие клавиши: это значительно ускорит рабочий процесс.

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

меню тильда zero block код. 21 1. меню тильда zero block код фото. меню тильда zero block код-21 1. картинка меню тильда zero block код. картинка 21 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Теперь добавим номер телефона и разместим его правее меню. Немного изменим его цвет – сделаем его более ярким и заметным:

меню тильда zero block код. 22 1. меню тильда zero block код фото. меню тильда zero block код-22 1. картинка меню тильда zero block код. картинка 22 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 23 1. меню тильда zero block код фото. меню тильда zero block код-23 1. картинка меню тильда zero block код. картинка 23 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Через него мы можем:

Теперь наш первый экран выглядит вот так:

меню тильда zero block код. 24 1. меню тильда zero block код фото. меню тильда zero block код-24 1. картинка меню тильда zero block код. картинка 24 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Изображения

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

Добавляем элемент на артборд. Сначала он будет незаполненным.

меню тильда zero block код. 25 1. меню тильда zero block код фото. меню тильда zero block код-25 1. картинка меню тильда zero block код. картинка 25 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

меню тильда zero block код. 26 1. меню тильда zero block код фото. меню тильда zero block код-26 1. картинка меню тильда zero block код. картинка 26 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Доступно 2 варианта загрузки: как файл с компьютера и по ссылке из интернета.

меню тильда zero block код. 27 1. меню тильда zero block код фото. меню тильда zero block код-27 1. картинка меню тильда zero block код. картинка 27 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

Для загрузки файла с компьютера нажмите по кнопке Upload file в центре окна. Для загрузки по URL нажмите по ссылке Upload from URL внизу формы.

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

меню тильда zero block код. 28 1. меню тильда zero block код фото. меню тильда zero block код-28 1. картинка меню тильда zero block код. картинка 28 1. Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».

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

Нам доступно изменение цвета (color), ширины (brdr.size) и скругления границы (radius). Помимо этого, можно выбрать стиль самой границы через параметр Style. Доступны такие варианты:

Что касается тени, тут гораздо больше возможностей для креатива:

Секрет удачной тени кроется в параметрах Offset, Blue, Spread. Мы можем сдвинуть одну или несколько сторон, изменить размытие или величину тени. По сути, мы можем даже фон поменять не отдельным элементом, а просто изменив тень.

Источник

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

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