Редактор Studio: добавление и настройка репитеров
8 мин.
Репитер — это список элементов с одинаковым дизайном и макетом, но разным контентом в каждом из них. Это быстрый и простой способ отображения контента, включая контент из CMS (системы управления контентом) сайта.
В Редакторе Studio репитеры организованы в адаптивный гибкий макет (flex layout), благодаря чему каждый элемент отлично выглядит на любом размере экрана.
Перейдите в Академию Wix Studio, чтобы посмотреть дополнительные вебинары, руководства и курсы по Wix Studio.
Добавление репитера
У нас есть множество готовых репитеров, которые вы можете добавить и настроить под свои задачи. Некоторые репитеры содержат изображения, другие больше напоминают список с акцентом на тексте.
После добавления подходящего репитера начните работу над контентом. Когда вы добавляете элемент в элемент репитера, он автоматически добавляется в остальные элементы, чтобы сохранить единообразие дизайна. При этом вы все равно можете настраивать отдельные элементы внутри каждого пункта (например, текст, изображения).
Чтобы добавить репитер:
- Нажмите Добавить элементы
слева в редакторе. - Нажмите Инструменты макета.
- Нажмите Репитеры.
- Перетащите репитер на страницу.
Совет:
Удаление элемента из одного элемента репитера приводит к его удалению из всех остальных элементов.
Управление элементами репитера
Вы можете легко создавать копии, переименовывать, изменять порядок и удалять элементы репитера в панели «Инспектор».
Чтобы управлять элементами репитера:
- Выберите нужный репитер.
- Нажмите на иконку Открыть Инспектор
в правом верхнем углу редактора.
- (В Инспекторе) Нажмите Управлять рядом с количеством элементов.
- Выберите способ управления элементами репитера:
- Создать копию элемента: выберите элемент, затем нажмите Создать копию внизу.
- Удалить элемент: нажмите иконку Другие действия
рядом с элементом, затем нажмите Удалить. - Переименовать элемент: нажмите иконку Другие действия рядом с элементом, затем нажмите Переименовать.
Совет: переименование одного элемента автоматически переименовывает остальные элементы в этом репитере. - Изменить порядок элементов: удерживайте иконку Изменить порядок
рядом с элементом и перетащите его на новое место.
Настройка дизайна репитера
Настройте дизайн репитера, чтобы он соответствовал сайту клиента. Вы можете изменить цвет фона элементов, добавить границы, тень или интересный курсор, который появляется при наведении на репитер.
Совет:
Сделайте репитер более привлекательным и заметным, добавив анимации. Вы также можете закрепить элементы репитера в верхней и/или нижней части экрана.
Чтобы настроить дизайн репитера:
- Выберите элемент репитера.
- Нажмите на иконку Открыть Инспектор в правом верхнем углу редактора.
- Используйте доступные параметры в разделе Дизайн, чтобы настроить репитер:
- Измените цвет заливки и прозрачность всех элементов.
- Добавьте границы и тень, чтобы выделить элементы.
- Сделайте углы элементов прямоугольными или скругленными.
- Добавьте стильный курсор, который будет появляться при наведении на репитер.
Установка шаблона дизайна AB для элементов репитера
Разделите элементы репитера на 2 группы, чтобы создать более сложный дизайн. Шаблон AB позволяет создавать две версии одного и того же дизайна с разными стилями и анимациями.
После включения паттерна AB элементы репитера разделяются на группы A и B. В редакторе видно, какие элементы относятся к каждой группе. При изменении дизайна любого из элементов A или B остальные элементы в группе меняются автоматически.
Чтобы установить шаблон дизайна AB для элементов репитера:
- Выберите нужный репитер.
- Нажмите на иконку Открыть Инспектор в правом верхнем углу редактора.
- Прокрутите вниз до раздела Макет.
- Включите переключатель Установить паттерн дизайна AB.
- Настройте дизайн элементов A и B:
- Нажмите на элемент A или B в репитере.
Совет: это может быть любой элемент из соответствующей группы. - (В Инспекторе) Выберите, как вы хотите настроить эту группу элементов:
- Выберите пресет дизайна в разделе Дизайн.
- Измените Цвет заливки и прозрачность элементов.
- Добавьте анимацию на вкладке Взаимодействия
(Примечание: для элементов репитера с паттернами AB доступны только взаимодействия при наведении и клике). - Примените кастомный курсор в разделе Курсор.
- Повторите шаги a-b для другой группы элементов.
- Нажмите на элемент A или B в репитере.
Изменение макета репитера
Установите, как элементы репитера перестраиваются при изменении размера экрана. В зависимости от выбранного типа отображения (например, Карточки, Список, Слайдер, Ячейки сетки), вы можете настроить поля, выравнивание, направление и другие параметры.
Работа с размерами экранов:
- Вы можете использовать разные макеты для репитера на каждом размере экрана.
- Списки и слайдеры часто используются на экранах меньшего размера, таких как планшеты и мобильные устройства.
Для дополнительной настройки макета репитера:
- Выберите нужный репитер.
- Нажмите на иконку Открыть Инспектор в правом верхнем углу редактора.
- Прокрутите вниз до раздела Макет.
- Настройте макет репитера в зависимости от выбранного типа отображения:
Карточки: параметры макета
Список: параметры макета
Слайдер: параметры макета
Ячейки сетки: параметры макета
Примечание об отступах:
Некоторые старые браузеры не поддерживают CSS-отступы (например, Chrome 76–83, Safari 12–14 и Edge 79–83). Это означает, что посетители, которые заходят на сайт из этих браузеров, не увидят отступы, установленные между элементами репитера.
Часто задаваемые вопросы
Нажмите на вопрос ниже, чтобы узнать подробнее.
Какие адаптивные режимы доступны для репитеров?
Какие элементы нельзя добавить в репитер?
Почему репитер отображается некорректно на смартфоне?