ОБЗОР ФУНКЦИЙ

Обзор новых динамических секций

Сетка ∙ Плитка 

ОБЗОР ФУНКЦИЙ

Обзор новых динамических секций

Обзор новых 
динамических секций
Сетка ∙ Плитка
Сетка ∙ Плитка
Мы продолжаем создавать динамические секции, с которыми удобно работать, как в ПК, так и в мобильной версии.

Сегодня мы познакомим вас с новыми секциями — Сетка (лейауты) и Плитка. Данные секции уже адаптированы для мобильных устройств и удобно редактируются.

Новые секции доступны в разделе Динамические — Новинки (beta).

Секция Сетка

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

Готовую карточку можно клонировать, чтобы лишний раз не повторять одни и те же действия:

Лишние карточки остаётся просто удалить:

Вы всегда можете изменить порядок, потянув за три полоски слева в списке карточек:

В слотах сверху и снизу можно размещать любые блоки:

При желании можно скрыть верхний и нижний слоты в разделе Структура — шапка и подвал секции:

Останется только настроить внешний вид секции и карточек:

Кстати, в настройках фона карточки можно использовать градиент:

По умолчанию в настройках секции включено приподнятие карточек при наведении, его можно отключить в настройках стилей карточки — Эффекты при наведении:

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

В секции Сетка может быть всё, что угодно: преимущества, отзывы, тарифы, этапы работы, галерея и много другое. Ограничения? Только ваша фантазия. ;)

Примеры использования сетки

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

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

Секция Плитка

Интересно оформлять сайт стало ещё удобнее! В такой секции карточки и картинки размещаются в шахматом порядке в ПК-версии, а в мобильной — происходит чередование: картинка-карточка-картинка-карточка. Как выглядит такая секция на ПК и мобильных:

Ранее необходимо было создавать отдельную секцию только для мобильных, т.к. при размещении элементов в шахматном порядке в ПК-версии, на мобильных был порядок: картинка-текст-текст-картинка. Пример:

Теперь можно обойтись без копии секции для мобильных и собирать ваш сайт ещё быстрее!

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

Как поменять картинку? Откройте настройки секции, раздел Контент, кликните на 3 точки рядом с нужной карточкой, в открывшемся окне нажмите "Загрузить", чтобы выбрать изображение и выберите подходящую позицию:

Вы можете поменять пропорцию картинок, если они занимают слишком много места в разделе Дизайн — Картинка:

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

Затем можно сделать секцию чуть поинтереснее, поиграв с настройками дизайна:

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

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

Как добавить секции?

Новые секции открыты в раннем доступе и находятся в категории «Новинки (beta)». 

Вот так просто можно работать с динамическими секциями mottor :)

Динамические секции
Обычные секции