Scale grid container tilda что это

14 сентября 2021
Три новых функции
в Zero Block

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

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

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

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

Выравнивание расстояний между элементами по осям

Функция помогает распределить элементы на рабочей области и выравнять расстояние между ними по осям. Работает при выделении 3-х элементов и более.

Что такое autoscale и с чем его верстают

Для старта быстрое определение: “Резиновая вёрстка (autoscale) — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины.” (с) Яндекс.

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

Как это работает на примере

Все элементы сайта растягиваются по ширине, увеличивая или уменьшая свой размер в процентном соотношении от стандартной ширины (в данном случае — 1200 px). Все это происходит автоматически. Контент подстраивается под ширину экрана, а все элементы в нем остаются на своих местах, просто масштабируя в большую или меньшую сторону.

Немного математики

Если дизайн-макет делался под ширину 1200px, то при ширине в 1920px происходит масштабирование на ~60%. А это значит, что если в макете кегль основного текста равен 10 pt, то при масштабировании до FullHD разрешения — он преобразуется в 16px, сохранив свое положение по сетке. Так же, как и изображение с wh 200 трансформируется в 320 px по высоте и ширине. Это все стоит учитывать при проектировании дизайна, но о советах и лайфхаках будет чуть ниже.

оригинальный размер текста в редакторе - 11px

В чем концептуальный смысл резиновой верстки?

Ответ на этот вопрос находится на поверхности, и его можно сформулировать так: “Хочу, чтобы мой сайт увидели все пользователи именно таким, каким я его задумал”.

1. Пугающая пустота

В чем проблема стандартной верстки? Ты можешь рисовать дизайн без “ушек” по краям, аля сразу под ноутбук или широкий монитор. Все выглядит классно, органично, но тут ты верстаешь его под 1200, открываешь на 1920 и тут… пустота. Пустота по краям, которая заставляет оказаться один на один со своими мыслями и экзистиальными вопросами о бытие.

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

2. Попытки в window-фиксацию

Шутки в сторону. А что, если ты рисовал макет с элементами по краям экрана? У тебя есть вариант зафиксировать их по window-контейнеру, но этот вариант вряд ли можно назвать идеальным. Они просто могут уехать так далеко от основного контента на широкоформате, что будет казаться, будто это часть какого то другого сайта случайно влезла в твой фрейм. Или наоборот, пренебрегая личным пространством, слишком близко подбираться к контенту по сетке, и эту связь едва ли можно будет охарактеризовать как “у нас всё по согласию”.

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

3. Дополнительное разрешение

Некоторые особо продвинутые юзеры мне скажут: “можно же просто добавить адаптив на 1920!”. Но что, если у меня браузер открыт по ширине 1440 на моем 2к мониторе? Будем делать 15 дополнительных адаптивов? Нет, мы снова придем туда, откуда пришли — к ушкам по краям. И да, мой браузер часто открыт не на всю ширину монитора…

Autoscale всему голова

Что делать, если тебя такой расклад не устраивает и ты хочешь чтобы все было ровно на тех местах, на которых ты задумал? Кто здесь дизайнер, в конце концов? — Верно, делай авто скейл и жизнь будет веселей.

Почему редко используется и причем здесь лень

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

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

Резюмируем и переходим к советам

Заметил, что если ты что-то хвалишь, то плюсы должны идти первыми, а минусы уже за ними. Так и сделаем.

Плюсы

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

Минусы

Нужно более внимательно задавать размеры для базового макета
Некоторый код плохо работает или не адаптирован к autoscale
Нужно лучше продумывать высоту блоков из-за их растягивания
Сложнее продумать приятные глазу отступы по высоте и ширине
Может выглядеть не прикольно (от тебя зависит)

Советы, лайфхаки, стратки и прочее

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

1. Делай блоки более узкими

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

Чтобы блок поместился в один экран, его высота в идеале не должна превышать 600px

2. Будь аккуратнее с текстом

Во-первых, сложно сохранить баланс между слишком маленьким текстом на ноутбуках и слишком большим на широких мониторах. Здесь нужен опыт, грация и внимательность. Рекомендую для основного текста использовать кегль 10-12 пунктов, не больше.

Во-вторых, имей ввиду, что пелина текста плохо читается даже при обычной верстке, а с растягиванием он станет просто антиподом слов “вкус” и “удобство”. Такой текст практически невозможно будет читать, даже если его оригинальный pt 10. Сделать меньше — убить читабельность на ноутбуках, а больше — сделать еще хуже на широких мониторах.

Надо стараться делать области с текстом узкими (правка от нашего дизайнера: не сам текст, а текстовый элемент!), разбавлять изображениями\графикой\видео или, как минимум структурой заголовков и подзаголовков.

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

3. Продумай отступы контента по краям

Очень легко загубить проект просто не верно подобранными отступами по краям экрана. В Figma твой макет может выглядеть классно, но после верстки не приятно будет обнаружить, что контент предательски “слипается” с границами экрана или чрезмерно далеко от них. Здесь золотого правила нет, все зависит от стилистики твоего дизайна.

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

самые широкие элементы на нашем сайте имеют отступ 64px по краям

4. Позаботься о совместимости

а) Если говорить о Тильде, то при использовании 1-2-х стандартных блоков не забудь настроить им авто скейл с такими же отступами и размерами как у zero-блоков. Делается это с помощью сторонних модификаций. Ссылок давать не буду, это очень быстро гуглится. Вообще, по возможности, лучше не использовать библиотечные блоки. Чтобы иметь больше контроля в таких тонких делах.

б) Некоторые анимации и кастомный код может не правильно работать с масштабированием. Здесь надо все внимательно тестировать и адаптировать по возможности.

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

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

5. Выключите адаптивную оптимизацию изображений

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

Пример: изображение весит 10 мб и имеет размер 500 на 500 в десктопной верстке, а оригинальный размер: 1000 на 1000. Ты грузишь его на мобильном с размером 200 на 200, и все лишнее “качество” от изображения Тильда убирает сама.

Проблема в том, что при использовании масштабирования картинка будет иметь стандарт на контейнер в 1200 пикселей и свой размер в нем. То есть, при масштабировании до 1920 — она загрузится не в нужных 700 на 700, а в тех же 500 на 500, просто растянув сам контейнер с картинкой.

Поэтому простой совет: отключай функцию и оптимизируй изображения вручную.

6. Как включить то?

Самое главное и ответственное! Включается она в настройках zero-блока (меню справа). Просто переводим параметр SCALE GRID CONTAINER с положения “None” в положение “Autoscale to window width”. Что буквально означает: “адаптировать под ширину экрана”.

Главное, не забудь проверить, включена ли опция на других разрешениях. Ей можно управлять отдельно для каждого адаптива. Но я рекомендую использовать везде, если конечно нет цели схалтурить и сделать не все 5 разрешений, только а 3 вертикальных. Тогда да, лучше отключить на мобильных и планшетах.

Влияние на конверсию

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

Главное помнить, что в неумелых руках — что угодно может стать деструктивным.

(после редизайна сайта школы массажа с резиновой версткой — конверсия выросла в 2-3 раза)

Эпилог

Искренне надеюсь, что статья была для тебя полезна и легка в прочтении. Ну а если ты, будучи заказчиком или разработчиком загорелся попробовать хотя бы раз использовать резиновую верстку — то в светлый путь! 🙂 Чем больше креативных и интересных проектов — тем лучше. Всем добра и удачи.

И да, мы в нашей студии сейчас все проекты делаем с autoscale’ом. И это не принцип, просто на данный момент нам это нравится (мы так чувствуем) и замечаем позитивные стороны таких решений.

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

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 относительно экрана: сверху, по центру или по низу. По умолчанию стоит выравнивание по центру.

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

По умолчанию все элементы привязаны к 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%.

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

Параметры желтого прямоугольника: Container — Window, ширина — 50%, высота — 100%, смещение по оси Х — 50%.

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

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

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

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

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

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

Посмотреть пример вживую http://help.tilda.ws/zero-block-example
Масштабирование элементов под ширину экрана

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

Читать:

Закладки на телефоне где они находятся в яндекс

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

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

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

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

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

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

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

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

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

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

Что такое autoscale и с чем его верстают

Для старта быстрое определение: “Резиновая вёрстка (autoscale) — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины.”

Как это работает на примере

Немного математики

оригинальный размер текста в редакторе — 11px
В чем концептуальный смысл резиновой верстки?

Пугающая пустота

Попытки в window-фиксацию

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

Autoscale всему голова

Почему редко используется и причем здесь лень

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

Резюмируем и переходим к советам

Заметил, что если ты что-то хвалишь, то плюсы должны идти первыми, а минусы уже за ними. Так и сделаем.

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

Нужно более внимательно задавать размеры для базового макета
Некоторый код плохо работает или не адаптирован к autoscale
Нужно лучше продумывать высоту блоков из-за их растягивания
Сложнее продумать приятные глазу отступы по высоте и ширине
Может выглядеть не прикольно (от тебя зависит)

Советы, лайфхаки, стратки и прочее

1. Делай блоки более узкими

Чтобы блок поместился в один экран, его высота в идеале не должна превышать 600px
2. Будь аккуратнее с текстом

Во-первых, сложно сохранить баланс между слишком маленьким текстом на ноутбуках и слишком большим на широких мониторах. Здесь нужен опыт, грация и внимательность. Рекомендую для основного текста использовать кегль 10-12 пунктов, не больше.

Во-вторых, имей ввиду, что пелина текста плохо читается даже при обычной верстке, а с растягиванием он станет просто антиподом слов «вкус” и »удобство”. Такой текст практически невозможно будет читать, даже если его оригинальный pt 10. Сделать меньше — убить читабельность на ноутбуках, а больше — сделать еще хуже на широких мониторах.

Надо стараться делать области с текстом узкими (правка от нашего дизайнера: не сам текст, а текстовый элемент!), разбавлять изображениями\графикой\видео или, как минимум структурой заголовков и подзаголовков.

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

самые широкие элементы на нашем сайте имеют отступ 64px по краям
4. Позаботься о совместимости

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

5. Выключите адаптивную оптимизацию изображений

Поэтому простой совет: отключай функцию и оптимизируй изображения вручную.

6. Как включить то?

Самое главное и ответственное! Включается она в настройках zero-блока (меню справа). Просто переводим параметр SCALE GRID container с положения “None” в положение “Autoscale to window width”. Что буквально означает: “адаптировать под ширину экрана”.

Влияние на конверсию

Главное помнить, что в неумелых руках — что угодно может стать деструктивным.

после редизайна сайта школы массажа с резиновой версткой — конверсия выросла в 2-3 раза

Искренне надеюсь, что статья была для тебя полезна и легка в прочтении. Ну а если ты, будучи заказчиком или разработчиком загорелся попробовать хотя бы раз использовать резиновую верстку — то в светлый путь!: ) Чем больше креативных и интересных проектов — тем лучше. Всем добра и удачи.

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

7 комментариев
Написать комментарий.

10-12 pt . Во-первых на тильде и в фигме используются значения в px, а не в pt, это принципиально разные по размеру величины. И если вы имели ввиду пиксели, то это же дико мало, представьте эб@/\о пользователи эиров с 13 диагональю, у которых размер не увеличивается до полноценного монитора, не говоря уж о тех у кого 11 дюймов. Я так уверенно об этом говорю, потому что как раз недавно тестировал как это выглядит в реальных размерах, и если шрифт размером в 14 px ещё кое где, исключительно в коротеньких не особо важных приписках можно размещать, то 10 px уже ни в какие ворота, в то время как нормой для текста считается 16-20 px. И да, в этом и заключается основная проблема автоскейла — или на больших мониторах текст выглядит несуразно большим (с чем впринципе можно мириться на промо страницах), или на маленьких диагоналях он становится нечитаемо мелким, два стула.

Развернуть ветку

Спасибо за комментарий, улыбнуло 🙂
Вы в целом правы в выводе: два стула. Но скажу по опыту, с эб@/\о у владельцев ноутбуков все в среднем в порядке при базовом размере текста 11-12px) Мы гораздо чаще слышим недовольства от людей, которые при размере в 16px говорят «слишком большой» на 2к мониторах. Выглядит более болезненно, на наш взгляд, по этому свой стул мы выбрали)

И конечно мы знаем, что в Тильде px, а не pt) Есть дизайнеры-староверы, вышедшие из типографий, которые до сих пор делают макеты в psd или ai с значениями в pt. Удивительно, но факт. Для таких людей и упоминаем эти значения, которые отличаются от пикселей примерно на 30%. Те же 10pt — это ~13px

Развернуть ветку

Соглашусь, что перемешивать эти значения в тексте — плохое решение, больше так делать не будем, чтобы не путать)

Развернуть ветку

Очень полезная статья, еще и практичная!