Обзор компонентов - помощь Webflow

Используйте компоненты для более эффективного управления повторяющимися макетами и контентом на вашем сайте.

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

Как создать компонент

Вы можете создавать компоненты визуально в Webflow или импортировать существующие компоненты из внешней кодовой базы с помощью DevLink. Этот раздел сосредоточен на визуальной разработке.

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

• Идентичный контент и дизайн для каждого экземпляра — создайте компонент для повторяющихся макетов (например, навигационные панели и нижние колонтитулы) для повторного использования на вашем сайте. Любые изменения в контенте или дизайне автоматически обновляют каждый экземпляр компонента.
• Уникальный контент для каждого экземпляра — создайте компонент с согласованным макетом и дизайном, но позвольте каждому экземпляру иметь разный контент (например, макет секции героя, который может иметь уникальный текст, изображения или видео для каждого экземпляра) с использованием свойств и слотов компонента.
• Различные стили для каждого экземпляра — создайте компонент с предопределенными вариантами стиля и макета (например, кнопки с заливкой и контуром, или горизонтальные и вертикальные макеты карточек). Варианты стиля компонента позволяют настраивать дизайн каждого экземпляра без необходимости создавать отдельные компоненты.

Чтобы создать компонент:

1. Выберите элемент, который хотите превратить в компонент
2. Откройте панель компонентов, панель стилей или панель настроек элемента
3. Нажмите на значок “создать компонент” в верхней части панели
4. Дайте вашему компоненту имя и, при необходимости, описание, затем нажмите Создать

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

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

• Дважды щелкнув по экземпляру компонента
• Щелкнув правой кнопкой мыши по экземпляру и выбрав Редактировать компонент
• Выбрав экземпляр и нажав на значок "карандаш" в метке
• Выбрав экземпляр и нажав на значок "гаечный ключ" в правом верхнем углу правой панели

Узнайте больше о редактировании основного компонента.

Как использовать и повторно использовать компонент

После создания компонента вы можете использовать его повторно в любом месте вашего сайта:

1. Откройте панель компонентов
2. Наведите курсор на компонент, чтобы просмотреть его предварительный просмотр
3. Щелкните и перетащите нужный компонент на любую страницу вашего сайта
4. Перетащите экземпляр компонента прямо на холст или в Навигатор

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

Чтобы просмотреть иерархию элементов компонента в панели Навигатора, удерживайте Option + двойной щелчок (на Mac) или удерживайте Alt + двойной щелчок (на Windows) по компоненту, или нажмите на значок "редактировать основной компонент". Вы сможете увидеть иерархию элементов компонента только из основного компонента (не в экземпляре компонента).

Как редактировать компонент

Давайте рассмотрим различные способы взаимодействия и редактирования компонента:

• Редактирование основного компонента
• Свойства компонента, слоты и варианты стилей
• Создание вариантов стилей компонента
• Управление свойством варианта
• Изменение варианта экземпляра компонента
• Изменение порядка, переименование, дублирование или удаление вариантов стилей компонента
• Выход из основного компонента
• Редактирование компонентов в редакторе
• Изменение имени или описания компонента
• Группировка компонентов
• Удаление компонента

Редактирование основного компонента

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

• Дважды щелкните экземпляр компонента на холсте
• Удерживайте Option + дважды щелкните (Mac) или Alt + дважды щелкните (Windows) экземпляр в навигаторе
• Щелкните правой кнопкой мыши по экземпляру и выберите Редактировать компонент
• Выберите экземпляр и нажмите на значок «редактировать компонент» в метке
• Выберите экземпляр и нажмите на значок «редактировать компонент» в верхней части правой панели

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

Свойства компонента, слоты и варианты стилей

Свойства компонента (props), слоты и варианты стилей позволяют создавать уникальные конфигурации для каждого экземпляра компонента:

• Свойства (Props) — соединяют настройки отдельных элементов в основном компоненте (например, текст, ссылки, изображения или видео) с props. Это позволяет настраивать эти настройки в каждом экземпляре без изменения общей структуры или дизайна компонента. Свойства также могут быть связаны с полями CMS для динамического извлечения контента из ваших коллекций CMS.
• Слоты — слоты — это элементы, которые вы можете разместить в существующих компонентах, действующие как заполнители для других компонентов. Это позволяет строить компоненты модульно, где каждый экземпляр может включать разные компоненты в слоте.
• Варианты стилей — определяют несколько вариантов дизайна для одного компонента, позволяя адаптировать его внешний вид для различных случаев использования. Например, вы можете предложить варианты стилей, такие как сплошные или контурные кнопки, или горизонтальные и вертикальные макеты карточек.

Создание вариантов стилей компонента

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

Чтобы создать вариант стиля компонента:

1. Отредактируйте основной компонент
2. Перейдите в Панель стилей
3. Нажмите на значок “варианты компонента” в Выборе стиля
4. Нажмите на значок “плюс”
5. Дайте варианту уникальное имя
6. Нажмите Enter/Return для подтверждения

Управление свойством варианта

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

Чтобы изменить имя свойства варианта:

1. Отредактируйте основной компонент
2. Перейдите в Панель свойств
3. Нажмите на свойство Вариант
4. Введите уникальное имя свойства
5. Нажмите Enter/Return для подтверждения

Чтобы добавить свойство варианта в группу свойств:

1. Отредактируйте основной компонент
2. Перейдите в Панель свойств
3. Нажмите на свойство Вариант
4. Выберите группу или введите уникальное имя для создания новой группы
5. Нажмите Создать или Enter/Return для подтверждения

Установить вариант по умолчанию для компонента:

1. Отредактируйте основной компонент
2. Перейдите в Панель свойств
3. Нажмите на свойство Вариант
4. Выберите вариант из выпадающего списка По умолчанию

Изменение варианта экземпляра компонента

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

1. Одинарным щелчком выберите компонент, чтобы открыть Панель свойств
2. Выберите вариант для этого экземпляра из выпадающего списка Варианты

Изменение порядка, переименование, дублирование или удаление стилей компонентов

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

Чтобы изменить порядок вариантов компонента:

1. Редактируйте основной компонент
2. Перейдите в Панель стилей
3. Нажмите на значок “варианты компонентов” в Выборе стиля
4. Перетащите вариант, чтобы переместить его на новое место

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

1. Редактируйте основной компонент
2. Перейдите в Панель стилей
3. Нажмите на значок “варианты компонентов” в Выборе стиля
4. Наведите курсор на вариант и нажмите на значок “дополнительные параметры”
5. Нажмите Переименовать
6. Введите новое, уникальное имя варианта
7. Нажмите Enter/Return для подтверждения

Чтобы дублировать вариант:

1. Редактируйте основной компонент
2. Перейдите в Панель стилей
3. Нажмите на значок “варианты компонентов” в Выборе стиля
4. Наведите курсор на вариант и нажмите на значок “дополнительные параметры”
5. Нажмите Дублировать
6. Введите новое, уникальное имя варианта
7. Нажмите Enter/Return для подтверждения

Чтобы удалить вариант:

1. Редактируйте основной компонент
2. Перейдите в Панель стилей
3. Нажмите на значок “варианты компонентов” в Выборе стиля
4. Наведите курсор на вариант и нажмите на значок “дополнительные параметры”
5. Нажмите Удалить
6. Нажмите Удалить в всплывающем окне для подтверждения

Выход из основного компонента

После завершения редактирования основного компонента вы можете выйти из него, сделав следующее:

• Нажмите стрелку “назад” в верхнем левом углу Дизайнера
• Щелкните за пределами компонента на холсте
• Нажмите Escape на клавиатуре

Редактирование компонентов в редакторе

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

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

Изменение имени или описания компонента

Чтобы изменить имя или описание компонента:

1. Откройте панель компонентов
2. Наведите курсор на имя компонента и нажмите на появившиеся точки "дополнительные параметры"
3. Нажмите Изменить настройки
4. Внесите изменения и сохраните

Переименование экземпляра компонента

Вы можете переименовать отдельные экземпляры компонентов, чтобы их было легче идентифицировать — это особенно полезно при повторном использовании одного и того же компонента несколько раз на странице.

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

• В навигаторе или в верхней части правой панели:

1. Дважды щелкните имя компонента
2. Введите новое имя
3. Нажмите Enter или кликните в сторону, чтобы сохранить ваше пользовательское имя

• На холсте:

1. Щелкните правой кнопкой мыши по экземпляру компонента
2. Нажмите Переименовать
3. Введите новое имя
4. Нажмите Enter или кликните в сторону, чтобы сохранить ваше пользовательское имя

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

Группировка компонентов

Чтобы организовать ваши компоненты в группы:

1. Откройте панель компонентов
2. Наведите курсор на имя компонента и нажмите на появившиеся точки "дополнительные параметры"
3. Выберите Изменить настройки
4. Выберите существующую группу из выпадающего списка Группа или введите, чтобы создать новую группу

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

Удаление компонента

Чтобы полностью удалить компонент:

1. Удалите или отвяжите все экземпляры компонента с вашего сайта
2. Откройте панель компонентов
3. Наведите курсор на имя компонента и нажмите на многоточие "дополнительные параметры"
4. Выберите Редактировать настройки
5. Нажмите Удалить и подтвердите

Как отвязать экземпляр компонента от основного компонента

Чтобы отвязать экземпляр компонента и внести в него изменения независимо от основного компонента:

1. Щелкните правой кнопкой мыши любой элемент компонента в экземпляре, который вы хотите отвязать
2. Нажмите Отвязать экземпляр

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

Общий доступ к компонентам на разных сайтах с помощью библиотек

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

Назад к помощи webflow