Как создать собственный дизайн для сайта на Тильде
Контроль каждого элемента. Вы можете контролировать каждую деталь блока (текст, изображения, кнопки, плашки): в каком месте, какого размера и на экранах с каким разрешением она будет находиться.
Слои. Удобный инструмент для создания глубины на странице с помощью наложения элементов друг на друга и теней.
Привязка к краям экрана или сетки. Каждый элемент сайта можно позиционировать относительно сетки или экрана.
Сложная типографика. У дизайнеров есть полная свобода в создании нестандартных типографических решений.
Прозрачность. Задавайте прозрачность элементам и теням под ними. Индивидуальная настройка адаптивности. Меняйте все в зависимости от разрешения экрана: композицию, набор видимых элементов.
Плашки. Добавляйте цветные плашки, карточки для контента или загружайте изображения внутрь геометрических форм.
Видео. Добавляйте на⦁сайт видео из⦁youtube или vimeo. В⦁Zero Bock вы⦁сможете регулировать его пропорции и⦁положение на⦁странице.
Вставка HTML. Добавляйте любые элементы в⦁Zero Block при помощи вставки HTML кода и⦁настраивайте позиционирование этих элементов на⦁каждом экране.
Tooltip. Используйте этот интерактивный инструмент, чтобы добавить всплывающие подсказки. Вы⦁можете настроить цвет, тень, размер, выбрать или загрузить иконку, которая будет отображаться внутри кружка, а⦁также загрузить изображение, которое будет всплывать при наведении.
Форма обратной связи. Вы можете добавить поля для ввода, подключить сервисы приема данных, задать стиль формы и применить к ней анимацию.
Анимация появления элементов. Добавляйте анимацию при появлении элементов: через прозрачность, увеличение, появление снизу, сверху, справа или слева экрана.
Пошаговая анимация. Используйте пошаговую анимацию, чтобы сделать страницу интереснее и динамичнее. Анимацию можно добавить по клику, по скроллу, при наведении на элемент и при появлении элемента на экране.
Параллакс. Применяйте к⦁элементам параллакс при скролле и⦁параллакс при движении курсора мышки.
Фиксация при скролле. Применяйте к элементам фиксацию во время скролла. Вы можете задать расстояние, в течение которого элемент будет зафиксирован, и его расположение.
Если вы привыкли рисовать макет сначала в графических редакторах, то с помощью Zero Block вы сможете легко перенести его на сайт в том виде, в котором задумали. Для этого в Zero Block есть сетка в 12 колонок и индивидуальные параметры у каждого элемента: координаты, размеры, позиционирование относительно сетки (или краев экрана), параметры прозрачности и тень. Благодаря этим инструментам, вы можете воссоздать ваш макет в Zero Block.
Интерфейс Zero Block похож на интерфейс графических редакторов, вам нужно будет добавить необходимые элементы и задать им соответствующие координаты. А если вы все это уже сделали ранее, повторить это в Zero Block не составит труда. Используйте Zero Block, чтобы быстро перенести вашу задумку из графического редактора на сайт без программирования.
Сайты, созданные на Тильде, чаще всего имеют блочную структуру, предлагая посетителю скроллить вниз раздел за разделом. Это тренд унификации в веб-дизайне. На первый план выходит контент, а не дизайн.
Если вы хотите изменить подход к чтению и вести читателя другими путями, Zero Block — отличный инструмент.
Чтобы не запутаться в большом количестве элементов, используйте инструмент «Слои» (Layers). Там вы можете управлять всеми элементами в блоке: менять местами, скрывать и ставить замок.
Чтобы открыть слои, нажмите горячие клавиши ⌘+ L или Cntrl + L для Mac, для Windows — Cntrl + L.
3. Необходимо немного изменить стандартный блок Тильды
Когда хочется изменить что-то в обычном блоке и это нельзя сделать с помощью настроек.
Если вы выбрали стандартный блок Тильды и хотите его немного изменить или что-то добавить, а нужных параметров нет в настройках, воспользуйтесь функцией «Конвертировать в Zero Block». Тогда выбранный блок можно будет редактировать как Zero Block. Эта функция доступна для большинства блоков Тильды.
Разберем по этапам. Например, изменим блок с тарифами: вынесем иконки за пределы карточки с информацией.
После того, как вы внесли изменения на самом большом экране, расположение элементов на остальных экранах останется прежним. Изменится только добавленный вами контент. Так вы можете управлять всеми деталями самостоятельно и создавать совершенно разные композиции на всех экранах.
Настраиваем отображение для остальных размеров экрана от большего к меньшему.
Помните, что если вы впоследствии измените текст, нужно проверить отображение на всех экранах еще раз.
Стандартные блоки Тильды имеют много настроек. Добавьте максимально подходящий вам блок из библиотеки и, открыв вкладку «настройки», посмотрите, можно ли с помощью них добиться нужного вам результата. Возможно, Zero Block вам не понадобится.
Приведенные ниже примеры созданы из стандартных блоков Тильды.
Обычные блоки Тильды располагаются по сетке из 12 колонок. Так каждому заголовку можно задать отступы, равные любому количеству колонок. Если вы создали композицию в Zero Block без учета сетки, то обычные блоки невозможно будет поставить на те же отступы без перевода в Zero Block. Например, вы создаете сайт, чередуя обычные блоки и Zero Block. При этом, если в Zero Block вы расставляете элементы без учета сетки, то элементы в обычных блоках не получится разместить на те же расстояния, что и в Zero Block. Помните, что обычные блоки Тильды можно расположить только по сетке.
При создании дизайна в Zero Block, мы советуем использовать сетку и располагать основные элементы, учитывая оси. Так Zero Block можно будет легко сочетать с остальными блоками Тильды.
В Zero Block есть возможность добавить и настроить видео из YouTube и Vimeo. Можно менять размер и соотношение сторон видео, его прозрачность, задавать тень и применять анимацию.
В настройках видео можно задать автоматическое воспроизведение, включение и отключение зацикливания, задание времени начала и завершения и загрузить свою обложку.
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом или изображением. Он может быть полезен, когда вы, например, рассказываете про какой-то сложный предмет и хотите на фото описать его составные части. Или вы продаете дома в строящемся поселке — можно нарисовать схему и отметить на ней каждый участок.
В тултипе много настроек: можно настроить цвет, тень, размер, выбрать или загрузить иконку, которая будет отображаться внутри кружка, а также загрузить изображение, которое будет всплывать при наведении.
Не забудьте после распределения всех элементов в блоке и использования тултипа проверить расположение всплывающей подсказки на всех разрешениях экранов, чтобы подсказка не обрезалась сверху или снизу блока или по его краям.
Чтобы создать длинный скролл, задайте высоту блока (Window container height) в процентах от высоты экрана. Например, если вы хотите, чтобы блок был высотой в две высоты экрана, поставьте значение 200.
Задайте фоновому изображению позицию fixed.
Если вы хотите, чтобы текст и другие элементы поверх изображения появлялись на странице не сразу, а в нижней части, задайте каждому элементу Container — Window container и Axis Y — Bottom. Теперь расположение элементов ориентировано на нижнюю границу изображения. Поднимите каждый из них на столько, на сколько хотите сделать их выше этой границы.
Когда вы хотите наложить какой-то элемент на стандартный блок. Таким образом вы сэкономите время — не нужно будет переводить стандартный блок в нулевой и настраивать его адаптивность.
Чтобы наложить элемент на соседний блок, создайте рядом с ним узкий нулевой блок, расположите элемент в нужном месте так, чтобы он выходил за пределы белой области, включите опцию Overflow. Не забудьте проверить отображение элемента в мобильной версии.
Как настроить адаптивность
Мы предусмотрели адаптацию для пяти основных видов экранов. С помощью нее ваш блок на любом устройстве будет выглядеть хорошо.
Создавая Zero Block, важно проверить, как выглядит сайт на всех экранах. Сделать это можно прямо в Zero Block, нажав на изображение соответствующего устройства.
Zero Block устроен так, что каждый элемент на каждом экране можно настроить индивидуально, поэтому, меняя композицию или контент на одном из них, на экранах с меньшим разрешением блок может выглядеть по-другому из-за разницы в длине строки или размере элементов.
Создавая Zero Block с нуля, адаптивность нужно настраивать самостоятельно. Важно помнить об этом перед публикацией сайта.
Если весь ваш сайт предполагает дизайн в Zero Block, то удобнее разбивать его на отдельные блоки. Так вы сможете отключать блоки для экранов с маленьким разрешением или временно выключать их для всего сайта.
Если на большом экране вы используете множество деталей, то, для удобства восприятия, на экранах с меньшим разрешением вы можете сделать все проще и лаконичнее.
У каждого вида анимации есть параметры. Разберем, что они означают.
Duration — длительность анимации в секундах. Чем больше значение, тем медленнее анимация.
C помощью пошаговой анимации любому элементу страницы можно назначать последовательные шаги трансформаций и дать возможность пользователю взаимодействовать с элементами.
Чтобы в нулевом блоке добавить элементу пошаговую анимацию выделите его, зайдите в настройки и перейдите в раздел пошаговой анимации (находится в конце настроек элемента).
Пошаговая анимация начинает происходить по какому-либо событию — действию пользователя на странице. В нулевом блоке предусмотрено 4 события, по которым воспроизводятся шаги анимации:
- Анимация по скроллу (on Scroll)
- Анимация при появлении элемента (on Screen)
- Анимация при наведении на элемент (on Hover)
- Анимация по клику (on Click)
Пошаговая анимация начинает происходить по какому-либо событию — действию пользователя на странице. В нулевом блоке предусмотрено 4 события, по которым воспроизводятся шаги анимации:
- Анимация по скроллу (on Scroll)
- Анимация при появлении элемента (on Screen)
- Анимация при наведении на элемент (on Hover)
- Анимация по клику (on Click)
Примеры анимации по скроллу:
Все примеры анимации вы можете добавить к себе и использовать в личных проектах.
Элемент на экране (element on Screen) — анимация начинает воспроизводиться, когда элемент пересекает нижнюю границу браузера и появляется на странице.
Блок на экране (block on Screen) — анимация воспроизводится, когда нулевой блок, в котором находится элемент, пересекает нижнюю границу браузера и появляется на странице.
У каждого вида анимации есть дополнительные настройки:
Тригер начала анимации (Start Trigger) — к чему будет привязано начало анимации. Есть выбор из трех областей — верхней границы (on Window Top), центра экрана (on Window Center) и нижней границы (on Window Bottom).
По умолчанию задан тригер нижней границы экрана — анимация на странице начинает воспроизводится, как только пересекает нижнюю границу браузера.
Смещение начала анимации (Trigger Offset) — расстояние в пикселях от выбранного тригера, через которое воспроизводится анимация.
Зацикливание анимации (Loop) — параметр, который позволяет повторять заданные шаги бесконечно.
Вы можете протестировать получившуюся анимацию с помощью кнопок Play Element (проиграть анимацию этого элемента)/ Play All (проиграть анимацию всех элементов в блоке). Такая опция доступна для всех видов анимации кроме анимации по скроллу.
Для удобства работы над анимацией вы можете работать в двух вкладках браузера: в одной редактировать нулевой блок, а во второй открыть предпросмотр страницы. Так вы можете оперативно проверять получившийся результат, не выходя из нулевого блока. Перед тестированием результата не забывайте сохранять изменения в нулевом блоке и обновлять страницу предпросмотра.
Как добавить картинку в тильде на 2 блока?
Нужно сделать вот так 
Чтобы сноубордист вылазил за границы первого блока
Но тильда обрезает блок по заданной высоте и получается вот так. 
Можно увеличить высоту блока, но фон тоже ростягивается.
Как вариант придумал добавить в картинке фоновой белую область снизу, но вдруг есть решение чтобы разместить одну картинку на 2 блока.
Блоки Тильды
Блок настроек позволяет контролировать внешний вид всего информационного блока.
Основные настройки блока — это цвет его фона, размер отступов, все, что связано со шрифтом (размер, цвет, насыщенность), анимации, также небольшие возможности по SEO, например, Вы можете выбрать тег заголовка для того, чтобы поисковые системы лучше определяли Ваш сайт.
Также важной настройкой является возможность контроля кнопок. Для кнопки Вы можете не только указать ссылку, но еще и настроить ее внешний вид, в том числе и эффекты при наведении.
Для большинства блоков доступен выбор ширины этого блока. Вы можете выбрать ширину как 12 колонок, так и меньше, кроме того, можно использовать всю ширину экрана, 100%.
Когда Вы собираете сайт из блоков, Вы можете менять их порядок, включать и отключать их, а также настраивать отображение различных блоков для различных экранов устройств. Например, Вы можете сделать две версии одного и того же блока с различной информацией. При этом один блок показывать только на компьютерах, другой блок показывать только на смартфонах.
Также Тильда позволяет настроить анимацию появления информации в блоках. К сожалению, это функция недоступна на мобильных устройствах.
В Тильде доступны порядка 500 готовых блоков, которые разбиты на различные категории.
Первая категория — это обложки. С обложек начинается большинство сайтов. Она может включить в себя фоновое изображение, видео, заголовок, подзаголовок, описание, кнопки и стрелку.
Некоторые обложки обладают функционалом, например, формой записи, слайдером или таймером.
Также нам доступен тип блоков «О проекте«. Это текстовый блок, иногда сопровождающийся ссылкой. Есть блоки с иконками социальных сетей, боки с изображениями, блок с картинкой, с большим текстом, блоки с различными вариациями в них текстов и галерей, нестандартные блоки. То есть можно выбрать блок на любой вкус.
Важной частью процесса создания сайта является структурирование его на логически значимые блоки. Это можно сделать в том числе с помощью заголовков. Блоки различных видов заголовком доступны в Тильде. Это заголовки с подзаголовком и текстом различных размеров, заголовок с выравниванием по левой стороне, заголовки с центральным выравниванием.
Также нам доступны текстовые блоки. В текстовых блоках можно использовать любой текстовый контент со ссылками, внутренними заголовками. Если необходимо сделать большие заголовки или привязать их к определенным ссылкам в меню, то лучше использовать блоки заголовки из соответствующей категории. В Тильде доступны текстовые блоки с фоном, с фоном на подложке, раскрывающиеся списки, поле с кодом, лог с предупреждением, текст с иконкой.
Следующая категория блоков Тильды — это «Изображение«. Изображения на сайте играют важную роль, так как создают настроение сайта и формируют его образ. Можно использовать как обычное изображение, так и полноэкранное. Есть различные вариации наложения текста на изображение.
В Тильде доступен большой выбор галерей. Это может быть галерея-слайдер, которая листается слева направо и наоборот, два или три изображения рядом, различные комбинации из изображений, любое количество изображений в одну строку, последовательность слайдов или видео. То есть Вы можете сделать так, что изображения и/или видео будут менять друг друга по-очереди. Можно сделать полноэкранную комбинацию из изображений, всплывающую галерею, которая будет раскрываться по клику на кнопку или на другое изображение. Также имеется полноэкранный слайдер и различные галереи-сетки.
Блок типа «Цитата» поможет выделить Вам цитату, также заголовок или любую важную мысль Вашего сайта.
Один из самых используемых блоков Тильды — это блок Преимуществ. В Тильде предоставлен большой их выбор. Есть как вертикальные списки преимуществ с галочками и другими иконками, так и горизонтальные. В каждом из блоков Вы можете указывать любое количество элементов и управлять их количеством в одной строке. Вы можете использовать встроенные в Тильду иконки, а также иконки с других ресурсов. Здесь доступны также блоки с изображениями и кнопками, с изображениями и списками, есть интерактивный блок, в котором появляются процентные показатели, а также блоки, в которых преимущества располагаются на фоне. В качестве фона в том числе можно использовать видео.
Блок колонок позволит Вам структурировать информацию по вертикальным колонкам. Это могут быть две колонки, две колонки с заголовком, три, четыре, а также блоки с изображением и колонкой текста. Некоторые блоки являются полноэкранными. Также доступен слайдер с текстом и изображением. Кроме того, Вы найдете здесь таблицу.
Для визуального структурирования информации Вы может применять также блоки категории «Разделители«. Это могут быть линии, черточки, различные иконки, цифры. Также есть интересные блоки, которые меняют цвет текста и фона по мере скроллинга сайта. И блоки, которые разделяют сайт фигурными границами.
Конечно, на каждом сайте Вы можете добавить меню для навигации по сайту. В Тильде имеется большое количество блоков меню, на любой вкус. Можно использовать просто логотип, просто меню, меню с логотипом, а также различные их комбинации. В меню Вы можете добавлять иконки для переключения языка, иконки социальных сетей, контакты, адрес, кнопки, описания. Также меню Вы можете комбинировать, например, использовать выпадающие списки, делать меню-бургер, когда все меню сворачивается в иконку с тремя полосочками. Кроме того, Вам доступно меню в виде переключения блоков на странице. Блок хлебных крошек поможет понять пользователю, где он находится на сайте.
Блок списка страниц поможет Вам сделать блог на сайте или раздел новостей. Он сформируется из других страниц, которые есть на сайте. Он представлен в нескольких видах.
Блок «Плитка и ссылки» помогает Вам структурировать информацию на одной странице, а также показывать ее при наведении на какую-нибудь картинку. Доступны различные варианты. Здесь Вы можете анонсировать какие-то свои продукты, делать переходы на другие страницы, разбивать информацию на колонки.
Блок «Подвал» используется для того, чтобы сделать нижнюю часть сайта, которая присутствует на всех страницах. В ней Вы можете указать контакты, ссылки на социальные сети, добавить кнопки для связи с Вами, указать адрес.
/>
Блок «Видео» позволяет Вам вставлять на сайт видео с Youtube и Vimeo. Это может быть одно видео, либо кнопка, которая откроет видео во всплывающем окне. Также Вы можете вставлять любое HTML5 видео путем указания ссылки на него. При этом видео Вам придется заливать на отдельный хостинг. Некоторые видео могут располагаться в две колонки. Также Вам доступна возможность расположения теста и видео рядом, видео во всплывающем окне и видео на обложке сайта. Недавно в Тильде появилась возможность размещения на сайте Youtube-трансляции с комментариями.
Одним из часто используемых элементов на сайте являются кнопки. В Тильде доступен большой выбор кнопок и различных форм. Это могут быть просто кнопки, блок из двух или трех кнопок, формы подписки, формы приема данных как горизонтальные так и вертикальные, блок с анонсом и кнопкой. Также в Тильде имеется выбор из нескольких всплывающих форм. Это может быть форма подписки, форма с большим количеством полей, например, анкета или форма регистрации, или просто всплывающая информация с изображениями, текстом и кнопками «Поделиться» в социальные сети. Кроме того, есть возможность интегрировать формы с сервиса Typeform и зафиксировать ссылку на форму в верхнем углу. Также есть интересный блок, который позволяет скрывать часть контента на сайте до нажатия кнопки. После нажатия на кнопку текст не изменится и блок раскроется. Если Вы на сайте размещаете ссылки на мобильные приложения, в Тильде есть для этого специальный блок с ссылками. Если Вам требуется сделать ссылку на скачиваемый файл, Вы можете также использовать специальные кнопки, в том числе с указанием формата файла. В Тильде также доступны кнопки для быстрой связи пользователей сайта с Вами. На компьютере эти кнопки вызывают специальные формы, например, форму для заказа обратного звонка или форму сообщения, а на мобильном телефоне они автоматически запускают звонок на Ваш номер. В Тильде есть возможность также реализовать различные голосования. Это могут быть пошаговые формы или простой тест.
Также на Тильде доступен блок приема платежей через различные платежные системы.
Если Вы на Тильде хотите реализовать Интернет-магазин, Вам поможет блок «Интернет-магазин». В нем доступны корзина, прием платежей, различные вариации каталога и отдельных товаров, например, блок с изображениями или блок одного товара с кнопкой. В каждом из блоков Вы можете указывать старую и новую цены, какие-то акционные лейблы, несколько изображений и информацию о товаре. Есть также блоки товаров во всплывающем окне.
Блоки категории «Команда» позволят Вам показать на сайте свою команду. Также они представлены в нескольких видах. Есть горизонтальные списки, вертикальные списки, блоки во всю ширину сайта.
Важным блоком для любой посадочной страницы является блок с отзывами. Каждый отзыв вызывает у пользователя доверие и помогает в принятии решения о покупке товара или услуги. В Тильде есть большой выбор различных видов отзывов. Это могут быть слайдеры, списки отзывов горизонтальные и вертикальные в несколько колонок, также отзывы на фоне.
Если Вы делаете сайт для какого-либо мероприятия или у Вас есть спортивный центр, Вы можете добавить на сайт расписание. Оно также доступно в нескольких видах.
Чтобы показать на сайте различные этапы производства или оказания услуги, Вы можете использовать блок «Этапы«. Он позволяет добавлять Вам несколько шагов для достижения цели. Если Вы используете больше четырех этапов, то лучше использовать вертикальные блоки этапов, если до четырех — то горизонтальные. Также Вы можете использовать иконки, цифры или просто буллеты.
В Тильде доступен большой выбор блоков контактов. В них Вы можете указать любой текст, не только контакты, также ссылки на социальные сети, карты Вашего местоположения из Яндекса или Google, а также форму связи.
Блоки категории «Услуги» позволит рассказать Вам, чем занимается компания. Это могут быть тексты с заголовками и изображениями, тексты с иконками, доступные в различных видах, а также раскрывающиеся блоки, которые показывают информацию при наведении на них.
В Тильде есть блоки, с помощью которых можно указать ссылки на социальные сети, а также выводить информацию из них, например, это могут быть виджеты Фейсбука и Вконтакте, а также лента фотографий из Инстаграма. Для того, чтобы пользователи могли поделиться ссылкой на Ваш сайт в социальных сетях, Вы можете использовать соответствующие блоки. Также Вы можете выводить комментарии из Фейсбука и Вконтакте.
Для того чтобы показать цены на сайте, Вы можете использовать блок «Тарифы«. В данной категории доступен большой выбор блоков, например, блоки в две колонки, три колонки, чтобы сравнить разные тарифы между собой, блоки тарифов с картинками, иконками, блоки с таблицами, где Вы можете использовать как иконки, например, плюс или минус, так и цифры и слова.
Чтобы показать список партнеров или клиентов компании, Вы можете использовать блоки категории «Партнеры«. Это может быть список иконок, к каждой из которых Вы можете добавить ссылку на сайт партнера или ссылку на страницу своего сайта, а также Вы можете использовать слайдеры из нескольких блоков и вертикальные списки.
/>
Также Вам доступны блоки категории «Другое«, которые помогут Вам реализовать различные дополнительные возможности Тильды, которые позволяют сделать сайт более живым, интересным и более функциональным.
Например, блок «html» позволит Вам добавить на сайт любой внешний виджет. При этом Вы его можете использовать как непосредственно на странице, так и во всплывающем окне.
Блок «Якорная ссылка» позволит Вам сделать якорные ссылки внутри сайта.
Блок «Плавный скролл» позволяет применить красивый эффект плавного скролла до нужного места на сайте.
В любом месте Вы можете также вставить карту Google или Яндекс, добавить на ссылка всплывающие подсказки, например, когда Вам нужно пояснить какое-то слово. Популярным сейчас эффектом является ползунок, показывающий процесс скроллинга страницы, меняющий свои размеры в зависимости от скроллинга.
Также Вы можете показать эффект загрузки страницы.
Вы можете создавать эффект печатной машинки.
Также есть возможность установить фиксированный фон.
Также Вам доступны блоки с различными триггерами, например, поп-ап, появляющийся при закрытии вкладки сайта, или появляющийся через некоторое время после загрузки сайта.
Имеются различные блоки для уведомления пользователей сайта о сборе персональных данных и куки, предупреждений о возрастном ограничении, а также переадресовать страницу на другую ссылку.
Ближе к Новому году можно использовать блок, который добавит снег на Ваш сайт.
Alias блок является очень важным блоком, потому что он позволяет использовать один и тот же блок в разных места одной страницы или на разных страницах без необходимости дублировать этот блок вновь и вновь. В таком случае информацию этого блока можно менять лишь в одном месте, в остальных местах информация изменится автоматически. Также доступны различные виджеты. Можно добавить поиск по сайту, в том числе через виджет Google.
И, наконец, одним из самых важных блоков Тильды является ZERO блок, которому посвящена отдельная статья на блоге. Он позволяет создавать блоки с нестандартным дизайном, анимациями, эффектами, формами. Фантазии по дизайну в данном блоке не ограничены ничем.
В этой статье:
Группировка элементов в Zero Block на тильде
Я очень давно ждал этой функции и они её сделали. Наконец то появилось группировка элементов в нулевом блоке (Zero Block). Сейчас расскажу как этим пользоваться и почему я это так должно ждал.
Первое, это инструкция. Заходим в свой нулевой блок. Выделяем нужные элементы и нажимаем кнопку «Group» в разделе настроек для элементов.
Либо вторым способом, выделяете нужное элементы, клюкаете правой кнопкой мыши на один из выделенных, откроется меню, там тоже есть кнопка группироваки.