CMS: Добавление и подключение полей цвета
12 мин.
Улучшите дизайн сайта, добавив и подключив поля «Цвет» в коллекциях CMS (системы управления контентом). Поля «Цвет» позволяют динамично управлять цветами каждого пункта на сайте. Вы можете задать определенные цвета для каждого пункта коллекции, а затем использовать их в подключенных текстовых элементах, кнопках и фонах секций. В результате вы сможете обновлять цвета этих элементов прямо из коллекций, не редактируя каждый элемент вручную.
Представьте, что вы ведете интернет-магазин. Используя поле «Цвет», вы можете автоматически сопоставить цвет фона разделов товаров или цвет текста названий товаров с цветом, назначенным для каждой позиции.
Эта возможность особенно полезна для Wix Профи, которые хотят позволить владельцам сайта управлять цветами элементов без необходимости доступа к редактору.
Добавление поля типа «Цвет» в коллекцию
Перейдите в коллекцию CMS, чтобы добавить поле типа «Цвет», а затем определите цвета для каждой позиции. Вы можете создать несколько таких полей, если хотите использовать несколько цветов для каждой позиции. Например, можно создать одно поле «Цвет» для использования в качестве цвета фона раздела, а другое поле «Цвет» — для использования в качестве цвета текста.
Чтобы добавить поле типа «Цвет» в коллекцию:
- Перейдите в CMS в панели управления сайта. Либо вы можете нажать CMS
в редакторе, а затем нажать Ваши коллекции. - Нажмите на нужную коллекцию.
- Нажмите Управлять полями.
- Нажмите + Добавить поле.
- Выберите Цвет и нажмите Выбрать тип поля.
- Введите название в поле Название поля.
- (Только для кода) Обновите ID поля, используемый в коде сайта. Вы не сможете обновить этот ID позже.
- (Необязательно) Введите Текст подсказки, если вы хотите, чтобы в коллекции рядом с названием поля появлялась всплывающая подсказка.
- Нажмите Сохранить.
- Наведите курсор на поле «Цвет» для соответствующей позиции и нажмите на иконку Выбрать цвет
.
Совет: если вы хотите вставить HEX-число вместо выбора цвета, нажмите на само поле и вставьте HEX-число.
- Выберите цвет из стилей сайта или из сохраненных цветов.
Совет: нажмите + Добавить рядом с разделом Мои цвета, чтобы добавить новый пользовательский цвет. - Повторите шаги 10–11 для каждого пункта в коллекции.
Совет:
Узнайте, как установить цвета по умолчанию для поля «Цвет» каждого пункта коллекции.
Подключение текстовых элементов к полю типа «Цвет»
После добавления поля «Цвет» в коллекцию вы можете подключить к нему текстовые элементы. Это позволяет цвету текста меняться в зависимости от значения в поле «Цвет» отображаемой позиции.
Примечание:
В настоящее время невозможно подключить следующие текстовые элементы к полю типа «Цвет»: разворачивающийся текст, бегущая строка или текстовая маска.
Редактор Wix
Редактор Studio
- Перейдите на нужную страницу в редакторе.
- Добавьте текстовый элемент на страницу:
- Нажмите Добавить элементы
слева в редакторе.
- Нажмите Текст.
- Выберите тип текста, который хотите добавить: Стили текста, Заголовки или Абзацы.
- Перетащите выбранный текст на страницу.
- Нажмите Добавить элементы
- Нажмите на иконку Подключить к CMS
на текстовом элементе. - Нажмите на выпадающее меню Выберите набор данных и выберите существующий набор данных, который подключен к вашей коллекции. Либо нажмите Добавить новый набор данных, а затем выберите нужную коллекцию.
- Нажмите на выпадающее меню Текст подключается к и выберите поле, которое вы хотите подключить.
Советы:
- Вы можете подключить текстовые элементы к следующим типам полей коллекции: текст, число, URL, логическое значение, дата, дата и время, обогащенный текст, адрес, теги и время.
- Выберите Количество пунктов, если хотите, чтобы в тексте отображалось общее число пунктов, полученных набором данных.
- Нажмите на выпадающее меню Цвет текста подключается к и выберите поле типа «Цвет», которое вы хотите подключить к тексту.
- Нажмите Превью, чтобы проверить подключения.
- Нажмите Опубликовать, если вы готовы применить изменения на сайте.
Подключение кнопок к полю типа «Цвет»
Подключайте кнопки к полям «Цвет», чтобы управлять цветами кнопок напрямую из коллекций CMS. Вы можете подключить определенные состояния кнопок (обычный, при наведении и отключен) к разным полям «Цвет». Для каждого состояния кнопки можно выбрать, какие поля «Цвет» использовать для текста, иконки, границы и фона кнопки.
Редактор Wix
Редактор Studio
- Перейдите на соответствующую страницу в редакторе.
- Нажмите на кнопку, которую вы хотите подключить к CMS. Узнайте, как добавить кнопку.
- Нажмите на иконку Подключить к CMS .
- Нажмите на выпадающее меню Выберите набор данных и выберите существующий набор данных, который подключен к вашей коллекции. Либо нажмите Добавить набор данных, выберите нужную коллекцию, дайте набору данных название и нажмите Создать.
- Нажмите на выпадающее меню Действие при клике подключается к и выберите соответствующий вариант. Подробнее о подключении действий при клике по кнопке.
- Прокрутите вниз до раздела Цвета в панели Подключить кнопку справа.
- Нажмите на соответствующую вкладку, чтобы выбрать состояние кнопки для подключения: В покое, При наведении или Отключено
- Нажмите на соответствующие выпадающие меню, чтобы выбрать поля типа «Цвет» для подключения:
- Цвет текста подключается к: подключите поле «Цвет» к цвету текстовых символов.
- Цвет иконки подключается к: подключите поле «Цвет» к иконке кнопки (если у кнопки есть иконка).
- Цвет границы подключается к: подключите поле «Цвет» к цвету границы.
- Цвет фона подключается к: подключите поле «Цвет» к цвету фона кнопки.
- Повторите шаги 7–8 для каждого состояния кнопки, которое вы хотите подключить к полю коллекции «Цвет».
- Нажмите Превью, чтобы проверить подключения.
- Нажмите Опубликовать, если вы готовы применить изменения на сайте.
Подключение фонов разделов к полю типа «Цвет»
Подключите цвет фона раздела к полю «Цвет» в коллекции CMS. Это позволяет динамично изменять фон раздела в зависимости от отображаемой позиции и связанного с ней поля «Цвет».
Редактор Wix
Редактор Studio
- Перейдите на соответствующую страницу в редакторе.
- Выберите раздел, который вы хотите подключить к полю коллекции типа «Цвет».
- Нажмите на иконку Подключить к CMS .
- Нажмите на выпадающее меню Выберите набор данных и выберите существующий набор данных, который подключен к вашей коллекции. Либо нажмите Добавить набор данных, выберите нужную коллекцию, дайте набору данных название и нажмите Создать.
- В пункте Подключения оставьте в выпадающем меню Фон раздела подключается к значение Не подключено.
Совет: вы также можете подключиться к полю типа «Изображение», которое содержит изображения с прозрачным фоном. Это позволит цвету фона просвечивать сквозь прозрачные области изображения. - В пункте Цвета нажмите на выпадающее меню Цвет фона раздела подключается к и выберите поле типа «Цвет», которое вы хотите подключить.
- Нажмите Превью, чтобы проверить подключения.
- Нажмите Опубликовать, если вы готовы применить изменения на сайте.
Вопросы и ответы
Нажмите ниже, чтобы получить ответы на часто задаваемые вопросы об использовании поля типа «Цвет».
Что произойдет, если настроить правила цвета для разных размеров экрана в Редакторе Studio?
Как подключение поля «Цвет» влияет на AB-паттерн, примененный к репитеру в Редакторе Studio?
Что если в Редакторе Studio применены правила цвета CSS?
Что произойдет при изменении цвета в поле «Цвет» в коллекции CMS?
Что если я хочу отключить элемент от поля «Цвет»?
Можно ли сделать поле «Цвет» обязательным для каждого элемента в коллекции?
Можно ли добавить цвет по умолчанию для поля типа «Цвет»?
Можно ли подключить CSS-стили элементов в Редакторе Studio к коллекциям CMS?