Карточки

Блоки раздела библиотеки «Карточки» — это блоки, с помощью которых можно разместить изображения и текстовую информацию в одинаковых карточках.

Далее будут описаны уникальные настройки блоков этого раздела библиотеки, информация о которых отсутствует на страницах раздела «Общие и повторяющиеся».

У блока «Карточки: пункты с буллитом» есть возможность настроить количество столбцов с карточками: 1, 2, 3 или 4 столбца. В зависимости от выбранного значения, меняется расположение карточек.

Количество столбцов с карточками — 4.

Количество столбцов с карточками — 3.

Количество столбцов с карточками — 2.

Количество столбцов с карточками — 1.

Также, у блока «Карточки: пункты с буллитом» есть возможность настроить цвет буллетов.

*Буллет — это иконка в виде кружка в левом верхнем углу карточек.

Цвет буллета по умолчанию — Черный.

Цвет буллета изменен — Синий светлый 70.

Как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» в разделе «Общие и повторяющиеся настройки».

У блока «Карточки: с обводкой» отсутствует уникальное поведение и функционал в рамках данного раздела. Обо всех настройках, а также о том, как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» или в разделе «Общие и повторяющиеся настройки».

У блока «Карточки: с обводкой» отсутствует уникальное поведение и функционал в рамках раздела. Обо всех настройках, а также о том, как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» или в разделе «Общие и повторяющиеся настройки».

У блока «Карточки: пункты с буллитом» есть иконка, у которой можно настроить размер, форму и расположение.

Размер иконки — L.

Размер иконки — XXS.

Форма иконки — Прямая.

Форма иконки — Скругленная.

Форма иконки — Круглая.

Расположение иконки — Слева.

Расположение иконки — Сверху.

У блока «Карточки: пункты с иконкой» есть те же настройки иконки, что и у блока «Карточки: пункты с иконками по центру».

Обо всех остальных настройках, а также о том, как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» или в разделе «Общие и повторяющиеся настройки».

У блока «Карточки: с разделителем» можно настроить цвета разделителя.

Цвет разделителя по умолчанию — Черный

Цвет разделителя изменен — Красный светлый 80.

Как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» в разделе «Общие и повторяющиеся настройки».

У блока «Карточки: с иконкой» можно настраивать ширину карточек и отступ от первой колонки. Как настроить ширину карточек и отступ от первой колонки вы можете прочитать на странице «Основные настройки» в разделе «Общие и повторяющиеся настройки».

В остальном, у блока «Карточки: с иконкой» отсутствует уникальное поведение и функционал в рамках данного раздела. Обо всех настройках, а также о том, как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» или в разделе «Общие и повторяющиеся настройки».

У блока «Карточки: персоны в горизонтальных карточках» есть возможность настроить размер карточек: XS, S и M. В зависимости от выбранного значения, меняется расположение карточек и размер изображения.

Размер карточек — M.

Размер карточек — S.

Размер карточек — XS.

Также, можно настроить форму изображения.

Форма изображений — Прямая.

Форма изображений — Скругленная.

Форма изображений — Круглая.

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

Тип изображений — Без обводки.

Тип изображений — С обводкой.

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

У блока «Карточки: персоны в вертикальных карточках» есть те же настройки изображений и размера карточек, что и у блока «Карточки: персоны в горизонтальных карточках». Отличие состоит в том, что данный блок содержит вертикальные карточки.

Обо всех остальных настройках, а также о том, как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» или в разделе «Общие и повторяющиеся настройки».

У блока «Карточки: с изображением и кнопками» можно настраивать кнопки. Как настроить кнопки вы можете прочитать на странице «Кнопки» в разделе «Общие и повторяющиеся настройки».

В остальном, у блока «Карточки: с иконкой» отсутствует уникальное поведение и функционал в рамках данного раздела. Обо всех настройках, а также о том, как создавать и настраивать карточки вы можете прочитать на странице «Карточки/Пункты» или в разделе «Общие и повторяющиеся настройки».

Блок «Карточки: с фильтрами и сортировкой» уникальный: он позволяет делать каталог карточек, который пользователь может отфильтровать или отсортировать по различным критериям. Также пользователь может выполнить поиск по карточкам и открыть больше карточек по кнопке «Ещё».

У блока «Карточки: с фильтрами и сортировкой» есть привычные настройки блоков с карточками, о которых вы можете прочитать на странице «Карточки/Пункты» или в разделе «Общие и повторяющиеся настройки». Ещё у карточек можно настраивать кнопки. Как настроить кнопки вы можете прочитать на странице «Кнопки».

Фильтры в карточках настраиваются в два шага — через разделы настроек блока «Фильтры» и «Карточки».

Общий принцип такой: создается группа фильтров в разделе «Фильтры», затем создаются фильтры в данную группу в отдельных карточках в разделе «Карточки».

Шаг 1 — настройка отображения фильтров через раздел «Фильтры». Здесь по аналогии с оформлением внешнего вида карточек задается внешний вид фильтров, а также создаются группы фильтров.

Важно: фильтры будут доступны только при включенном чекбоксе «Отображать фильтры».

Есть два вида фильтрации — «Боковая панель» и «Всплывающее окно»:

Если выбран вид фильтрации «Боковая панель», фильтры будут отображаться в виде панели сбоку:

Можно поменять расположение боковой панели в настройках:

Фон, форму и обводку боковой панели можно менять по аналогии с настройками «Карточек/Пунктов»:

Пример добавленного цвета фона и обводки боковой панели после сохранения:

Также в настройках фильтров можно выбрать вид фильтрации «Всплывающее окно»:

Если выбран вид фильтрации «Всплывающее окно», фильтры будут доступны по нажатию на появившуюся кнопку «Фильтры»:

По нажатию на кнопку «Фильтры» появляется всплывающее окно с теми же фильтрами, что и при виде фильтрации «Боковая панель»:

Настроить отображение всплывающего окна можно в разделе настроек блока «Всплывающее окно» — это общая настройка для всех видов фильтрации, так как на мобильных устройствах фильтры всегда скрываются в кнопку «Фильтры» с всплывающим окном.

Подробнее про настройку «Всплывающих окон» можете прочитать в соответствующем разделе.

У любого вида фильтрации есть настройки тегов — кнопок над карточками, которые появляются, когда пользователь выбирает какой-то фильтр или фильтры.

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

В настройках блока по аналогии с настройками кнопок можно настроить отображение тегов — их внешний вид:

Также можно выбрать расположение тегов — «Друг под другом» или «В ряд»:

Если выбрать расположение тегов «Друг под другом», при большом количестве активных тегов они будут отображаться друг под другом:

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

Также в разделе «Фильтры» создаются группы фильтров — категория, тип, цена и т. д. Это заголовки будущих фильтров, которые позже можно добавить в разделе настроек блока «Карточки».

У каждой группы фильтров можно поменять название и тип фильтра, а также добавить настройку «Скрывать фильтры после N параметров»:

Типов фильтра четыре: «Промежуток от - до», «Несколько значений», «Одно значение» и «Галочка». Рассмотрим каждый на примерах.

При выборе типа фильтра «Промежуток от - до» фильтрация данной группы будет выглядеть как ползунок в диапазоне указанных значений.

Обратите внимание, что диапазон автоматически сформируется после заполнения карточек на шаге 2.

При выборе типа фильтра «Несколько значений» фильтрация данной группы будет выглядеть как список чекбоксов.

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

При выборе типа фильтра «Одно значение» фильтрация данной группы будет выглядеть как список радио кнопок (кнопок, среди которых всегда активна только одна). По умолчанию всегда будет доступен и выбран фильтр «Все», то есть все созданные фильтры данной группы.

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

При выборе типа фильтра «Галочка» фильтрация данной группы будет выглядеть как единственный чекбокс с названием этой группы — карточка может либо соответствовать, либо не соответствовать этому фильтру (например, иметь свойство «Бесплатно» или «По скидке»).

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

Шаг 2 — настройка карточек и прикрепление к ним фильтров.

В шаге 1 создаются группы фильтров и настраивается их отображение через раздел «Фильтры», а в данном разделе можно создавать сами фильтры и прикреплять их к карточкам.

У карточек есть все базовые настройки: цвет фона, форма, цвет и толщина настройки. Подробнее об этих настройках читайте на странице «Карточки/Пункты».

Отдельно можно настроить вид карточек в мобильной версии: «Большая карточка», «Маленькая горизонтальная карточка» и «Маленькая вертикальная карточка».

«Большая карточка» в мобильной версии выглядит следующим образом:

«Маленькая горизонтальная карточка» в мобильной версии выглядит следующим образом:

«Маленькая вертикальная карточка» в мобильной версии выглядит следующим образом:

Рассмотрим настройки отдельной карточки. У отдельных карточек также есть базовые настройки, прочитать о которых можно в разделе «Карточки/Пункты»:

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

Уникальная настройка отдельных карточек — «Характеристики», то есть фильтры карточек. Они создаются для каждой карточки индивидуально и выбираются из групп, созданных на шаге 1 через раздел «Фильтры».

Рассмотрим каждую характеристику. Она состоит из двух элементов: группы фильтра и значения этого фильтра.

Важно: группы фильтров для всех карточек доступны одинаковые и выбираются из уже созданных в разделе «Фильтры», а значения фильтров могут отличаться или повторяться.

Пример создания нового фильтра в группу фильтров «Категория». Нажимаем «Добавить характеристику»:

У карточки появилась новая характеристика — фильтр:

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

Для этого нажмите «Выберите значения» и выберите «Категория»:

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

У типов фильтра «Одно значение» и «Несколько значений» поля ввода — текстовая строка, у типа «Промежуток от - до» — ввод числа, у «Галочки» — выбор между «Да» и «Нет» (в зависимости от того, относится ли ваша карточка к данной группе или нет, например, «Бесплатный» ли ваш курс).

Вспомните или проверьте в разделе «Фильтры», что группа фильтров «Категория» имеет тип фильтра «Одно значение». Можете ввести любую категорию — либо ту, которая уже есть в других карточках, либо новую.

Введите новую категорию, например «Высшая математика»:

После сохранения настроек новый фильтр отобразится в меню фильтров:

Важно, чтобы в каждой карточке были добавлены характеристики с каждой созданной группой фильтров — в данном примере это категория, тип курса, цена курса и галочка «Бесплатно» (да/нет). Это позволит сделать фильтрацию и сортировку максимально удобной и работающей.

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

Важно: чтобы функционал работал и были доступны его настройки, должны быть выбраны чекбоксы «Отображать сортировку» и «Отображать поиск»

В самом блоке поиск и сортировка выглядят следующим образом:

В данном разделе есть настройка «Адаптация под фон» — это предустановленный набор стилей цвета фона, текста и обводки, адаптированный под расположение элементов фильтрации, поиска и сортировки на светлом или на темном фоне.

Адаптация под фон может быть:

• «На светлом фоне» для расположения кнопок на светлом фоне.

• «На темном фоне» для расположения кнопок на темном фоне.

• «Тема сайта» означает, что значение адаптации зависит от выбранной цветовой темы в настройках сайта.

Настройка «Размер» отвечает за размер всех элементов фильтрации — самих фильтров, поиска и кнопки сортировки. Доступны три размера: S, M и L.

Отдельно у поля «Поиск» есть две настройки: форма и тип. Форма настраивается аналогично, как у карточек, а тип рассмотрим отдельно.

Тип поиска «С фоном» выглядит как залитое белым поле с обводкой:

Тип поиска «Без фона» выглядит аналогично, но без заливки:

Тип поиска «С линией» выглядит как линия снизу без заливки:

Также в настройках можно выбрать расположение фильтрации, поиска и сортировки:

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

На случай, если карточек у вас слишком много, есть кнопка ещё — она работает по аналогии с кнопкой «Показать ещё». По умолчанию эта кнопка выключена, чтобы добавить её, включите чекбокс:

После включения появляются настройки кнопки — как настроить большую часть из них, читайте на странице «Кнопки».

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

А название кнопки можно поменять в поле «Название»: