Редактор Studio: добавление и настройка репитеров

8 мин. чтения
Репитер - это список элементов с одинаковым дизайном и макетом, но разным содержимым. Это быстрый и простой способ отобразить контент, включая контент из CMS (системы управления контентом).
В редакторе Studio репитеры расположены в адаптивном гибком макете, поэтому каждый элемент отлично смотрится на экранах любого размера.
Посетите Академию Wix Studio, чтобы получить доступ к курсам, учебным пособиями и вебинарам о Wix Studio.
Содержание:

Добавление репитера

У нас есть множество готовых репитеров, которые вы можете добавить на сайт и настроить в соответствии с вашими потребностями. Некоторые репитеры предназначены для размещения изображений, а другие выступают в стиле «списка» с акцентом на текст. 
Добавив понравившийся репитер, приступайте к работе над контентом. Когда вы добавляете элемент в репитер, он автоматически добавляется к другим элементам в репитере, чтобы сохранить единообразие дизайна. При этом вы по-прежнему можете настроить отдельные элементы внутри каждого элемента (например, текст, фото).

Чтобы добавить репитер:

  1. Нажмите Добавить элементы  в левой части редактора.
  2. Нажмите Инструменты лейаута.
  3. Нажмите Репитеры.
  4. Перетащите репитер на страницу.
Совет:
Удаление элемента из одного элемента репитера удаляет его и из всех остальных элементов репитера.

Управление элементами репитера

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

Чтобы управлять элементами репитера:

  1. Выберите нужный репитер.
  2. Нажмите на значок Открыть инспектор  в правом верхнем углу редактора.
Скриншот открытия панели инспектора в редакторе Studio.
  1. (В Инспекторе) Нажмите Управлять рядом с количеством элементов.  
Скриншот верхней части панели Инспектора в редакторе Studio с нажатием кнопки Управлять для управления элементами репитера
  1. Выберите, как вы хотите управлять элементами репитера:
    • Создайте копию элемента: выберите элемент и нажмите Создать копию элемента внизу.
    • Удалите элемент: нажмите значок Другие действия рядом с элементом и нажмите Удалить.
    • Переименуйте элемент: нажмите значок Другие действия рядом с элементом и нажмите Переименовать.
      Совет: переименование одного элемента автоматически переименовывает другие элементы в репитере.
    • Измените порядок элементов: удерживайте значок изменения порядка  рядом с элементом и перетащите его в нужное место.
Скриншот панели в инспекторе, где вы управляете и изменяете порядок элементов.

Настройка дизайна репитера

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

Чтобы настроить дизайн репитера:

  1. Выберите элемент репитера.
  2. Нажмите на значок Открыть инспектор  в правом верхнем углу редактора.
Скриншот открытия панели инспектора в редакторе Studio.
  1. Используйте доступные параметры в разделе Дизайн, чтобы настроить репитер:
    • Измените цвет заливки и прозрачность всех элементов.
    • Добавьте границу и тень, чтобы выделить элементы.
    • Сделайте уголки элемента прямоугольными или круглыми. 
    • Добавьте интересный курсор, который будет появляться, когда посетители наводят его на репитер. 
Скриншот с параметрами дизайна в инспекторе после выбора репитера

Установка шаблона дизайна AB для элементов репитера

Разделите элементы репитера на 2 группы, чтобы создать более сложный дизайн. Шаблон AB позволяет создать две версии одного и того же дизайна, с разными стилями и анимациями.
Как только вы включите шаблон AB, элементы репитера разделятся на группы A и B. В редакторе вы сможете увидеть, какие элементы входят в каждую группу. При настройке параметров дизайна любого из А или B элементов другие элементы в группе автоматически меняются в соответствии с изменениями. 

Чтобы установить шаблон дизайна AB для элементов репитера:

  1. Выберите нужный репитер.
  2. Нажмите на значок Открыть инспектор  в правом верхнем углу редактора.
Скриншот открытия панели инспектора в редакторе Studio.
  1. Прокрутите вниз до раздела Лейаут.
  2. Активируйте переключатель Установить шаблон дизайна AB.
  3. Элементы дизайна A и B:
    1. Нажмите на элемент A или B в репитере.
      Совет: это может быть любой элемент из соответствующей группы.
    2. (В инспекторе) Выберите, как вы хотите настроить эту группу элементов:
      • Выберите пресет дизайна в разделе Дизайн.
      • Измените Цвет заливки и прозрачность элементов.
      • Добавьте анимацию во вкладке Эффекты (Примечание: для элементов репитера с шаблонами AB доступны только эффекты при наведении и клике). 
      • Примените собственный курсор из раздела Курсор.
    3. Повторите шаги a-b для остальных элементов группы.
Скриншот репитера с щаблоном AB, показывающий включенный переключатель

Изменение макета репитера

Настройте порядок элементов репитера при изменении размера экрана. В зависимости от выбранного типа отображения (например, карточки, список, слайдер, ячейки) вы можете настроить поля, выравнивание, направление и другие параметры. 
Работа с экранами разных размеров:
  • Вы можете настроить разные макеты репитера для разных размеров экрана.
  • Списки и слайдеры обычно используются на экранах меньшего размера, таких как планшеты и смартфоны.

Чтобы настроить макет репитера:

  1. Выберите нужный репитер.
  2. Нажмите на значок Открыть инспектор  в правом верхнем углу редактора.
Скриншот открытия панели инспектора в редакторе Studio.
  1. Прокрутите вниз до раздела Лейаут.
  2. Настройте макет репитера в соответствии с выбранным типом отображения:
Примечание об отступах:
Некоторые старые браузеры не поддерживают функцию CSS отступов (например, Chrome 76-83, Safari 12-14 и Edge 79-83). Это означает, что посетители, которые заходят на ваш сайт с помощью этих браузеров, не увидят отступов, которые вы устанавливаете между элементами репитера. 
Варианты лейаута, которые отображаются в инспекторе при выборе типа отображения карточек.

Была ли статья полезна?

|