Windows container grid container

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

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

Grid Container и его положение по оси X

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

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

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

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

Положение контейнеров относительно друг друга по оси Y

Если вы хотите, чтобы ваш блок занимал всегда 100% высоты экрана, для этого нужно задать высоту Window Container, отличную от высоты Grid Container. Соответственно, нужно в настройках артборда указать 100% высоты для Window Container.

Затем определить выравнивание Grid Container относительно экрана: сверху, по центру или по низу. По умолчанию стоит выравнивание по центру.

Изменение контейнера и начала координат для элемента

По умолчанию все элементы привязаны к Grid Container и начало координат находится в левом верхнем углу.

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

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

Теперь на любом экране логотип будет в левом верхнем углу.

Если мы хотим привязать элемент, например, к правому верхнему углу, то логика будет та же: задаем контейнер: Window Container и начало координат: ось X — right, ось Y — top.

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

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

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

Чтобы поменять положение начала координат, откройте меню +Container (по умолчанию оно свернуто).

Если вы зададите начало координат Center Center, то это упростит работу над адаптивной версией для разных экранов.

Создание «резиновых» элементов

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

Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container, а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.

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

Пример: создание полноэкранной обложки

Рассмотрим на примере как создать обложку со следующими параметрами:
— фоновое изображение занимает всю площадь экрана
— заголовок, подзаголовок и кнопка всегда по центру экрана
— стрелка «вниз» всегда по низу экрана

В настройках артборда добавим фоновое изображение и зададим ему параметр: Window Container Height — 100%.

Для заголовка, подзаголовка и кнопки определим начало координат — Center / Center и, при необходимости зададим смещение по оси Y.

Для стрелки назначим контейнер Window Container, начало координат: Center / Bottom и сместим ее на 70 пикселей вверх. Это значит, что кнопка всегда будет на 70 пикселей выше нижнего края окна браузера.

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

Масштабирование элементов под ширину экрана

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

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

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

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

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

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

Важно: Данная настройка применяется сразу ко всему блоку — всех элементов, которые добавлены. Для ее корректной работы все элементы в блоке должны быть привязаны к Grid Container. Если в блоке присутствуют элементы, привязанные к Window Container, они могут отображаться некорректно.

Особенности работы с масштабированием

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

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

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

1. Для кого подойдет Tilda

2. Основные настройки сайта Tilda 

3. Готовые шаблоны сайтов Tilda: примеры

4. Стандартные блоки Tilda

5. Zero Block Tilda

6. Как подключить домен на Tilda? 

7. Веб-аналитика: подключение Яндекс.Метрики и Google Analytics

8. Платежные системы Tilda

9. Поддержка, справочная документация и стоимость тарифов Tilda

• /
• /

10+ фишек по верстке в Zero-блоке на Tilda

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

1) Выравнивать объекты по осям, кратным 10 или 5

При верстке в Zero-блоке чаще всего, кроме творческих / некоммерческих проектов, я выравниваю объекты таким образом, чтоб положение было кратно 10, реже 5.

Это позволяет не запутаться в большом количестве объектов, особенно на адаптивах.

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

2) Дополнительные разрешения в адаптивах

Помимо стандартных брейк-пойнтов, которые предлагает Тильда, я обычно добавляю еще как минимум два — 1920 для больших мониторов и 375 для мобилок.

Если с большими компами все очевидно, то вот 375 в мобилке я стал добавлять относительно недавно. Раньше я пренебрегал маленькими телефонами с шириной 320 (iPhone 4, iPhone 5 и др), благо они с каждым годом встречаются все реже. Хотя с другой стороны, сайт должен корректно отображаться на любом устройстве — в подобных мелочах кроется профессионализм.

Отмечу, что я использую это лишь в том случае, если сайт на 100% в Зеро-блоке. Если есть хотя бы один стандартный блок — нужно смотреть «индивидуально».

3) Единые отступы сверху-снизу и слева-справа

Некоторые дизайнеры верстают в Zero без отступов сверху-снизу и затем выставляют их отдельно в настройках Zero-блока.

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

Отступы при верстке по Grid-контейнеру [без автоскейла] в большинстве проектов на разных устройствах

Сверху-снизу (если у блоков различается фон):

• Большие компы 1920 — 100-180, чаще 120-140
• Десктоп — 70-120px, чаще 80-90px
• Планшет — 60-90px, чаще 70-80px
• Мобилка — 60-90px, чаще 70-80px

Слева-справа:

• Большие компы 1920 — 220 / ширина контейнера 1480
• Десктоп — 20px / ширина контейнера 1160px
• Перевернутый планшет — 10px / 940px
• Обычный планшет — 20px / 600px
• Перевернутая мобилка 480 и 375 — 20px / 335px
• Обычный телефон 320 — 20px / 280px

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

4) Главный экран

Чаще всего главный экран занимает 100% высоты. Для этого в Zero-блоке есть специальное поле. Чтобы было удобнее верстать, я обычно ставлю Stretch.

Размеры для всех типов устройств (при 100% высоты экрана):

• Большие компы 1920 — 1080px
• Десктоп — 650px
• Перевернутый планшет — 650px
• Обычный планшет — 830px
• Перевернутая мобилка — 700px
• Мобилка 375 — 680px
• Мобилка 320 — 580-600px

Иногда на главный экран я еще добавляю отдельную версию 1440 — там высота 730-750px (ширина контейнера 1160px (как на разрешении 1200), отступы справа-слева 140px).

По поводу размещения объектов
Лого, пункты меню и др. объекты в верхней части экрана я размещаю по осям Left-Top (про Grid и Window-контейнеры в следующем пункте). Остальные элементы (заголовки, фото, кнопки за пределами шапки и др.), как правило, по осям Left-Center, в том числе на адаптивах.

В редких случаях отдельные объекты — Left-Bottom на десктопе. При адаптации начиная с планшета раньше я делал все по Left-Top, но в дальнейшем решил отказаться от этого, сохраняя Left-Center.

Во всех остальных блоках, кроме главного экрана — строго Left-Top [на всех устройствах].

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

5) Grid и Window-контейнеры

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

Лично я за все годы работы с Тильдой почти не использовал Window-контейнер, кроме некоторых случаев:

• Когда, нужно привязать объекты к конкретному «месту» (например, фото без фона к низу экрана).
• Когда шапку (лого, пункты меню и тд) нужно привязать к верху экрана. Лично мне, вместо верстки по Window, удобнее делать через отдельный Zero-блок с нулевой высотой и Overflow Visible (в настройках Zero-блока) — так он будет накладываться на следующий блок.
• Когда совмещаешь стандартные блоки и Zero в мобильной версии, при том что большинство блоков стандартных. Если большинство блоков в Zero, то проще добавить модификацию Annexx, которая подгоняет размер стандартных блоков под Zero — если это на 1-й странице. Если на всех страницах сайта — лучше добавить код в CSS-стили в настройках сайта.

@media screen and (max-width: 480px) { /*Максимальная ширина смартфона где будет применяться эффект сетки зеро-блока*/
.t-col { 
    padding: 0 10px !important; } /*Это отступы слева и справа до контента в Grid-контейнере*/
.t-container {
    max-width: 320px !important; /*Это максимальная ширина контейнера в зеро-блоке, при отображении мобильного*/
}
}

При этом нужно быть аккуратным, т.к. объекты в одном блоке, сверстанные по Grid и по Window, могут «конфликтовать» друг с другом (накладываться и тд). Нужно все тестировать с разных устройств (об этом ниже).

Резюме: большинство сайтов, за которые платят до 100 тыс. руб., я верстаю по Grid-контейнеру и не загоняюсь.

6) Немного про Autoscale

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

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

Резиновая верстка идеально подходит для некоммерческих проектов для портфолио.

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

Если я использую Автоскейл, то только на первых двух экранах (десктопе и перевернутом планшете)

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

Когда-то давно пробовал сверстать с Автоскейлом мобильную версию, но тогда все сильно поехало, когда тестировал с телефона (при том что в самом Zero-блоке все было ровно).

Возможно, сейчас я бы и нашел ошибки, но тогда все казалось правильно, и я решил не использовать Автоскейл на мобильных (и пока не жалел об этом

7) Проверка адаптивов на разных устройствах

На этом этапе высвечивается большинстве проблем с версткой, если таковые имеются.

Я использую сервис http://iloveadaptive.com/ru/ , интуитивно понятный функционал. Для мобильных версий (если, например, недостаточно примеров устройств в iloveadaptive) можно использовать в браузере (я работаю в Хроме) правой кнопкой «Просмотр кода» —> «Отзывчивое устройство» — и выбираете нужное устройство либо задаете размеры вручную.

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

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

Облегчение картинок и видео

9) Не Zero-блоком единым

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

Например, я нередко добавляю стандартный раскрывающийся блок (TX16N, TX16N2 или SV501), при этом подгоняя типографику и скрывая лишнее отображение под размеры экрана в настройках блока.

Когда совмещаете стандартные блоки и Zero, будьте очень внимательны с адаптивами. Все проверяйте и тестируйте. Например, в стандартных блоках, насколько мне известно, нельзя совместить с версиями в Zero для 1920. Хотя, возможно, когда Вы будете это читать, уже появятся модификации.

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

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

Большинство красивых и сложных анимаций, которые нравятся дизайнерам и завоевывают награды на Awwwards, Behance, Dribbble и др., не особо актуальны для небольших проектов до 100 тыс. руб.

Главное при работе с анимациями — не переборщить, потому что велик соблазн закинуть в один проект сразу все, что ты знаешь / умеешь.

Говоря о повторяющихся анимациях, я обычно добавляю один из тип анимаций для всех блоков на сайте:

• Для текста (для заголовков / для подзаголовков / для текстов) подходят стандартные анимации, например, Fade-In, Fade-Up или Fade-down. Либо же модификации, например, из https://matildaweb.tilda.ws
• Для картинок также чаще всего либо стандартные анимации, либо Step-by-step по скроллу, либо модификации.

Важно, чтобы все анимации были единые, то есть в одном проекте использовать, например, для одного заголовка Fade-Up, а для другого Fade-Left (да еще и с разными расстояниями) — крайне неуместно.

Чтобы стандартные анимации были выглядели плавнее, я обычно увеличиваю время анимации (например, 2-3 сек) и уменьшаю расстояние (10-20px).

На многостраничных проектах, как правило, анимации либо очень простые, либо только на главной странице.

11) Немного про размеры шрифтов

Достаточно сильно зависят от типа шрифта.

Тем не менее есть примерная вилка, подходящая для классических шрифтов (типа SF Pro Display, Graphik, Raleway и тд) в большинстве проектов.

Благодарю, что дочитали до конца!

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