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

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

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

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

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

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

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

• Форма

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

Пункты меню:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Способ «Выбрать из библиотеки» позволяет добавить иконку из готовой библиотеки. Для этого нужно выбрать способ «Выбрать из библиотеки» и нажать на кнопку «Выбрать иконку».

После нажатия откроется всплывающее окно с библиотекой иконок.

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

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

Выбрав иконку, нужно нажать кнопку «Сохранить». Далее иконка добавится в карточку.

Способ «Загрузить свой файл» позволяет загрузить собственную иконку. Для этого нужно выбрать способ «Загрузить свой файл» и нажать кнопку «Загрузите файл».

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

Для загруженной иконки доступен редактор изображений.

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

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

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

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

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

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

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

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

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

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

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

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

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

Карточка станет неактивной и ее название изменится на «Скрытый элемент». После сохранения изменений карточки перестанет отображаться в блоке.

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

После сохранения изменений, карточка вновь появится в блоке.

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

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

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

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

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

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

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

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

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

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

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

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