Карточки/Пункты

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

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

• Цвет фона карточек

• Цвет обводки карточек

• Изображение для всех карточек

• Толщина обводки

• Форма

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

Пункты меню:

Пункты подвала:

Элементы раскрывающихся списков («аккордеон»):

Карточки с текстом или изображениями.

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

Цвет фона карточек можно выбрать в выпадающем списке из оттенков черного и белого (ЧБ), а также из светлых и темных оттенков всех акцентных цветов.

Выбранное значение отображается в поле выбора цвета фона.

Пример блока с цветом фона для всех карточек «Синий светлый 10».

Чтобы настроить цвет фона для каждой карточки отдельно, нажмите на поле нужной карточки. Она раскроется и появятся поля для ввода контента и выбора настроек отдельной карточки.

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

Карточка раскрыта.

Цвет фона выбранной карточки настроен.

Пример блока с настроенным цветом фона отдельной карточки.

Цвет обводки карточек можно настроить для всех карточек одновременно или для каждой по отдельности.

Цвет обводки карточек можно выбрать в выпадающем списке из оттенков черного и белого (ЧБ), а также из светлых и темных оттенков всех акцентных цветов.

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

Пример блока с цветом обводки для всех карточек «Фиолетовый светлый 80».

Чтобы настроить цвет обводки для каждой карточки отдельно, нажмите на поле нужной карточки. Она раскроется и появятся поля для ввода контента и выбора настроек отдельной карточки.

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

Цвет обводки выбранной карточки настроен.

Пример блока с настроенным цветом обводки отдельной карточки.

Толщину обводки карточек можно настроить только для всех карточек одновременно с помощью поля ввода толщины обводки. Доступные значения толщины: от 0 до 4 пикселей.

Введите нужное числовое значение в поле с помощью клавиатуры или с помощью мыши нажмите на кнопку «+» или «-».

Пример блока с толщиной обводки карточек 0 пикселей.

Пример блока с толщиной обводки карточек 4 пикселя.

В некоторых блоках можно загрузить изображение на фон карточек. Изображение можно загрузить на фон всех карточек сразу или для каждой карточки отдельно.

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

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

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

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

Пример блока с выбранной формой карточек — Прямая.

Пример блока с выбранной формой карточек — Скругленная.

Пример блока с выбранной формой карточек — Круглая.

Нажмите кнопку «Добавить карточку» в боковом всплывающем окне настроек блока.

Появится новая карточка с полями для ввода контента и настроек этой карточки.

Заполните необходимые поля. Нажмите «Сохранить».

Карточка появится среди других элементов блока.

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

Карточка перемещена на самый верх.

Карточка перемещена на самый верх (блок).

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

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

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

Под выбранной карточкой появится ее полная копия.

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

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

В данном примере:

• Табы — первый уровень

• Пункты меню — второй уровень

• Подпункты — третий уровень

Третий уровень вложен во второй, а второй в первый.

В боковом всплывающем окне настроек блока вложенные карточки выглядят как карточки внутри карточек. Чтобы увидеть карточки второго уровня, раскройте карточку первого уровня, нажав на нее.

После нажатия на карточку первого уровня вы увидите поля для ввода контента и настройки этой карточки, а также все ее вложенные карточки второго уровня.

Чтобы увидеть карточки третьего уровня, раскройте карточку второго уровня, нажав на нее. После нажатия на карточку второго уровня вы увидите поля для ввода контента и настройки этой карточки, а также все ее вложенные карточки третьего уровня.

Чтобы увидеть поля ввода и настройки карточки третьего уровня, нажмите на нее. После нажатия карточка раскроется.

Карточки одного уровня соединены пунктирной линией.