Поделиться через

Создание и настройка галереи карточек в Power Pages

  • Статья

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

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

  1. Откройте студию дизайна для редактирования содержимого и компонентов сайта.

    Совет

    Вы также можете добавить галерею карточек с помощью кода.

  2. Перейдите в рабочую область Страницы.

  3. Выберите страницу, которую нужно изменить.

  4. Выберите раздел, в который хотите добавить галерею карточек.

  5. Наведите указатель мыши на любую редактируемую область холста, затем выберите значок Галерея карточек на панели компонентов.

    Снимок экрана компонента «Галерея карточек» с кнопкой «Дизайн галереи карточек», отображаемой в верхнем левом углу.

Выберите макет

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

Снимок экрана с вариантами оформления галереи карточек в студии дизайна. Кнопка дизайна галереи карточек, расположенная в верхнем левом углу компонента, выделена, а параметры дизайна отображаются в окне перед компонентом.

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

Настройте источник данных для вашей галереи карточек

Чтобы настроить источник данных для вашей галереи карточек:

  1. Нажмите кнопку Дизайн галереи карточек и выберите Данные.

    Снимок экрана с вариантами дизайна галереи карточек для «Данных» в студии дизайна.

  2. Выберите существующую таблицу из поля подстановки Источник данных.

  3. Выберите соответствующее представление в раскрывающемся списке Вид.

  4. Для каждого элемента галереи карточек (изображение, заголовок, описание, кнопка, текстовая гиперссылка) выберите параметр Выбрать данные, чтобы привязать его к столбцу представления.

    Заметка

    Для элементов кнопки и гиперссылки необходимо настроить две настройки: name и url. Обе конфигурации должны быть привязаны к столбцу представления.

Отключите переключатель рядом с любым элементом, который вы не хотите включать.

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

Поддерживаемые типы столбца

Каждый элемент поддерживает определенные типы данных.

Поддерживаемые типы столбца

Каждый элемент поддерживает определенные типы данных.

Элемент Типы данных
Title Текст (одна строка текста)
Номер телефона
Целое число
Decimal
Подстановка
Только дата
Дата и время
Описаниен Форматированный текст
Область текста (несколько строк текста)
Номер телефона
Целое число
Decimal
Только дата
Дата и время
Изображения Файл — изображение
Button Метка кнопки:
  • Текст (одна строка текста)
  • Фрагмент содержимого

URL-адрес кнопки:
  • URL
  • веб-страница
Текстовая гиперссылка Метка текстовой гиперссылки:
  • Текст (одна строка текста)
  • Фрагмент содержимого

URL-адрес текстовой гиперссылки:
  • URL
  • веб-страница
Произвольный текст Текст (одна строка текста)

Вы можете оформить свою галерею карточек, настроив свойства стиля на уровне галереи, карточки и элемента.

Фильтрация поиска

Включите или выключите переключатель Включить поиск, чтобы добавить или удалить фильтрацию поиска.

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

Заметка

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

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

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

{% codecomponent name:Pages.CardGallery %}

Чтобы добавить существующую галерею карточек, используйте тег Liquid и замените {your card gallery id} на идентификатор существующей галереи карточек:

{% codecomponent name:Pages.CardGallery id: '{your card gallery id}' %}